<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'
import { el, ro } from "element-plus/es/locale";
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
    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 });
  }
  if (row.fieldLengthCondition) {
    const arr = row.fieldLengthCondition.split('#')
    // 遍历找到arr中是否存在等于between
    arr.forEach((item) => {
      if (item === 'between') {
        row.lengthSymbol = 'between'
        row.numberRangeStart = arr[1]
        row.numberRangeEnd = arr[2]
      } else {
        row.lengthSymbol = arr[0]
        row.lengthValue = arr[1]
      }
    })
  }
  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) => {
  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
    }
    row.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 = ''
  }
  if (row.lengthSymbol && row.lengthValue) {
    row.fieldLengthCondition = row.lengthSymbol + '#' + row.lengthValue
  }
  // 字段范围 双文本情况

  if (!isSingleInput(row.fieldType)) {
    row.fieldValueRange = (row.startValue ? row.startValue : '') + '#' + (row.endValue ? row.endValue : '')
  }
  row.isEdit = false
}
const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const loading = ref(false)
const saveData = async () => {
  loading.value = true
  let inParams = [] as any
  tableData.value.forEach((item: any) => {
    if (item.startValue || item.endValue) {
      inParams.push(
        {
          fieldGuid: item.fieldGuid,
          execGuid: router.currentRoute.value.query.execGuid,
          fieldLengthCondition: item.fieldLengthCondition,
          fieldPrecision: item.fieldPrecision,
          dictionaryGuid: item.dictionaryGuid,
          isUnique: item.isUnique,
          notNull: item.notNull,
          startValue: item.startValue,
          endValue: item.endValue
        }
      )
    } else {
      inParams.push(
        {
          fieldGuid: item.fieldGuid,
          execGuid: router.currentRoute.value.query.execGuid,
          fieldLengthCondition: item.fieldLengthCondition,
          fieldPrecision: item.fieldPrecision,
          dictionaryGuid: item.dictionaryGuid,
          isUnique: item.isUnique,
          notNull: item.notNull,
          fieldValueRange: item.fieldValueRange
        }
      )
    }
  })
  // 克隆一份 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;

    // 如果有有效的字段，则不清空 inParams
    if (!isEmpty) {
      allFieldsEmpty = false;
      break;
    }
  }
  // 如果所有项的字段都为空，则清空 inParams
  if (allFieldsEmpty) {
    inParams = [];
  }

  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)
  }
}


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 中 fieldGuid 与当前行的 fieldGuid 相同的数据
  const tempRow = tempRowData.value.find((item) => item.fieldGuid === row.fieldGuid);
  Object.assign(row, tempRow);

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

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

// 验证是否为大于0的整数
const validatePositiveInteger = (row: any, field: string) => {
  const value = row[field];

  // 将输入值转为整数并检查是否大于0
  if (value && !/^\d+$/.test(value)) {
    // 如果不是整数或是负数，将值清空或者给出提示
    row[field] = '';
  } else if (value && parseInt(value) <= 0) {
    // 如果小于或等于0，也清空值
    row[field] = '';
  }
};

</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" />
        <el-table-column prop="tableName" label="表名称" width="180" />
        <el-table-column prop="tableChName" label="数据库表" width="280" />
        <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">
          <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="340" align="center">
          <template #default="scope">
            <span v-if="!scope.row.isEdit">
              {{ scope.row.fieldLengthCondition ? scope.row.fieldLengthCondition : '--' }}
            </span>
            <div v-else>
              <div style="display: flex; align-items: center;">
                <el-select v-model="scope.row.lengthSymbol" placeholder="请选择" style="width: 50%;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, 'rangeStart')" />
                  <span>-</span>
                  <el-input v-model="scope.row.numberRangeEnd" placeholder="请输入" style="width: 45%;" type="number"
                    clearable @input="validatePositiveInteger(scope.row, 'rangeEnd')" />
                </div>

                <!-- 其他符号时显示一个输入框 -->
                <div v-else>
                  <el-input v-model="scope.row.lengthValue" placeholder="请输入" style="width: 90%;" 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">
          <template #default="scope">
            <!-- 判断是否是浮点型，并且当前行是否可编辑 -->
            <span v-if="!scope.row.isEdit || !editableFields.fieldPrecision || scope.row.fieldType !== 'float'">
              {{ scope.row.fieldPrecision ? scope.row.fieldPrecision : '--' }}
            </span>
            <el-input v-else v-model="scope.row.fieldPrecision" placeholder="请输入精度" clearable />
          </template>
        </el-table-column>

        <!-- 关联字典（可编辑）el-tree-select 形式下拉形式 -->
        <el-table-column prop="dictionaryGuid" label="关联字典" width="150" align="center">
          <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="center">
          <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="center">
          <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="center">
          <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 />
              </template>
              <template v-else>
                <!-- 双文本框：整型、日期型、日期时间型、时间戳、浮点型、一字节整型、时间类型 -->
                <el-input v-model="scope.row.startValue" placeholder="请输入开始值" style="width: 45%;" clearable />
                <span>-</span>
                <el-input v-model="scope.row.endValue" placeholder="请输入结束值" style="width: 45%;" clearable />
              </template>
            </div>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <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>