<route lang="yaml">
  name: dataLabel //标签管理
  </route>

<script lang="ts" setup name="dataLabel">
import TableTools from '@/components/Tools/table_tools.vue';
import { getGradeList } from "@/api/modules/dataInventory";
import { getLabelList, getClassifyGradeTreeList, saveLabel, getLabelPageList, deleteLabel, updateLabel } from "@/api/modules/dataLabel";
import { CirclePlus, Delete, Warning } from "@element-plus/icons-vue";


const { proxy } = getCurrentInstance() as any;
const dialogLabelFormRef = ref();

// 原始数据存储
const classGradeTreeData: any = ref([]);
const expandedKey: any = ref([])
// 分类guid
const classifyGuid = ref('')
// 分类明细guid
const classifyDetailGuid = ref('')

const getClassifyGradeTree = async () => {
  treeInfo.value.loading = true;
  const res: any = await getClassifyGradeTreeList();
  if (res.code == proxy.$passCode) {

    const transformedData = transformData(res.data);
    classGradeTreeData.value = transformedData || [];
    treeInfo.value.data = classGradeTreeData.value;
    // 默认展开第一级
    expandedKey.value = classGradeTreeData.value[0].guid;
    treeInfo.value.expandedKey.push(classGradeTreeData.value[0].guid);
    // 寻找第一children中guid
    if (classGradeTreeData.value[0].children) {
      treeInfo.value.currentNodeKey = classGradeTreeData.value[0].children[0].guid;
      // 分类明细guid
      classifyDetailGuid.value = classGradeTreeData.value[0].children[0].guid;
    }
    // 分别赋值 分类guid
    classifyGuid.value = classGradeTreeData.value[0].guid;
    newCreateGradeFormItems.value[1].options = transformDataForTree(transformedData)
    treeInfo.value.loading = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}
// 数据转换函数
const transformData = (data: any[]) => {
  return data?.map(({ name, classifyRSTreeVOS, ...rest }) => ({
    ...rest,
    classifyName: name,
    children: classifyRSTreeVOS,
  }));
};

// 我需要给树形组件传递的数据，只能选择末级节点。所以要给非末级节点添加一个disabled属性
// 通过深拷贝的方式，避免污染原始数据
const transformDataForTree = (data: any[]) => {
  const cloneData = JSON.parse(JSON.stringify(data));
  const traverse = (data: any[]) => {
    data.forEach((item) => {
      if (item.children) {
        item.disabled = true;
        traverse(item.children);
      }
    });
  };
  traverse(cloneData);
  return cloneData;
};

// 获取标签规则列表
const labelPageList = ref<any>()

const getLabelPageData = async () => {
  refCount.value++;
  tableInfo.value.loading = true;
  const params = {
    pageIndex: 1,
    pageSize: 50,
    classifyGuid: classifyGuid.value,
    detailGuid: classifyDetailGuid.value
  }
  const res: any = await getLabelPageList(params);
  if (res.code == proxy.$passCode) {
    labelPageList.value = res.data.records;
    tableInfo.value.page.rows = res.data.totalRows;
    tableInfo.value.page.limit = res.data.pageSize
    tableInfo.value.page.curr = res.data.pageIndex
    tableInfo.value.data = labelPageList.value;
    tableInfo.value.loading = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

// 下拉标签
const LabelListData = ref<any>([]);
const getLabelListData = async () => {
  const res: any = await getLabelList({ label: '' });
  if (res.code == proxy.$passCode) {
    LabelListData.value = res.data;
    const data = res.data
    data.map(item => {
      item.label = item.label
      item.value = item.guid
    })
    classSearchItemList.value[0].options = data;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

onBeforeMount(async () => {
  await getClassifyGradeTree();
  await getLabelPageData();
  await getLabelListData();
});

// 左侧tree-list
const treeInfo = ref<any>({
  id: "data-pickup-tree",
  filter: true,
  queryValue: "",
  className: 'tree-list',
  queryPlaceholder: "输入目录名称搜索",
  props: {
    label: "classifyName",
    value: "guid",
  },
  nodeKey: 'guid',
  expandedKey: [],
  currentNodeKey: '',
  expandOnNodeClick: false,
  data: [],
  loading: false
});
// 点击树节点修改分类guid 和 分类明细guid
// 存储大类的数据。
const findNodeDetails = ref<any>('');
const isLastLayer = ref<boolean>(false);
// 所在层级的info
const atGradeinfo = ref<any>('');

const findTopParentNode = (node: any) => {
  if (!node) return;

  // 判断是否为最后一层
  isLastLayer.value = node.childNodes.length === 0;
  if (isLastLayer.value) {
    atGradeinfo.value = node.data;
  }
  if (!node.parent.parent) {
    findNodeDetails.value = node.data;
    return;
  }

  // 递归向上查找符合条件的祖先节点
  const findCParent = (currentNode: any): any => {
    if (!currentNode?.parent) return null; // 没有父节点，停止递归
    if (currentNode.parent.data?.type === 'C') {
      return currentNode.parent; // 找到符合条件的节点
    }
    return findCParent(currentNode.parent); // 继续向上查找
  };

  // 查找最接近的符合条件的祖先节点
  const topParent = findCParent(node);

  // 更新结果
  if (topParent) {
    findNodeDetails.value = topParent.data;
  }
};



const nodeClick = (data, node) => {
  console.log('nodeClick', data, node);
  findTopParentNode(node);
  newCreateGradeFormItems.value[1].options = transformDataForTree([findNodeDetails.value])

  // 分类guid
  if (Object.keys(data).includes("type")) {
    classifyGuid.value = data.guid;
    classifyDetailGuid.value = '';
    getLabelPageData();
    return;
  }
  classifyGuid.value = data.classifyGradeGuid;
  // 分类明细guid
  classifyDetailGuid.value = data.guid;
  getLabelPageData();
}
const handleTreeItemMenuClick = (data: any, type) => {
  console.log('handleTreeItemMenuClick', data, type);
}



// 右侧表格配置
const tableDataList = ref([]);
// 删除标签guids
const deleteLabelGuids = ref<any>([]);

// 保存编辑的guid
const editLabelRow = ref<any>('');
const page = ref({
  limit: 10,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
});
const tableInfo = ref({
  id: "role-manage-table",
  multiple: true,
  fixedSelection: true,
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: "标签名", field: "label", type: 'text_btn', class: 'drawer-detail-cell', width: 160, value: 'detail', columClass: 'text_btn' },
    {
      label: "分类", field: "classifyNames", getName: (scope) => {
        let tempInfo = scope.row.classifyNames;
        return tempInfo.join('/')
      },
    },
    { label: "分级", field: "gradeDetailName", width: 80 },
    {
      label: '状态', field: 'bizState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 'Y', inactiveValue: 'N', switchWidth: 56, width: 100, align: 'center'
    },
    { label: "修改人", field: "updateUserName", width: 140 },
    { label: "更新时间", field: "updateTime", width: 180 },
  ],
  data: tableDataList.value,
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 120,
    fixed: 'right',
    btns: [
      {
        label: "编辑", value: "edit", click: async (scope) => {
          console.log('编辑', scope);
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          newCreateGradeStandardDialogInfo.value.title = '编辑标签';
          await getGradeListData(scope.row.gradeGuid);
          // 遍历classGradeTreeData 找到对应的guid item的refGradeGuid
          classGradeTreeData.value.forEach((element: any) => {
            if (element.guid === scope.row.classifyGuid) {
              tempRefGradeGuid.value = element.refGradeGuid;
            }
          });
          editLabelRow.value = scope.row;
          // formItems进行回显,加上disabled: true 不能修改
          newCreateGradeFormItems.value.forEach(item => {
            item.default = scope.row[item.field];
            item.disabled = false;
          });
          matchChValue.value.value = scope.row.matchChValue;
          matchChValue.value.disabled = false;
          matchEnValue.value.value = scope.row.matchEnValue;
          matchEnValue.value.disabled = false;
          if (scope.row.vagueMatchRule) {
            // formRows进行回显
            formRows.value = scope.row.vagueMatchRule.map((item) => ({
              matchValue: item.matchValue,
              position: item.position,
              name: item.name,
              disabled: false
            }));
          } else {
            formRows.value = [{ matchValue: '', position: '', name: '', disabled: false }];
          }
          newCreateGradeStandardDialogInfo.value.visible = true;
        }
      },
      {
        label: "删除 ", value: "delete", click: (scope) => {
          console.log('删除', scope);
          deleteLabelGuids.value = [];  // 重置数组
          deleteLabelGuids.value.push(scope.row.guid);
          batchRemobe();
          getLabelListData();
        }
      },
    ]
  },
  loading: false
});

// 批量删除
const batchRemobe = async () => {
  // 批量删除,增加confirm确认弹窗
  if (deleteLabelGuids.value.length == 0) {
    proxy.$ElMessage({
      type: 'warning',
      message: '请选择要删除的数据'
    })
    return;
  }

  // confirm弹窗
  proxy.$confirm('是否删除选中数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res: any = await deleteLabel(deleteLabelGuids.value);
    if (res.code == proxy.$passCode) {
      proxy.$ElMessage({
        type: 'success',
        message: '删除成功'
      })
      getLabelPageData();
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }).catch(() => {
    proxy.$ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

const tableSwitchBeforeChange = (scope, field, callback) => {
  // 弹窗确认
  proxy.$confirm('是否修改状态?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const state = scope.row.bizState === 'Y' ? 'N' : 'Y';
    const res = await tableSwitchChange(state, scope, field);
    if (res) {
      callback();
    }
  }).catch(() => {
    proxy.$ElMessage({
      type: 'info',
      message: '已取消修改'
    });
  });
}

const tableSwitchChange = async (state, scope, field) => {
  console.log('tableSwitchChange', state, scope, field);
  const params = {
    ...scope.row,
    bizState: state,
    version: 0,
    vagueMatchRule: scope.row.vagueMatchRule ? scope.row.vagueMatchRule : ''
  }
  const res: any = await updateLabel(params);
  if (res.code == proxy.$passCode) {
    proxy.$ElMessage.success('修改成功');
    getLabelPageData();
    return true
  } else {
    proxy.$ElMessage.error(res.msg);
    return false
  }
}

const tableBtnClick = async (scope, value) => {
  console.log('tableBtnClick', scope.row);
  await getGradeListData(scope.row.gradeGuid);
  // formItems进行回显,加上disabled: true 不能修改
  newCreateGradeFormItems.value.forEach(item => {
    item.default = scope.row[item.field];
    item.disabled = true;
  });
  matchChValue.value.value = scope.row.matchChValue;
  matchChValue.value.disabled = true;
  matchEnValue.value.value = scope.row.matchEnValue;
  matchEnValue.value.disabled = true;
  if (scope.row.vagueMatchRule) {
    // formRows进行回显
    formRows.value = scope.row.vagueMatchRule.map((item) => ({
      matchValue: item.matchValue,
      position: item.position,
      name: item.name,
      disabled: true
    }));
  } else {
    formRows.value = [{ matchValue: '', position: '', name: '', disabled: false }];
  }
  newCreateGradeStandardDialogInfo.value.visible = true;
}

const tablePageChange = (info) => {
  console.log('tablePageChange', info);
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  getLabelPageData();
}


/**弹窗配置 */
const newCreateGradeFormItems = ref<any>([{
  label: '标签名',
  type: 'input',
  placeholder: '请选择',
  field: 'label',
  default: '',
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
  block: true,
},
{
  label: '分类',
  type: 'tree-select',
  placeholder: '请选择',
  field: 'classifyDetailGuid',
  default: '',
  options: [],
  props: {
    label: "classifyName",
    value: "guid",
  },
  required: true,
  checkStricty: true,
  lazy: false,
  filterable: true,
  clearable: true,
  visible: true,
  block: true,
},
{
  label: '分级',
  type: 'select',
  maxlength: 19,
  placeholder: '请输入',
  field: 'gradeDetailGuid',
  default: '',
  options: [],
  props: {
    label: 'name',
    value: 'guid',
  },
  clearable: true,
  required: true,
  block: true,
},
  // {
  //   label: ' ',
  //   type: 'label',
  //   default: '规则配置',
  //   block: true,
  //   col: 'title-label'
  // },
  // {
  //   label: '精确匹配',
  //   type: 'textarea',
  //   maxlength: 200,
  //   placeholder: '请输入字段中文，中间用英文“,”分号隔开',
  //   field: 'matchChValue',
  //   default: '',
  //   clearable: true,
  //   required: false,

  // },
  // {
  //   label: '',
  //   type: 'textarea',
  //   maxlength: 200,
  //   placeholder: '请输入字段中文，中间用英文“,”分号隔开',
  //   field: 'matchEnValue',
  //   default: '',
  //   clearable: true,
  //   required: false,
  // }
]);

const newCreateGradeFormRules = ref({
  label: [
    { required: true, message: '请输入标签名', trigger: 'change' }
  ],
  detailGuid: [
    { required: true, message: '请选择分类', trigger: 'change' }
  ],
  gradeDetailGuid: [
    { required: true, message: '请选择分级', trigger: 'change' }
  ],
});

const newCreateGradeStandardDialogInfo = ref({
  visible: false,
  size: 600,
  title: "添加标签",
  type: "",
  formInfo: {
    id: "grade-form",
    items: newCreateGradeFormItems.value,
    rules: newCreateGradeFormRules.value,
  },
  submitBtnLoading: false,
  btns: {
    cancel: () => {
      newCreateGradeStandardDialogInfo.value.visible = false;
      newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
    },
    submit: async (btn, info) => {

      for (let i = 0; i < formRows.value.length; i++) {
        const row = formRows.value[i];
        // 如果某一条数据的 matchValue, position, name 都为空，则跳过，不校验
        if (!row.matchValue && !row.position && !row.name) {
          continue; // 如果全为空，跳过这一行的校验
        }
        if (!row.matchValue || !row.position || !row.name) {
          proxy.$ElMessage.error('请填写完整的模糊匹配规则');
          return;
        }
      }
      newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
      if (newCreateGradeStandardDialogInfo.value.title === "添加标签") {
        const tempParams = formRows.value.map((item) => ({
          matchValue: item.matchValue,
          position: item.position,
          name: item.name
        }));
        const params = {
          ...info,
          classifyGuid: classifyGuid.value,
          gradeGuid: tempRefGradeGuid.value,
          vagueMatchRule: tempParams,
          matchChValue: matchChValue.value.value,
          matchEnValue: matchEnValue.value.value
        }
        console.log('submit', params);
        const res: any = await saveLabel(params);
        if (res.code == proxy.$passCode) {
          proxy.$ElMessage.success('新增成功');
          newCreateGradeStandardDialogInfo.value.visible = false;
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          getLabelPageData();
          getLabelListData();
        } else {
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          proxy.$ElMessage.error(res.msg);
        }
      }
      if (newCreateGradeStandardDialogInfo.value.title === "编辑标签") {
        console.log('editLabelRow', info, formRows.value);
        const tempParams = formRows.value.map((item) => ({
          matchValue: item.matchValue,
          position: item.position,
          name: item.name
        }));
        const params = {
          ...editLabelRow.value,
          ...info,
          vagueMatchRule: tempParams,
          classifyGuid: classifyGuid.value,
          gradeGuid: tempRefGradeGuid.value,
          matchChValue: matchChValue.value.value,
          matchEnValue: matchEnValue.value.value
        }
        console.log('submit', params);
        const res: any = await updateLabel(params);
        if (res.code == proxy.$passCode) {
          proxy.$ElMessage.success('修改成功');
          newCreateGradeStandardDialogInfo.value.visible = false;
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          getLabelPageData();
          getLabelListData();
        } else {
          newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
          proxy.$ElMessage.error(res.msg);
        }
      }
    }
  }
})

// 新增标签
const addNewLabel = async () => {
  newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
  newCreateGradeFormItems.value.forEach(item => {
    item.default = '';
    item.disabled = false;
  });
  matchChValue.value.value = '';
  matchChValue.value.disabled = false;
  matchEnValue.value.value = '';
  matchEnValue.value.disabled = false;
  formRows.value = [{ matchValue: '', position: '', name: '', disabled: false }];

  //
  if (isLastLayer.value) {
    // 选择了最后一级
    newCreateGradeFormItems.value[1].default = atGradeinfo.value.guid;
    treeInfo.value.expandedKey = [];
    treeInfo.value.currentNodeKey = atGradeinfo.value.guid;
    treeInfo.value.expandedKey.push(atGradeinfo.value.classifyGradeGuid);
    if (atGradeinfo.value?.classifyGradeGuid) {
      classifyGuid.value = atGradeinfo.value.classifyGradeGuid;
      tempName.value = atGradeinfo.value.name;
      classifyDetailGuid.value = atGradeinfo.value.guid;
    }
    // 遍历classGradeTreeData 找到对应的guid item的refGradeGuid
    classGradeTreeData.value.forEach((element: any) => {
      if (element.guid === classifyGuid.value) {
        tempRefGradeGuid.value = element.refGradeGuid;
      }
    });

    if (tempRefGradeGuid.value) {
      await getGradeListData(tempRefGradeGuid.value);
      const matchedGrade = gradeListData.value.find(
        (element: any) => element.name === tempName.value
      );
      if (matchedGrade) {
        newCreateGradeFormItems.value[2].default = matchedGrade.guid;
      }
    }
  }

  newCreateGradeStandardDialogInfo.value.title = '添加标签';
  newCreateGradeStandardDialogInfo.value.visible = true;
  newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
}


const classSearchItemList = ref<any>([
  {
    type: 'select',
    multiple: true,
    label: '',
    field: 'labelName',
    default: [],
    options: [],
    placeholder: '请选择标签名称',
    clearable: true,
    filterable: true,
    visible: true

  }
]);

const guids = ref<any>([])
const selectChange = async (val: any, row: any) => {
  if (val) {
    guids.value = val;
  }
};

/** 搜索查询分类标准 */
const refCount = ref(0);
const searchClass = async (val: any, clear: boolean = false) => {
  console.log('searchClass', val, clear);
  if (clear) {
    classSearchItemList.value.map(item => item.default = '')
    guids.value = []
    getLabelPageData();
    return;
  }
  if (val?.labelName?.length !== 0 || refCount.value >= 1) {
    tableInfo.value.loading = true;
    const params = {
      pageIndex: 1,
      pageSize: 50,
      guids: guids.value,
    }
    const res: any = await getLabelPageList(params);
    if (res.code == proxy.$passCode) {
      labelPageList.value = res.data.records;
      tableInfo.value.page.rows = res.data.totalRows;
      tableInfo.value.page.limit = res.data.pageSize
      tableInfo.value.page.curr = res.data.pageIndex
      tableInfo.value.data = labelPageList.value;
      tableInfo.value.loading = false;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  }

};


//弹窗模糊匹配

const tempRefGradeGuid = ref('')
const tempName = ref('')
const tempFormData = ref()

const handleSelectChange = async (val, row, info) => {
  const formRef = dialogLabelFormRef.value.dialogRef.dialogFormRef[0].formInline
  tempFormData.value = formRef;
  if (tempRefGradeGuid.value) {
    await getGradeListData(tempRefGradeGuid.value);
    const matchedGrade = gradeListData.value.find(
      (element: any) => element.name === tempName.value
    );
    if (matchedGrade) {
      newCreateGradeFormItems.value[2].default = matchedGrade.guid;
      newCreateGradeFormItems.value[0].default = tempFormData.value.label;
      newCreateGradeFormItems.value[1].default = tempFormData.value.classifyDetailGuid;
    }
  }
};

const handleTreeSelectNodeChange = (node, item, nodeObj) => {
  treeInfo.value.expandedKey = [];
  treeInfo.value.currentNodeKey = node.guid;
  treeInfo.value.expandedKey.push(node.classifyGradeGuid);
  if (node?.classifyGradeGuid) {
    classifyGuid.value = node.classifyGradeGuid;
    tempName.value = node.name;
    classifyDetailGuid.value = node.guid;
  }
  // 遍历classGradeTreeData 找到对应的guid item的refGradeGuid
  classGradeTreeData.value.forEach((element: any) => {
    if (element.guid === classifyGuid.value) {
      tempRefGradeGuid.value = element.refGradeGuid;
    }
  });
};

const gradeListData = ref<any>()
// 获取分级列表
const getGradeListData = async (guid) => {
  const params = {
    pageIndex: 1,
    pageSize: -1,
    classifyGradeGuid: guid
  }
  const res: any = await getGradeList(params);
  if (res.code == proxy.$passCode) {
    gradeListData.value = res.data.records;
    newCreateGradeFormItems.value[2].options = gradeListData.value;
    return res.data.records;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

const formRows = ref([
  { matchValue: '', position: '', name: '', disabled: false }, // 初始行
]);

// 位置选项
const positionOptions = [
  { label: '前面', value: 'B' },
  { label: '后面', value: 'A' },
  { label: '任意位置', value: 'C' },
];
// 语言options
const languageOptions = [
  { label: '中文名', value: 'zhName' },
  { label: '英文名', value: 'enName' },
];
// 当前悬停的行索引
const hoveredRowIndex = ref<number | null>(null);

// 鼠标移入事件
const handleMouseEnter = (index: number) => {
  hoveredRowIndex.value = index;
};

// 鼠标移出事件
const handleMouseLeave = () => {
  hoveredRowIndex.value = null;
};

// 新增行
const addRow = () => {
  formRows.value.push({ matchValue: '', position: '', name: '', disabled: false });
};

// 删除行
const deleteRow = (index: number) => {
  formRows.value.splice(index, 1);
};
const matchChValue = ref({
  value: '',
  disabled: false
})
const matchEnValue = ref({
  value: '',
  disabled: false
})

</script>


<template>
  <div class="data-label">
    <div class="container_wrap full flex">
      <div class="aside_wrap">
        <div class="aside_title">分类分级目录</div>
        <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" @itemMenuClick="handleTreeItemMenuClick" />
      </div>
      <div class="main_wrap">
        <div class="main_wrap-top-area">
          <!-- <el-select v-model="labelInput" multiple filterable remote reserve-keyword placeholder="请输入关键字"
            remote-show-suffix :remote-method="remoteMethod" :loading="loading" style="width: 240px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>

          <el-button type="primary" class="v-serach" @click="labelSearch">查询</el-button>
          <el-button>清空</el-button> -->
          <TableTools :searchItems="classSearchItemList" :searchId="'template-manage-search'" @search="searchClass"
            @select-change="selectChange" />
        </div>
        <div>
          <el-button type="primary" class="v-add" @click="addNewLabel">新增</el-button>
          <!-- <el-button class="v-import">导入</el-button>
          <el-button>导出</el-button> -->
        </div>
        <div class="table_panel_wrap">
          <Table :tableInfo="tableInfo" @tableSwitchBeforeChange="tableSwitchBeforeChange"
            @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
        </div>
      </div>
    </div>
    <Dialog_form ref="dialogLabelFormRef" :dialogConfigInfo="newCreateGradeStandardDialogInfo" class="v-dialog-form"
      @treeSelectNodeChange='handleTreeSelectNodeChange' @selectChange="handleSelectChange">
      <template v-slot:default>
        <div>
          <div class="dim-label">
            <span class="front">模糊匹配</span>
            <el-icon>
              <Warning />
            </el-icon>
            <span class="tip">
              精确匹配使用中文；分隔每个规则
            </span>
          </div>
          <div class="v-match">
            <el-input v-model="matchChValue.value" :disabled="matchChValue.disabled" maxlength="200"
              style="width: 272px;height:94px;" show-word-limit type="textarea" class="no-resize" />
            <el-input v-model="matchEnValue.value" :disabled="matchEnValue.disabled" maxlength="200"
              style="width: 272px;height:94px;" show-word-limit type="textarea" class="no-resize" />
          </div>
        </div>
        <div class="dim-label" style="margin-top: 16px;">
          <span class="front">模糊匹配</span>
          <el-icon>
            <Warning />
          </el-icon>
          <span class="tip">
            模糊匹配是或的关系，可配置多个模糊匹配规则
          </span>
        </div>
        <!-- 渲染行 -->
        <div v-for="(row, index) in formRows" :key="index" class="match-content-wrapper">
          <div class="match-content" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave()">
            <!-- 位置映射下拉框 -->
            <el-select v-model="row.name" placeholder="请选择中文名/英文名" :disabled=row.disabled class="v-select">
              <el-option v-for="option in languageOptions" :key="option.value" :label="option.label"
                :value="option.value" />
            </el-select>
            <el-select v-model="row.position" placeholder="请选择位置" :disabled=row.disabled class="v-select">
              <el-option v-for="option in positionOptions" :key="option.value" :label="option.label"
                :value="option.value" />
            </el-select>
            <el-input v-model="row.matchValue" :disabled=row.disabled class="v-input" laceholder="请输入匹配值" />

            <!-- 删除按钮 -->
            <el-button :disabled=row.disabled v-if="hoveredRowIndex === index" class="extra-icon" :icon="Delete"
              @click="deleteRow(index)" circle style="margin-left: 8px;" />
          </div>
        </div>

        <!-- 新增按钮 -->
        <div class="add-Icon" @click="addRow">
          <el-icon class="icon-add" color="#4fa1a4" :size="30">
            <CirclePlus />
          </el-icon>
          <span class="word-des">模糊匹配规则</span>
        </div>

      </template>
    </Dialog_form>
  </div>
</template>

<style lang="scss" scoped>
.data-label {
  width: 100%;
  height: 100%;

  .container_wrap {
    padding: 0;
    display: flex;
    justify-content: space-between;

    .aside_wrap {
      width: 199px;
      border-right: 1px solid #d9d9d9;
      box-shadow: none;

      .aside_title {
        width: calc(100% - 32px);
        display: inline-block;
      }

      .icon-add.el-icon {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        cursor: pointer;

        svg {
          width: 24px;
          height: 24px;
        }
      }

      .tree_panel {
        height: 100%;
        padding-top: 0;

        :deep(.el-tree) {
          margin: 0;
          height: calc(100% - 68px);
          overflow: hidden auto;
        }
      }

    }

    .main_wrap {
      padding: 11px 16px 0 16px;

      .main_wrap-top-area {
        display: flex;
        margin-bottom: 10px;
        align-items: center;

        .v-serach {
          margin-left: 10px;
        }
      }

      .table_panel_wrap {
        margin-top: 12px;
        width: 100%;
        height: calc(100% - 105px);
        min-height: 210px;
        overflow: visible;
      }
    }
  }

  .dim-label {
    height: 10px;
    display: flex;
    align-items: center;
    margin-top: 6px;

    .front {
      margin-right: 8px;
    }

    .tip {
      margin-left: 3px;
    }
  }

  .match-content-wrapper {
    width: 100%;

    .match-content {
      display: flex;
      align-items: center;
      margin-top: 8px;

      .v-select {
        margin-right: 8px;
        width: 33%;
      }

      .v-input {
        width: calc(33% - 50px);
      }

      .extra-icon {
        transition: opacity 1s;
      }
    }
  }

  :deep(.add-Icon) {
    display: flex;
    align-items: center;
    margin-top: 13px;
    width: 50%;

    .el-icon svg {
      height: 19px;
      width: 19px;
    }

    .word-des {
      color: #4fa1a4
    }
  }

  :deep(.v-dialog-form) {
    .title-label {
      font-size: 16px;
      color: #212121;
      line-height: 24px;
      font-weight: 600;
    }

    .el-dialog__body {
      height: 510px;
      overflow: auto;
    }
  }

  .v-match {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  :deep(.no-resize) {
    height: 94px;

    .el-textarea__inner {
      min-height: 94px !important;
      resize: none;
    }
  }
}
</style>