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

<script lang="ts" setup name="configureRules">
import { ref } from "vue";
import useUserStore from "@/store/modules/user";
import { getBizRuleConfigDetail, getDictionaryAll, getNewDataTypeList, saveBizRuleConfig, } from '@/api/modules/dataInventory'
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const fullPath = route.fullPath;
const userStore = useUserStore();
const bizRuleConfigData = ref<any>()
const getBizRuleConfigDetailData = async () => {
  tableFieldsLoading.value = true
  const params = {
    tableGuid: router.currentRoute.value.query.tableGuid,
    execGuid: router.currentRoute.value.query.execGuid
  }
  const res: any = await getBizRuleConfigDetail(params)
  if (res.code === proxy.$passCode) {
    bizRuleConfigData.value = res.data
    // 每条数据添加一个isEdit: false 属性，用于判断是否进入编辑模式
    bizRuleConfigData.value.forEach((item: any) => {
      item.isEdit = false
    })
    tableData.value = bizRuleConfigData.value
    // 处理tableData,fieldLengthCondition,有值则不用加字段，如果没有值则加字段lengthSymbol 为''
    tableData.value.forEach((item: any) => {
      if (!item.fieldLengthCondition) {
        item.lengthSymbol = ''
      }
      if (!isSingleInput(item.fieldType) && (item.startValue || item.endValue)) {
        item.fieldValueRange = (item.startValue ? item.startValue : '') + '#' + (item.endValue ? item.endValue : '')
      }
      if (item.fieldLengthCondition) {
        const arr = item.fieldLengthCondition.split('#');  // 按 '#' 分割
        // 判断数组中是否包含 'between'
        if (arr.includes('between')) {
          // 如果包含 'between'，则将对应的 start 和 end 值赋给相应的字段
          item.lengthSymbol = 'between';
          item.numberRangeStart = arr[1];  // start value
          item.numberRangeEnd = arr[2];    // end value
        } else {
          // 否则处理其他符号条件，如 '>=', '<=', '>', '<', '=' 等
          item.lengthSymbol = arr[0];      // 符号（如 '>', '<=', 等）
          item.lengthValue = arr[1];       // 值（如 10，20 等）
        }
      }
    })
    console.log('tableData', tableData.value)

    tableFieldsLoading.value = false
  } else {
    proxy.$message.error(res.msg)
  }
}
// 获取字段类型
const fieldData = ref<any>([]);
const getFieldTypeData = async () => {
  const params = {
    dictType: "字段类型"
  }
  const res: any = await getNewDataTypeList(params);
  if (res.code == proxy.$passCode) {
    fieldData.value = res.data || [];
  } else {
    proxy.$ElMessage.error(res.msg);
  }
}

// 获取字典
const dictionaryList = ref([]);

const getDictionaryList = () => {
  getDictionaryAll({ state: 1 }).then((res: any) => {
    dictionaryList.value = [];
    if (res.code == proxy.$passCode) {
      dictionaryList.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
};

onMounted(async () => {
  await getFieldTypeData()
  await getBizRuleConfigDetailData()
  getDictionaryList()
})


const tableData1 = ref([
  {
    databaseChName: router.currentRoute.value.query.databaseChName || '--',
    tableName: router.currentRoute.value.query.tableName || '--',
    tableChName: router.currentRoute.value.query.tableChName || '--',
    description: router.currentRoute.value.query.description || '--',
  },
])
// 表格数据
const tableData = ref()

// 配置哪些字段可编辑
const editableFields = {
  fieldName: true, // 字段中文名可编辑
  length: true, // 长度可编辑
  isUnique: true, // 数据是否唯一可编辑
  fieldPrecision: true, // 精度可编辑
  dictionaryGuid: true, // 关联字典可编辑
}

const tableFieldsLoading = ref(false)
// 当前选中的行
const selectedRows = ref([]);

// 监听选中行变化
const selectionFieldsChange = (selection) => {
  selectedRows.value = selection;
  console.log('selectedRows', selectedRows.value)
};

// 上移操作
const moveUp = () => {
  if (selectedRows.value.length === 0) {
    proxy.$message.warning("请选择数据!");
    return;
  }
  selectedRows.value.forEach((row: any) => {
    const index = tableData.value.findIndex((item) => item.fieldGuid === row.fieldGuid);
    if (index > 0) {
      [tableData.value[index - 1], tableData.value[index]] = [
        tableData.value[index],
        tableData.value[index - 1],
      ];
    }
  });
};

// 下移操作
const moveDown = () => {
  if (selectedRows.value.length === 0) {
    proxy.$message.warning("请选择数据!");
    return;
  }
  // 倒序遍历选中行
  [...selectedRows.value].reverse().forEach((row: any) => {
    const index = tableData.value.findIndex((item) => item.fieldGuid === row.fieldGuid);
    if (index < tableData.value.length - 1) {
      [tableData.value[index], tableData.value[index + 1]] = [
        tableData.value[index + 1],
        tableData.value[index],
      ];
    }
  });
};
// 删除行
const deleteRow = (index) => {
  // confirm 弹窗
  proxy.$confirm('是否删除该行数据？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    tableData.value.splice(index, 1)
  }).catch(() => {
    proxy.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
}
// 批量删除功能
const batchDelete = () => {
  selectedRows.value.forEach((row: any) => {
    const index = tableData.value.findIndex((item) => item.tableData === row.tableData);
    if (index !== -1) tableData.value.splice(index, 1);
  });
  selectedRows.value = [];
};

// 暂存编辑的行数据
const tempRowData = ref<any>([]);

// 编辑行
const editRow = (row) => {
  console.log('编辑:', row);
  // 暂存编辑前的数据 用于取消编辑时恢复原始数据,先判断是否已经暂存过tempRowData通过fieldGuid
  if (!tempRowData.value.find((item) => item.fieldGuid === row.fieldGuid)) {
    tempRowData.value.push({ ...row });
  }
  console.log('tempRowData:', tempRowData.value);
  // console.log('tempRowData:', tempRowData.value);
  // if (row.fieldLengthCondition) {
  //   const arr = row.fieldLengthCondition.split('#');  // 按 '#' 分割

  //   // 判断数组中是否包含 'between'
  //   if (arr.includes('between')) {
  //     // 如果包含 'between'，则将对应的 start 和 end 值赋给相应的字段
  //     row.lengthSymbol = 'between';
  //     row.numberRangeStart = arr[1];  // start value
  //     row.numberRangeEnd = arr[2];    // end value
  //   } else {
  //     // 否则处理其他符号条件，如 '>=', '<=', '>', '<', '=' 等
  //     row.lengthSymbol = arr[0];      // 符号（如 '>', '<=', 等）
  //     row.lengthValue = arr[1];       // 值（如 10，20 等）
  //   }
  // }
  // if (row.fieldValueRange && !isSingleInput(row.fieldType)) {
  //   const arr = row.fieldValueRange.split('#')
  //   row.startValue = arr[0]
  //   row.endValue = arr[1]
  // }

  row.isEdit = true; // 进入编辑模式

};

// 保存数据
const saveRow = (row) => {

  console.log('保存:', row);
  const tempRow = row;
  let fieldLengthCondition = ''
  let fieldValueRange = ''
  if (row.lengthSymbol === 'between') {
    // 校验不能为空，其中一个为空则提示
    if (!row.numberRangeStart || !row.numberRangeStart) {
      proxy.$message.error('请输入完整的长度范围');
      return;
    }
    if (row.numberRangeStart && !row.numberRangeStart) {
      proxy.$ElMessage.error('请输入完整的长度范围');
      return
    }
    if (!row.numberRangeStart && row.numberRangeStart) {
      proxy.$ElMessage.error('请输入完整的长度范围');
      return
    }
    console.log(row.lengthSymbol + '#' + row.numberRangeStart + '#' + row.numberRangeEnd)
    row.fieldLengthCondition = row.lengthSymbol + '#' + row.numberRangeStart + '#' + row.numberRangeEnd
    fieldLengthCondition = row.lengthSymbol + '#' + row.numberRangeStart + '#' + row.numberRangeEnd
  } else {
    if (!row.lengthValue && row.lengthSymbol) {
      proxy.$message.error('请输入完整的长度范围');
      return;
    }
    if (!row.lengthSymbol && row.lengthValue) {
      proxy.$message.error('请输入完整的长度范围');
      return;
    }
    if (!row.lengthSymbol && !row.lengthValue) {
      row.fieldLengthCondition = ''
      fieldLengthCondition = ''
    }
    if (row.lengthSymbol && row.lengthValue) {
      row.fieldLengthCondition = row.lengthSymbol + '#' + row.lengthValue
      fieldLengthCondition = row.lengthSymbol + '#' + row.lengthValue
    }
  }
  // 字段范围 双文本情况
  if (!isSingleInput(row.fieldType)) {
    if (row.startValue || row.endValue) {
      row.fieldValueRange = (row.startValue ? row.startValue : '') + '#' + (row.endValue ? row.endValue : '')
      fieldValueRange = (row.startValue ? row.startValue : '') + '#' + (row.endValue ? row.endValue : '')
    } else {
      row.fieldValueRange = ''
      fieldValueRange = row.fieldValueRange
    }
  } else {
    fieldValueRange = row.fieldValueRange
  }

  if (tableData.value.find((item: any) => item.fieldGuid === row.fieldGuid)) {
    tableData.value.forEach(item => {
      if (item.fieldGuid === row.fieldGuid) {
        item.fieldLengthCondition = fieldLengthCondition
        item.fieldValueRange = fieldValueRange
        item.fieldGuid = tempRow.fieldGuid
        item.fieldPrecision = tempRow.fieldPrecision
        item.isUnique = tempRow.isUnique
        item.notNull = tempRow.notNull
      }
    });
    // 更新 tempRowData 中保存的数据
    const tempRowIndex = tempRowData.value.findIndex((item) => item.fieldGuid === row.fieldGuid);
    if (tempRowIndex !== -1) {
      // 更新 tempRowData 为保存后的数据
      tempRowData.value[tempRowIndex] = { ...row };
    }
  }
  row.isEdit = false
}

const loading = ref(false)
const saveData = async () => {
  loading.value = true
  let inParams = [] as any
  console.log('tableData.value', tableData.value)
  // 遍历tableData.value,校验
  for (let i = 0; i < tableData.value.length - 1; i++) {
    let item = tableData.value[i]
    if (item.lengthSymbol == 'between') {
      if ((!item.numberRangeStart && item.numberRangeEnd) || (item.numberRangeStart && !item.numberRangeEnd) || (!item.numberRangeStart && !item.numberRangeEnd)) {
        proxy.$message.error(`第${i + 1}行，请输入完整的长度范围！`);
        loading.value = false
        return
      }
    } else if (item.lengthSymbol === '>' || item.lengthSymbol === '<' || item.lengthSymbol === '=' || item.lengthSymbol === '>=' || item.lengthSymbol === '<=') {
      if ((!item.lengthSymbol && item.lengthValue) || (item.lengthSymbol && !item.lengthValue)) {
        proxy.$message.error(`第${i + 1}行，请输入完整的长度范围！`);
        loading.value = false
        return
      }
    }
  }
  console.log('tableData.value', tableData.value)

  tableData.value.forEach((item: any) => {
    let fieldLengthCondition = ''
    if (item.lengthSymbol == 'between') {
      fieldLengthCondition = item.lengthSymbol + '#' + item.numberRangeStart + '#' + item.numberRangeEnd
    } else if (item.lengthSymbol === '>' || item.lengthSymbol === '<' || item.lengthSymbol === '=' || item.lengthSymbol === '>=' || item.lengthSymbol === '<=') {
      fieldLengthCondition = item.lengthSymbol + '#' + item.lengthValue
    } else {
      fieldLengthCondition = ''
    }


    if (isSingleInput(item.fieldType)) {
      inParams.push(
        {
          fieldGuid: item.fieldGuid,
          execGuid: router.currentRoute.value.query.execGuid,
          fieldLengthCondition: fieldLengthCondition,
          fieldPrecision: item.fieldPrecision,
          dictionaryGuid: item.dictionaryGuid,
          isUnique: item.isUnique,
          notNull: item.notNull,
          fieldValueRange: item.fieldValueRange
        }
      )
    } else {
      inParams.push(
        {
          fieldGuid: item.fieldGuid,
          execGuid: router.currentRoute.value.query.execGuid,
          fieldLengthCondition: fieldLengthCondition,
          fieldPrecision: item.fieldPrecision,
          dictionaryGuid: item.dictionaryGuid,
          isUnique: item.isUnique,
          notNull: item.notNull,
          startValue: item.startValue,
          endValue: item.endValue
        }
      )
    }
  })
  // // 克隆一份 inParams，用于遍历
  const cloneInParams = JSON.parse(JSON.stringify(inParams));
  // // 遍历 cloneInParams，检查每一项的字段
  let allFieldsEmpty = true; // 标记所有字段是否都为空
  for (let i = 0; i < cloneInParams.length; i++) {
    // 判断每项中除 fieldGuid 和 execGuid 外的字段是否都为空
    const item = cloneInParams[i];
    const isEmpty = !item.notNull && !item.fieldValueRange && !item.isUnique && !item.dictionaryGuid && !item.fieldLengthCondition && !item.fieldPrecision && !item.startValue && !item.endValue;

    // 如果有有效的字段，则不清空 inParams
    if (!isEmpty) {
      allFieldsEmpty = false;
      break;
    }
  }
  // 如果所有项的字段都为空，则清空 inParams
  if (allFieldsEmpty) {
    inParams = [];
  }
  try {
    const res: any = await saveBizRuleConfig(inParams)
    if (res.code === proxy.$passCode) {
      loading.value = false
      proxy.$message.success('修改配置规则成功!')
      userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
      router.push({
        name: 'classifyGradeCatalogue'
      });
    } else {
      loading.value = false
      proxy.$message.error(res.msg)
    }
  } catch (error) {
    loading.value = false
  }
}


const cancel = () => {
  proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'classifyGradeCatalogue'
    });
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}

// 点击取消
const cancelEdit = (row) => {
  // console.log('取消编辑:', row, tempRowData.value);
  // 可在此恢复原始数据逻辑，要查找暂存的数据 tempRowData 中 fieldGuid 与当前行的 fieldGuid 相同的数据
  const tempRow = tempRowData.value.find((item) => item.fieldGuid === row.fieldGuid);

  // 遍历tableData.value，找到当前行并恢复原始数据
  tableData.value.forEach((item) => {
    if (item.fieldGuid === tempRow.fieldGuid) {
      // 恢复原始数据
      item.fieldLengthCondition = tempRow.fieldLengthCondition;
      item.fieldPrecision = tempRow.fieldPrecision;
      item.isUnique = tempRow.isUnique;
      item.notNull = tempRow.notNull;
      item.fieldValueRange = tempRow.fieldValueRange;
    }
  });

  row.isEdit = false; // 退出编辑状态
}

// 判断是否为单文本框
const isSingleInput = (fieldType: string) => {
  // 定义单文本框的字段类型
  const singleInputTypes = ['string', 'text', 'varchar', 'json', 'bit', 'char'];
  return singleInputTypes.includes(fieldType) || !fieldType; // 如果fieldType为空，默认为单文本框
};

const validatePositiveInteger = (row: any, field: string) => {
  let value = row[field];

  // 如果输入值为0，则将其设置为1
  if (value === '0') {
    row[field] = '1';
    return;
  }

  // 判断输入是否符合正整数且在1到9999之间
  if (value && !/^\d{1,4}$/.test(value)) {
    // 如果不是1到4位的正整数，清空输入值
    row[field] = '';
  } else if (value && (parseInt(value) < 1 || parseInt(value) > 9999)) {
    // 如果数字小于1或大于9999，清空输入值
    row[field] = '';
  }
};

function parseFieldLengthCondition(condition) {
  // 如果 condition 为 null 或 undefined，直接返回默认值
  if (!condition) {
    return '--';
  }
  if (condition.includes('between')) {
    const parts = condition.split('#').filter(Boolean); // 按 '#' 分割并去掉空值
    return `介于${parts[1]}-${parts[2]}`; // 显示为 "10-20"
  }
  let symbol = '';
  let value = '';
  if (condition.startsWith('>=') || condition.startsWith('<=')) {
    symbol = condition.slice(0, 2);  // 取前两个字符 '>=', '<='
    value = condition.substring(2);  // 取从第三个字符开始的部分 '10'
  } else {
    symbol = condition[0];
    value = condition.substring(1);
  }
  value = value.replace('#', '');
  let displayText = '';
  switch (symbol) {
    case '>':
      displayText = `大于${value}`;
      break;
    case '=':
      displayText = `等于${value}`;
      break;
    case '<':
      displayText = `小于${value}`;
      break;
    case '>=':
      displayText = `大于等于${value}`;
      break;
    case '<=':
      displayText = `小于等于${value}`;
      break;
    default:
      displayText = `--`;
      break;
  }
  return displayText;
}

const inputLengthKeyUp = (regexp, scope, field, max: any = null, min: any = null) => {
  scope.row[field] = scope.row[field].replace(regexp, '');
  if (field == 'fieldLength' && scope.row.dataType == 'decimal') {
    max = 65;
  }
  /** 最大值设置2000 */
  if (max && scope.row[field] > max) {
    scope.row[field] = max;
  }
  if (min !== null && scope.row[field] != '' && scope.row[field] <= min) {
    scope.row[field] = min;
  }
}

</script>
<template>
  <div class="configure-rules">
    <div class="table_panel_wrap">
      <el-table :data="tableData1" :highlight-current-row="true" stripe border height="100%" row-key="guid"
        tooltip-effect="light" :style="{
          width: '100%',
          'max-height': 'calc(100% - 16px)',
          display: 'inline-block',
        }">
        <el-table-column prop="databaseChName" label="数据源" width="180" show-overflow-tooltip />
        <el-table-column prop="tableName" label="表名称" width="180" show-overflow-tooltip />
        <el-table-column prop="tableChName" label="数据库表" width="280" show-overflow-tooltip />
        <el-table-column prop="description" label="描述" width="180" show-overflow-tooltip />
      </el-table>
    </div>
    <!-- <div class="btn-area">
      <el-button @click="moveUp">上移</el-button>
      <el-button @click="moveDown">下移</el-button>
      <el-button @click="batchDelete">批量删除</el-button>
    </div> -->
    <div class="bottom_table">
      <el-table :data="tableData" v-loading="tableFieldsLoading" :highlight-current-row="true" stripe border
        height="100%" row-key="guid" @selection-change="selectionFieldsChange" tooltip-effect="light" :style="{
          width: '100%',
          'max-height': 'calc(100% - 16px)',
          display: 'inline-block',
        }">
        <el-table-column type="selection" :width="32" align="center" />
        <!-- 排序列（不可编辑） -->
        <el-table-column type="index" label="排序" width="80" align="center" />
        <!-- 字段中文名（不可编辑）fieldChName -->
        <el-table-column prop="fieldChName" label="字段中文名" width="120" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.fieldChName ? scope.row.fieldChName : '--' }}
          </template>
        </el-table-column>
        <!-- 字段英文名（不可编辑） -->
        <el-table-column prop="fieldName" label="字段英文名" width="120" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.fieldName ? scope.row.fieldName : '--' }}
          </template>
        </el-table-column>
        <!-- 分类（不可编辑）classifyName -->
        <el-table-column prop="classifyDetailNameRoutes" label="分类" width="120" show-overflow-tooltip>
          <template #default="scope">
            {{ Array.isArray(scope.row.classifyDetailNameRoutes) ? scope.row.classifyDetailNameRoutes.join('/') : '--'
            }}
          </template>
        </el-table-column>
        <!-- 分级（不可编辑） -->
        <el-table-column prop="gradeDetailName" label="分级" width="80" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.gradeDetailName ? scope.row.gradeDetailName : '--' }}
          </template>
        </el-table-column>
        <!-- 字段类型fieldType （不可编辑） -->
        <el-table-column prop="fieldType" label="字段类型" width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{

              fieldData ? (fieldData.find((item: any) => item.value === scope.row.fieldType)?.label || '--')
                : '--'
            }}
          </template>
        </el-table-column>

        <!-- 长度列  fieldLengthCondition: '>#10',-->
        <el-table-column prop="fieldLengthCondition" label="长度" width="270" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="!scope.row.isEdit">
              {{ parseFieldLengthCondition(scope.row.fieldLengthCondition) || '--' }}
            </span>
            <div v-else>
              <div style="display: flex; align-items: center;">
                <el-select v-model="scope.row.lengthSymbol" placeholder="请选择" style="width: 70%;margin-right: 8px;"
                  clearable>
                  <el-option label="大于" value=">"></el-option>
                  <el-option label="等于" value="="></el-option>
                  <el-option label="小于" value="<"></el-option>
                  <el-option label="大于等于" value=">="></el-option>
                  <el-option label="小于等于" value="<="></el-option>
                  <!-- 介于 -->
                  <el-option label="介于" value="between"></el-option>
                </el-select>

                <!-- 当选择"介于"时，显示两个输入框 -->
                <div v-if="scope.row.lengthSymbol === 'between'" style="display: flex; gap: 5px; align-items: center;">
                  <el-input v-model="scope.row.numberRangeStart" placeholder="请输入" style="width: 45%;" type="number"
                    clearable @input="validatePositiveInteger(scope.row, 'numberRangeStart')" />
                  <span>-</span>
                  <el-input v-model="scope.row.numberRangeEnd" placeholder="请输入" style="width: 45%;" type="number"
                    clearable @input="validatePositiveInteger(scope.row, 'numberRangeEnd')" />
                </div>

                <!-- 其他符号时显示一个输入框 -->
                <div v-else>
                  <el-input v-model="scope.row.lengthValue" placeholder="请输入" style="width: 70%;" clearable
                    @input="validatePositiveInteger(scope.row, 'lengthValue')" type="number" />
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="fieldPrecision" label="精度" width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <!-- 判断是否是浮点型，并且当前行是否可编辑 -->
            <span v-if="!scope.row.isEdit || !editableFields.fieldPrecision || scope.row.fieldType !== 'decimal'">
              {{ scope.row.fieldPrecision ? scope.row.fieldPrecision : '--' }}
            </span>
            <el-input v-else v-model="scope.row.fieldPrecision" placeholder="请输入精度" clearable
              @input="inputLengthKeyUp(/\D/g, scope, 'fieldPrecision', 30, 1)" />
          </template>
        </el-table-column>

        <!-- 关联字典（可编辑）el-tree-select 形式下拉形式 -->
        <el-table-column prop="dictionaryGuid" label="关联字典" width="150" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.dictionaryGuid
              ? dictionaryList.find((item: any) => item.guid === scope.row.dictionaryGuid)?.chName : '--' }}</span>
            <el-select v-else v-model="scope.row.dictionaryGuid" placeholder="请选择" clearable>
              <el-option v-for="item in dictionaryList" :key="item?.guid" :label="item.chName" :value="item.guid" />
            </el-select>
          </template>

        </el-table-column>

        <!-- 数据是否唯一（可编辑） -->
        <el-table-column prop="isUnique" label="数据是否唯一" width="150" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="!scope.row.isEdit || !editableFields.isUnique">{{ scope.row.isUnique ? (scope.row.isUnique ===
              'Y' ? '是' : '否') : '--'
              }}</span>
            <el-select v-else v-model="scope.row.isUnique" placeholder="请选择" clearable>
              <el-option label="是" value="Y" />
              <el-option label="否" value="N" />
            </el-select>
          </template>
        </el-table-column>
        <!-- 是否必填（可编辑） -->
        <el-table-column prop="notNull" label="是否必填" width="120" align="left" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.notNull ? (scope.row.notNull === 'Y' ? '是' : '否') : '--'
              }}</span>
            <el-select v-else v-model="scope.row.notNull" placeholder="请选择" clearable>
              <el-option label="是" value="Y" />
              <el-option label="否" value="N" />
            </el-select>
          </template>
        </el-table-column>

        <!-- 字段取值范围 fieldValueRange（可编辑）-->
        <el-table-column prop="fieldValueRange" label="字段取值范围" width="260" align="left" show-overflow-tooltip>
          <template #default="scope">
            <!-- 非编辑模式，展示取值范围 -->
            <span v-if="!scope.row.isEdit">
              {{ scope.row.fieldValueRange
                ? scope.row.fieldValueRange.replace('#', '-') : '--' }}
            </span>
            <!-- 编辑模式，显示不同的输入框 -->
            <div v-else style="display: flex; gap: 5px; align-items: center;">
              <!-- 判断字段类型并渲染对应的输入框 -->
              <template v-if="isSingleInput(scope.row.fieldType)">
                <!-- 单文本框：字符型、大字段型、单字符型、JSON类型、布尔类型 -->
                <el-input v-model="scope.row.fieldValueRange" placeholder="请输入" clearable maxlength="500" />
              </template>
              <template v-else>
                <!-- 双文本框：整型、日期型、日期时间型、时间戳、浮点型、一字节整型、时间类型 -->
                <el-input v-model="scope.row.startValue" placeholder="请输入开始值" style="width: 45%;" clearable
                  maxlength="200" />
                <span>-</span>
                <el-input v-model="scope.row.endValue" placeholder="请输入结束值" style="width: 45%;" clearable
                  maxlength="200" />
              </template>
            </div>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="120" align="center" fixed="right" show-overflow-tooltip>
          <template #default="scope">
            <span class="text_btn" v-if="!scope.row.isEdit" @click="editRow(scope.row)">编辑</span>
            <span v-else>
              <span class="text_btn" @click="saveRow(scope.row)">保存</span>
              <el-divider direction="vertical" />
              <span class="text_btn" @click="cancelEdit(scope.row)">取消</span>
            </span>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="botton_btn">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveData" :loading="loading">保存</el-button>
    </div>
  </div>


</template>

<style lang="scss" scoped>
.configure-rules {
  padding: 16px;
  height: 100%;

  .table_panel_wrap {
    width: 100%;
    height: auto;
    overflow: visible;
  }


  .btn-area {
    margin-top: 12px;
  }

  :deep(.bottom_table) {
    margin-top: 12px;
    height: calc(100% - 115px);
    overflow-y: auto;

    .el-table td.el-table__cell {
      padding: 2px 0;
      height: 36px;
    }
  }

  .botton_btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>