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

<script lang="ts" setup name="configureRules">
import { ref } from "vue";
import useUserStore from "@/store/modules/user";
import { getBizRuleConfigDetail, 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
    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);
  }
}

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


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

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

// 编辑行
const editRow = (row) => {
  if (row.fieldLengthCondition) {
    const arr = row.fieldLengthCondition.split('#')
    row.lengthSymbol = arr[0]
    row.lengthValue = arr[1]
  }
  if (row.fieldValueRange) {
    const arr = row.fieldValueRange.split('#')
    row.rangeStart = arr[0]
    row.rangeEnd = arr[1]
  }
  row.isEdit = true; // 进入编辑模式

};

// 保存数据
const saveRow = (row) => {
  if (row.lengthSymbol && row.lengthValue) {
    row.fieldLengthCondition = row.lengthSymbol + '#' + row.lengthValue
  }
  if (row.rangeStart && row.rangeEnd) {
    row.fieldValueRange = row.rangeStart + '#' + row.rangeEnd
  }
  row.isEdit = false
}

// 删除行
const deleteRow = (index) => {
  tableData.value.splice(index, 1)
}
// 批量删除功能
const batchDelete = () => {
  selectedRows.value.forEach((row: any) => {
    const index = tableData.value.findIndex((item) => item.id === row.id);
    if (index !== -1) tableData.value.splice(index, 1);
  });
  selectedRows.value = [];
};
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
  /**入参
   * "guid": "string",
    "fieldGuid": "string",
    "fieldLengthCondition": "string",
    "fieldPrecision": 0,
    "dictionaryGuid": "string",
    "isUnique": "string",
    "isNotNull": "string",
    "fieldValueRange": "string"
   */
  const inParams = [] as any
  tableData.value.forEach((item: any) => {
    const obj = {
      fieldGuid: item.fieldGuid,
      execGuid: router.currentRoute.value.query.execGuid,
      fieldLengthCondition: item.fieldLengthCondition,
      fieldPrecision: item.fieldPrecision,
      dictionaryGuid: item.dictionaryGuid,
      isUnique: item.isUnique,
      isNotNull: item.isRequired,
      fieldValueRange: item.fieldValueRange
    }
    inParams.push(obj)
  })

  console.log('finalParams', 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("已取消");
  });
}

</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="classifyName" label="分类" width="80" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.classifyName ? scope.row.classifyName : '--' }}
          </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="240" align="center">
          <template #default="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.fieldLengthCondition
              ? scope.row.fieldLengthCondition.replace('#', '') : '--' }}</span>
            <div v-else>
              <el-select v-model="scope.row.lengthSymbol" placeholder="请选择" style="width: 50%;margin-right: 8px;">
                <el-option label="大于" value=">"></el-option>
                <el-option label="等于" value="="></el-option>
                <el-option label="小于" value="<"></el-option>
              </el-select>
              <el-input v-model="scope.row.lengthValue" placeholder="请输入" style="width: 45%;" />
            </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.fieldPrecision ? scope.row.fieldPrecision : '--' }}</span>
            <el-input v-else v-model="scope.row.fieldPrecision" placeholder="请输入精度" />
          </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 || !editableFields.dictionaryGuid">{{ scope.row.isDict ? scope.row.isDict :
              '--' }}</span>
            <el-tree-select v-else v-model="scope.row.isDict" :data="data" placeholder="请选择" />
          </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 : '--'
              }}</span>
            <el-select v-else v-model="scope.row.isUnique" placeholder="请选择">
              <el-option label="是" value="Y" />
              <el-option label="否" value="N" />
            </el-select>
          </template>
        </el-table-column>
        <!-- 是否必填（可编辑） -->
        <el-table-column prop="isRequired" label="是否必填" width="120" align="center">
          <template #default="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.isRequired ? scope.row.isRequired : '--' }}</span>
            <el-select v-else v-model="scope.row.isRequired" placeholder="请选择">
              <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;">
              <el-input v-model="scope.row.rangeStart" placeholder="最小值" style="width: 45%;" type="number" />
              <span>-</span>
              <el-input v-model="scope.row.rangeEnd" placeholder="最大值" style="width: 45%;" type="number" />
            </div>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="scope">
            <span class="text_btn" v-if="!scope.row.isEdit" @click="editRow(scope.row)">编辑</span>
            <span class="text_btn" v-else @click="saveRow(scope.row)">保存</span>
            <el-divider direction="vertical" />
            <span class="text_btn" @click="deleteRow(scope.$index)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="botton_btn">
      <el-button type="primary" @click="saveData" :loading="loading">保存</el-button>
      <el-button @click="cancel">取消</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% - 150px);
    overflow-y: auto;

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