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

<script lang="ts" setup name="configureRules">
import { ref } from "vue";
import router from "@/router";
import { getBizRuleConfigDetail, updateBizRuleConfig } from '@/api/modules/dataInventory'

const { proxy } = getCurrentInstance() as any;
const bizRuleConfigData = ref<any>()
const getBizRuleConfigDetailData = async () => {
  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
  } else {
    proxy.$message.error(res.msg)
  }
}

onMounted(() => {
  getBizRuleConfigDetailData()
})


const tableData1 = ref([
  {
    cgDirName: router.currentRoute.value.query.cgDirName,
    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) => {
  console.log('selection', selection)
  selectedRows.value = selection;
};

// 上移功能
const moveUp = () => {
  // 1. 找到选中行在 tableData 中的索引
  const selectedIds = selectedRows.value.map((row: any) => row.id);

  // 2. 遍历选中行，按顺序上移
  for (let i = 0; i < tableData.value.length; i++) {
    const currentRow = tableData.value[i];

    // 如果当前行被选中，且不是第一行，则交换位置
    if (selectedIds.includes(currentRow.id) && i > 0) {
      const previousRow = tableData.value[i - 1];

      // 如果上一行没有被选中，交换位置
      if (!selectedIds.includes(previousRow.id)) {
        [tableData.value[i], tableData.value[i - 1]] = [tableData.value[i - 1], tableData.value[i]];
      }
    }
  }
};

// 下移功能
const moveDown = () => {
  // 1. 找到选中行在 tableData 中的索引
  const selectedIds = selectedRows.value.map((row: any) => row.id);

  // 2. 遍历选中行，倒序下移
  for (let i = tableData.value.length - 1; i >= 0; i--) {
    const currentRow = tableData.value[i];

    // 如果当前行被选中，且不是最后一行，则交换位置
    if (selectedIds.includes(currentRow.id) && i < tableData.value.length - 1) {
      const nextRow = tableData.value[i + 1];

      // 如果下一行没有被选中，交换位置
      if (!selectedIds.includes(nextRow.id)) {
        [tableData.value[i], tableData.value[i + 1]] = [tableData.value[i + 1], tableData.value[i]];
      }
    }
  }
};

// 编辑行
const editRow = (row) => {
  if (!row.isEdit) {
    const [symbol, value] = row.fieldLengthCondition.split('#');
    row.lengthSymbol = symbol; // 初始化符号部分
    row.lengthValue = value; // 初始化数值部分
    row.isEdit = true; // 进入编辑模式
  }
};

// 保存数据
const saveRow = (row) => {
  row.fieldLengthCondition = `${row.lengthSymbol}#${row.lengthValue}`;
  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 saveData = async () => {

  /**入参
   * "guid": "string",
    "fieldGuid": "string",
    "fieldLengthCondition": "string",
    "fieldPrecision": 0,
    "dictionaryGuid": "string",
    "isUnique": "string",
    "isNotNull": "string",
    "fieldValueRange": "string"
   */
  const params = tableData.value.map((item: any) => {
    return {
      guid: item.guid,
      fieldGuid: item.fieldGuid,
      fieldLengthCondition: item.fieldLengthCondition,
      fieldPrecision: item.fieldPrecision,
      dictionaryGuid: item.dictionaryGuid,
      isUnique: item.isUnique,
      isNotNull: item.isNotNull,
      fieldValueRange: item.fieldValueRange
    }
  })
  const res: any = await updateBizRuleConfig(params)
  if (res.code === proxy.$passCode) {
    proxy.$message.success('修改配置规则成功!')
    router.back()
  } else {
    proxy.$message.error(res.msg)
  }
}

const cancel = () => {
  router.back()
}

</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="cgDirName" 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="fieldName" label="字段中文名" width="120">
          <template #default="scope">
            {{ scope.row.fieldName ? scope.row.fieldName : '--' }}
          </template>
        </el-table-column>
        <!-- 字段英文名（不可编辑） -->
        <el-table-column prop="fieldEnglish" label="字段英文名" width="120">
          <template #default="scope">
            {{ scope.row.fieldEnglish ? scope.row.fieldEnglish : '--' }}
          </template>
        </el-table-column>
        <!-- 分类（不可编辑）classifyName -->
        <el-table-column prop="fieldEnglish" label="分类" width="120">
          <template #default="scope">
            {{ scope.row.fieldEnglish ? scope.row.fieldEnglish : '--' }}
          </template>
        </el-table-column>
        <!-- 分级（不可编辑） -->
        <el-table-column prop="gradeDetailName" label="分级" width="120" align="center">
          <template #default="scope">
            {{ scope.row.gradeDetailName ? scope.row.gradeDetailName : '--' }}
          </template>
        </el-table-column>
        <!-- 字段类型fieldType （不可编辑） -->
        <el-table-column prop="fieldType" label="字段类型" width="150" align="center">
          <template #default="scope">
            {{ scope.row.fieldType ? scope.row.fieldType : '--' }}
          </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 || '--' }}</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="240" align="center">
          <template #default="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.fieldPrecision || '--' }}</span>
            <div v-else>
              <el-select v-model="scope.row.fieldPrecision" placeholder="请选择" style="width: 50%;margin-right: 8px;">
                <el-option label="<=500" value="<=500"></el-option>
                <el-option label=">500" value=">500"></el-option>
              </el-select>
              <el-input v-model="scope.row.precisionValue" placeholder="请输入" style="width: 45%;" />
            </div>
          </template>
        </el-table-column> -->
        <!-- 精度（可编辑）fieldPrecision -->
        <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="150" align="center">
          <template #default="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.fieldValueRange ? scope.row.fieldValueRange : '--' }}</span>
            <el-input v-else v-model="scope.row.fieldValueRange" placeholder="请输入字段取值范围" />
          </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">保存</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>