<route lang="yaml">
name: tableCreateExisting
</route>

<script lang="ts" setup name="tableCreateExisting">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import StepBar from "@/components/StepBar/index.vue";
import {
  getDbDirDataSourceList,
  getDsData,
  saveDbDirTable,
  updateDbDirTable,
  createTableSql,
  getDsTableStructures,
  getDbDirFieldClassifyAndGrade,
  getDbDirTableSelectList,
  getTaskExeTreeList,
  getGradeList,
  getNewDataTypeList,
} from "@/api/modules/dataInventory";
import existingTableSelect from "./existingTableSelect.vue";
import { ro } from "element-plus/es/locale";

/** 草稿中未建表时就可以编辑表相关信息。如果建表之后就只能编辑字段。 不能修改字段英文名称，数据库修改英文名就相当于删除再添加。都可以直接跳转到*/

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const isDimTable = route.query.isDim;
const execGuid: any = ref(route.query.execGuid);

// 获取数据库列表
const databaseList: any = ref([]);
const getDbDirDataSourceListData = async () => {
  const params = {
    execGuid: execGuid.value,
  };
  const res: any = await getDbDirDataSourceList(params);
  if (res.code === proxy.$passCode) {
    databaseList.value = processData(res.data);
  } else {
    proxy.$ElMessage.error(res.msg);
  }
};
// 数据处理函数
const processData = (data) => {
  return data.map(item => ({
    ...item,
    guid: item.databaseGuid,           // 添加新键 "guid"
    databaseGuid: undefined,           // 删除旧键 "databaseGuid"
  })).map(({ databaseGuid, ...rest }) => rest); // 过滤掉 undefined 键
};
const classifyList: any = ref([]);
// 获取分类树形数据
// 定义树形选择器的属性
const treeSelectProps = {
  label: "classifyName",
  value: "classifyDetailGuid",
  children: "children",
};
const treeSelectOptions = ref<any>([]);

const getFieldTree = () => {
  getTaskExeTreeList({ execGuid: execGuid.value }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || [];
      classifyList.value = data;
      treeSelectOptions.value = data;
    } else {
      ElMessage.error(res.msg);
    }
  }).catch(() => {
    ElMessage.error('获取分类树形数据失败');
  })
}
// 分级的数据props
const gradeSelectProps = {
  value: 'guid',
  label: 'name',
}

// 字段类型props
const fieldTypeProps = {
  value: 'value',
  label: 'label',
}

// 获取字段类型
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 findRefGradeGuid = (data, targetClassifyDetailGuid) => {
  // 遍历当前数据
  for (const item of data) {
    // 判断当前节点是否匹配
    if (item.classifyDetailGuid === targetClassifyDetailGuid) {
      return item; // 找到匹配的，返回 refGradeGuid
    }

    // 如果当前节点有 children，则递归查找子节点
    if (Array.isArray(item.children) && item.children.length > 0) {
      const result = findRefGradeGuid(item.children, targetClassifyDetailGuid);
      if (result) {
        return result; // 如果子节点中找到匹配，返回结果
      }
    }
  }
  return null; // 没有找到匹配项时返回 null
};
const refGradeGuid = ref<any>('');
const editRow = (row) => {
  // 进入编辑模式时,查找classifyDetailGuid所在的refGradeGuid
  refGradeGuid.value = findRefGradeGuid(treeSelectOptions.value, row.classifyDetailGuid);
  if (refGradeGuid.value) {
    getGradeList({ classifyGradeGuid: refGradeGuid.value.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
      if (res.code === proxy.$passCode) {
        row.gradeOptions = res.data.records || [];
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
  // 这个是指定是否能编辑的字段
  editableFields.sourceFieldName = false;
  row.isEdit = true
}

const handleGradeChange = (row) => {
  console.log('分级改变', row)
  const gradeOptions = row.gradeOptions || [];
  const matchedItem = gradeOptions.find((item) => item.guid === row.gradeDetailGuid);
  if (matchedItem) {
    row.gradeDetailName = matchedItem.name;
  }
};
// 保存数据
const saveRow = (row) => {
  if (!row.fieldName) {
    ElMessage({
      type: "error",
      message: "字段英文名不能为空！",
    });
    return;
  }
  refGradeGuid.value = '';
  editableFields.sourceFieldName = true;
  row.isEdit = false
}


onMounted(async () => {
  await getDbDirDataSourceListData();
  await getFieldTypeData();
});

const stepsInfo = ref({
  step: 0,
  list: [
    { title: "选择数据库表", value: 1 },
    { title: "设置属性字段", value: 2 },
  ],
});



const datasourceSelectedRows: Ref<any> = ref([]);
// 记录数据库databaseGuid
const handlDsSelectedChange = (v, guid) => {
  datasourceSelectedRows.value = v || [];
  const params: any = [];
  v.forEach((item) => {
    params.push({
      tableGuid: item.tableGuid,
      execGuid: execGuid.value,
    });
  });

  getNextTableInfo(params);
};


const fullscreenLoading = ref(false);
/** 下一步 */
const nextStep = async () => {
  if (!datasourceSelectedRows.value.length) {
    ElMessage({
      type: "error",
      message: "已选库表不能为空！",
    });
    return;
  }
  getFieldTree();
  stepsInfo.value.step = 1;
};

//下一步获取表字段信息getNextTableInfo。getDsData 入参selectedDatabaseTable.value
const getNextTableInfo = async (params) => {
  const res: any = await getDsTableStructures(params);
  if (res.code === proxy.$passCode) {
    tableDataDetailInfo.value = res.data;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
};



const handleClassifyChange = (row, value) => {
  console.log('分类改变', row, value)
  if (!row.classifyDetailGuid) {
    row.gradeGuid = null;
    row.gradeOptions = [];
    return;
  }

  refGradeGuid.value = findRefGradeGuid(treeSelectOptions.value, row.classifyDetailGuid);
  console.log('refGradeGuid', refGradeGuid.value)
  row.classifyDetailName = refGradeGuid.value.classifyName;
  getGradeList({ classifyGradeGuid: refGradeGuid.value.refGradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
    if (res.code === proxy.$passCode) {
      row.gradeOptions = res.data.records || [];
    } else {
      ElMessage.error(res.msg);
    }
  });

};

const isPrevious = ref(false);
/** 上一步 */
const previousStep = () => {
  stepsInfo.value.step = 0;
  isPrevious.value = true;
};

const tableDataInfo = ref([
  {
    tableName: '',
    tableChName: '',
    description: '',
  },
])
// 表格数据
const tableDataDetailInfo = ref<any>([])
// 配置哪些字段可编辑
const editableFields = {
  fieldName: true, // 字段中文名可编辑
  fieldLength: true, // 长度可编辑
  isUnique: true, // 数据是否唯一可编辑
  isPrimary: true, // 是否主键可编辑
  fieldPrecision: true, // 精度可编辑
  dictionaryGuid: true, // 关联字典可编辑
  classifyName: true, // 分类可编辑
  gradeDetailName: true, // 分级可编辑
  sourceFieldName: true, // 源字段英文名可编辑
  classifyDetailGuid: true, // 分类可编辑
  fieldType: true, // 字段类型可编辑
  fieldChName: 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 = tableDataDetailInfo.value.findIndex((item) => item.guid === row.guid);
    if (index > 0) {
      [tableDataDetailInfo.value[index - 1], tableDataDetailInfo.value[index]] = [
        tableDataDetailInfo.value[index],
        tableDataDetailInfo.value[index - 1],
      ];
    }
  });
};

// 下移操作
const moveDown = () => {
  if (selectedRows.value.length === 0) {
    proxy.$message.warning("请选择数据!");
    return;
  }
  // 倒序遍历选中行
  [...selectedRows.value].reverse().forEach((row: any) => {
    const index = tableDataDetailInfo.value.findIndex((item) => item.guid === row.guid);
    if (index < tableDataDetailInfo.value.length - 1) {
      [tableDataDetailInfo.value[index], tableDataDetailInfo.value[index + 1]] = [
        tableDataDetailInfo.value[index + 1],
        tableDataDetailInfo.value[index],
      ];
    }
  });
};



// 删除行
const deleteRow = (index) => {
  // confirm 弹窗
  proxy.$confirm('是否删除该行数据？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    tableDataDetailInfo.value.splice(index, 1)
  }).catch(() => {
    proxy.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
}
// 批量删除功能
const batchDelete = () => {
  selectedRows.value.forEach((row: any) => {
    const index = tableDataDetailInfo.value.findIndex((item) => item.id === row.id);
    if (index !== -1) tableDataDetailInfo.value.splice(index, 1);
  });
  selectedRows.value = [];
};

// 新增一行
const addRow = () => {
  refGradeGuid.value = '';
  tableDataDetailInfo.value.push({
    id: tableDataDetailInfo.value.length + 1,
    fieldName: '',
    fieldEnglish: '',
    fieldType: '',
    length: '',
    fieldPrecision: '',
    isUnique: '',
    isRequired: '',
    fieldValueRange: '',
    dictionaryGuid: '',
    isEdit: true,
    gradeOptions: [],
    classifyDetailName: '',
    gradeDetailName: '',
  })
}

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 submitAsDraft = () => {
  // 保存为草稿，无论有没有guid 都传入guid
  saveOrUpdate({ isDraft: 'Y' }, 0)

}

/**
 * 需求写一个校验函数，校验表格数据是否填写完整
 * 1、表名称、数据库表、为空
 * 2、tableDataDetailInfo.value 每一项中的字段名称、字段英文名、字段类型、长度、精度、是否唯一、是否必填、字段取值范围、关联字典、不能为空
 */

// const checkTableData = (tableDataInfo, tableDataDetailInfo) => {

//   const tableDataInfoKeys = ['tableName', 'tableChName']
//   const tableDataDetailInfoKeys = ['fieldName', 'fieldEnglish', 'fieldType', 'length', 'fieldPrecision', 'isUnique', 'isRequired', 'fieldValueRange', 'dictionaryGuid']
//   let flag = true
//   tableDataInfo.forEach(item => {
//     tableDataInfoKeys.forEach(key => {
//       if (!item[key]) {
//         flag = false
//         proxy.$ElMessage.error('表名称、数据库表不能为空')
//       }
//     })
//   })
//   tableDataDetailInfo.forEach(item => {
//     tableDataDetailInfoKeys.forEach(key => {
//       if (!item[key]) {
//         flag = false
//         proxy.$ElMessage.error('字段名称、字段英文名、字段类型、长度、精度、是否唯一、是否必填、字段取值范围、关联字典不能为空')
//       }
//     })
//   })
//   return flag
// }

const guid = ref('')
const submit = async () => {
  console.log('提交', tableDataDetailInfo.value, tableDataInfo.value)
  const params = {
    tableName: tableDataInfo.value[0].tableName,
    tableChName: tableDataInfo.value[0].tableChName,
    foundMode: route.query.foundMode,
  }
  // 校验表格数据是否填写完整
  // if (!checkTableData(tableDataDetailInfo.value, tableDataInfo.value)) {
  //   return
  // }
  /**
   "guid": "string",
  "cgDirName": "string",
  "dirGuid": "string",
  "tableGuid": "string",
  "tableName": "string",
  "tableChName": "string",
  "databaseGuid": "string",
  "database": "string",
  "dbType": "string",
  "databaseChName": "string",
  "foundMode": 0,
  "state": 0,
  "isDraft": "string",
  "fieldRQVOList": [
    {
      "guid": "string",
      "cgDirName": "string",
      "dirGuid": "string",
      "classifyName": "string",
      "gradeDetailName": "string",
      "tableGuid": "string",
      "tableName": "string",
      "tableChName": "string",
      "databaseGuid": "string",
      "database": "string",
      "databaseChName": "string",
      "fieldGuid": "string",
      "fieldName": "string",
      "fieldChName": "string",
      "fieldType": "string",
      "fieldLength": 0,
      "fieldPrecision": 0,
      "dimGuid": "string",
      "dictionaryGuid": "string",
      "sortValue": 0,
      "isPrimary": "string",
      "isFk": "string",
      "isNotNull": "string",
      "defaultValue": "string"
    }
  ], 这是入参
   */
  // 如果提交时没有 guid 则为新增type 0,否则为修改 type 1, 也要传参
  if (!guid.value) {
    saveOrUpdate({
      tableName: tableDataInfo.value[0].tableName,
      tableChName: tableDataInfo.value[0].tableChName,
      databaseGuid: route.query.databaseGuid || '',
      database: route.query.database || '',
      databaseChName: route.query.databaseChName || '',
      foundMode: route.query.foundMode,
      isDraft: 'N',
    }, 0)
  } else {
    saveOrUpdate({}, 1)
  }

}

// 单独将保存和修改函数提取出来 type 0 保存 1 修改 2 生成建表语句
const saveOrUpdate = async (params: any = {}, type) => {
  const InParams = {
    guid: '',
    cgDirName: '',
    dirGuid: '',
    tableGuid: '',
    tableName: '',
    tableChName: '',
    databaseGuid: '',
    database: '',
    databaseChName: '',
    foundMode: 0,
    isDraft: '',
    fieldRQVOList: tableDataDetailInfo.value
  }
  const finalParams = { ...InParams, ...params }
  // 使用switch case 语句
  switch (type) {
    case 0:
      // 保存/保存为草稿
      const res: any = await saveDbDirTable(finalParams);
      if (res.code === proxy.$passCode) {
        if (params.isDraft === 'Y') {
          proxy.$ElMessage.success('保存为草稿成功!');
        }
        proxy.$ElMessage.success('保存成功!');
        router.push({ name: 'classifyGradeCatalogue' });
      } else {
        proxy.$ElMessage.error(res.msg);
      }
      break;
    case 1:
      // 修改
      const res1: any = await updateDbDirTable(finalParams);
      if (res1.code === proxy.$passCode) {
        proxy.$ElMessage.success('修改成功!');
        router.push({ name: 'classifyGradeCatalogue' });
      } else {
        proxy.$ElMessage.error(res1.msg);
      }
      break;
    case 2:
      // 生成建表语句
      const res2: any = await createTableSql(finalParams);
      if (res2.code === proxy.$passCode) {
        proxy.$ElMessage.success('建表生成成功!');
      } else {
        proxy.$ElMessage.error(res2.msg);
      }
      break;
    default:
      break;
  }
}

// 生成建表弹窗区域

const options = [
  { value: 'mysql', label: 'mysql' },
  { value: 'doris', label: 'doris' },

];

const newCreateSqlFormItems = ref([{
  label: '选择数据库',
  type: 'select',
  maxlength: 50,
  placeholder: '请输入',
  field: 'name',
  default: 'mysql',
  options: options,
  block: true,
  clearable: true,
  required: true
}]);

const newCreateSqlFormRules = ref({
  name: [
    { required: true, message: '请选择数据库名称', trigger: 'blur' },
  ]
});

const newCreateSqlDialogInfo = ref({
  visible: false,
  size: 460,
  title: "生成建表语句",
  type: "",
  formInfo: {
    id: "grade-form",
    items: newCreateSqlFormItems.value,
    rules: newCreateSqlFormRules.value,
  },
  submitBtnLoading: false,
  btns: {
    cancel: () => {
      newCreateSqlDialogInfo.value.visible = false;
    },

    submit: async (btn, info) => {
      newCreateSqlDialogInfo.value.submitBtnLoading = true;
      const params = {
        ...info,
        tableName: tableDataInfo.value[0].tableName,
        tableChName: tableDataInfo.value[0].tableChName,
        foundMode: route.query.foundMode,
        isDraft: 'N',
      };
      await saveOrUpdate(params, 2);
      newCreateSqlDialogInfo.value.submitBtnLoading = false;
      newCreateSqlDialogInfo.value.visible = false;
    }
  }
})

// 生成建表语句
const createNewSql = () => {
  newCreateSqlDialogInfo.value.visible = true;
}

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="container_wrap full" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="content_main">
      <div class="top_tool_wrap">
        <StepBar :steps-info="stepsInfo" />
      </div>
      <existingTableSelect v-show="stepsInfo.step === 0" :databaseList="databaseList" :table-create-type="2"
        :execGuid="execGuid" @datasource-selected-change="handlDsSelectedChange"></existingTableSelect>
      <div class="second-step-content" v-show="stepsInfo.step === 1">
        <div class="table_panel_wrap">
          <el-table :data="tableDataInfo" :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="tableName" label="表名称" width="180">
              <template #header>
                <span>表名称</span>
                <span style="color:red;margin-left: 2px;">*</span>
              </template>
              <template #default="scope">
                <el-input v-model="scope.row.tableName" placeholder="请输入表名称" />
              </template>
            </el-table-column>

            <!-- 数据库表列 -->
            <el-table-column prop="tableChName" label="数据库表" width="280">
              <template #header>
                <span>数据库表</span>
                <span style="color:red;margin-left: 2px;">*</span>
              </template>
              <template #default="scope">
                <el-input v-model="scope.row.tableChName" placeholder="请输入数据库表" />
              </template>
            </el-table-column>

            <!-- 描述列 -->
            <el-table-column prop="description" label="描述" width="180">
              <template #default="scope">
                <el-input v-model="scope.row.description" placeholder="请输入描述" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="btn-area">
          <el-button type="primary" @click="addRow">新增</el-button>
          <el-button @click="moveUp">上移</el-button>
          <el-button @click="moveDown">下移</el-button>
          <el-button @click="batchDelete">批量删除</el-button>
          <el-button @click="createNewSql">生成建表语句</el-button>
        </div>
        <div class="bottom_table">
          <el-table :data="tableDataDetailInfo" 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="150">
              <!-- 可以编辑 -->
              <template #default="scope">
                <span v-if="!scope.row.isEdit || !editableFields.fieldChName">{{ scope.row.fieldChName ?
                  scope.row.fieldChName
                  : '--' }}</span>
                <el-input v-else v-model="scope.row.fieldChName" placeholder="请输入" />
              </template>

            </el-table-column>
            <!-- 字段英文名（可编辑） -->
            <el-table-column prop="fieldName" label="目标字段英文名" width="150">
              <template #default="scope">
                <span v-if="!scope.row.isEdit || !editableFields.fieldName">{{ scope.row.fieldName ?
                  scope.row.fieldName
                  : '--' }}</span>
                <el-input v-else v-model="scope.row.fieldName" placeholder="必填"
                  @input="inputLengthKeyUp(/[^a-zA-Z0-9_]/g, scope, 'fieldName')" />
              </template>
            </el-table-column>
            <!-- 源数据库 -->
            <el-table-column prop="sourceDatabase" label="源数据库" width="150">
              <template #default="scope">
                {{ scope.row.sourceDatabase ? scope.row.sourceDatabase : '--' }}
              </template>
            </el-table-column>
            <!-- 源数据表 -->
            <el-table-column prop="sourceTableName" label="源数据表" width="150">
              <template #default="scope">
                {{ scope.row.sourceTableName ? scope.row.sourceTableName : '--' }}
              </template>
            </el-table-column>
            <!-- 源字段中文 -->
            <el-table-column prop="sourceFieldChName" label="源字段中文" width="150">
              <template #default="scope">
                {{ scope.row.sourceFieldChName ? scope.row.sourceFieldChName : '--' }}
              </template>
            </el-table-column>
            <!-- 源字段英文 -->
            <el-table-column prop="sourceFieldName" label="源字段英文" width="150">
              <template #default="scope">
                <!-- {{ scope.row.sourceFieldName ? scope.row.sourceFieldName : '--' }} -->

                <span v-if="!scope.row.isEdit || !editableFields.sourceFieldName">{{ scope.row.sourceFieldName ?
                  scope.row.sourceFieldName : '--' }}</span>
                <el-input v-else v-model="scope.row.sourceFieldName" placeholder="请输入长度" />
              </template>
            </el-table-column>
            <!-- 源端字段 fieldType  fieldTypeProps-->
            <el-table-column prop="fieldType" label="源端字段类型" width="150">
              <template #default="scope">
                <div v-if="scope.row.isEdit">
                  <el-select v-model="scope.row.fieldType" placeholder="选择类型" clearable filterable
                    :props="fieldTypeProps">
                    <el-option v-for="(item, index) in fieldData" :key="index" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </div>
                <div v-else>
                  {{ fieldData.find(item => item.value === scope.row.fieldType)?.label || '--' }}
                </div>
              </template>
            </el-table-column>

            <!-- 长度（可编辑） -->
            <el-table-column prop="fieldLength" label="长度" width="120" align="center">
              <template #default="scope">
                <!-- 非编辑状态 -->
                <span v-if="!scope.row.isEdit">
                  {{ ['varchar', 'decimal', 'char'].includes(scope.row.fieldType) ? scope.row.fieldLength || '--' : '--'
                  }}
                </span>
                <!-- 编辑状态 -->
                <div v-else>
                  <el-input v-if="['varchar', 'decimal', 'char'].includes(scope.row.fieldType)"
                    v-model="scope.row.fieldLength" placeholder="请输入长度"
                    @input="inputLengthKeyUp(/\D/g, scope, 'fieldLength', 2000, 1)" />
                  <span v-else>--</span>
                </div>
              </template>
            </el-table-column>

            <!-- 精度（可编辑） -->
            <el-table-column prop="fieldPrecision" label="精度" width="120" align="center">
              <template #default="scope">
                <!-- 非编辑状态 -->
                <span v-if="!scope.row.isEdit">
                  {{ scope.row.fieldType === 'decimal' ? scope.row.fieldPrecision || '--' : '--' }}
                </span>
                <!-- 编辑状态 -->
                <div v-else>
                  <el-input v-if="scope.row.fieldType === 'decimal'" v-model="scope.row.fieldPrecision"
                    placeholder="请输入精度" @input="inputLengthKeyUp(/\D/g, scope, 'fieldPrecision', 30, 1)" />
                  <span v-else>--</span>
                </div>
              </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="isPrimary" label="是否主键" width="150" align="center">
              <template #default="scope">
                <span v-if="!scope.row.isEdit || !editableFields.isPrimary">{{ scope.row.isPrimary ? scope.row.isPrimary
                  :
                  '--' }}</span>
                <el-select v-else v-model="scope.row.isPrimary" placeholder="请选择">
                  <el-option label="Y" value="Y" />
                  <el-option label="N" value="N" />
                </el-select>
              </template>
            </el-table-column>
            <!-- 是否必填（可编辑） -->
            <el-table-column prop="isNotNull" label="是否必填" width="120" align="center">
              <template #default="scope">
                <span v-if="!scope.row.isEdit">{{ scope.row.isNotNull ? scope.row.isNotNull : '--' }}</span>
                <el-select v-else v-model="scope.row.isNotNull" placeholder="请选择">
                  <el-option label="Y" value="Y" />
                  <el-option label="N" value="N" />
                </el-select>
              </template>
            </el-table-column>

            <!-- 分类（不可编辑）classifyName -->

            <el-table-column prop="classifyDetailGuid" label="分类" width="150">
              <template #default="scope">
                <!-- 如果当前行是编辑状态，显示 tree-select -->
                <div v-if="scope.row.isEdit">
                  <el-tree-select v-model="scope.row.classifyDetailGuid" :data="treeSelectOptions"
                    :props="treeSelectProps" placeholder="请选择分类" clearable filterable
                    @change="(value) => handleClassifyChange(scope.row, value)">
                  </el-tree-select>
                </div>
                <!-- 否则直接显示分类名称 -->
                <div v-else>
                  {{ scope.row.classifyDetailName || '--' }}
                </div>
              </template>
            </el-table-column>
            <!-- 分级（不可编辑） -->
            <el-table-column prop="gradeDetailGuid" label="分级" width="120" align="center">
              <template #default="scope">
                <div v-if="scope.row.isEdit">
                  <el-select v-model="scope.row.gradeDetailGuid" placeholder="请选择分级" clearable filterable
                    :props="gradeSelectProps" @change="handleGradeChange(scope.row)">
                    <el-option v-for="(item, index) in scope.row.gradeOptions || []" :key="index" :label="item.name"
                      :value="item.guid"></el-option>
                  </el-select>
                </div>
                <div v-else>
                  {{ scope.row.gradeDetailName || '--' }}
                </div>
              </template>
            </el-table-column>
            <!-- 操作列 -->
            <el-table-column label="操作" width="100" align="center" fixed="right">
              <template #default="scope">

                <!-- <el-button v-if="!scope.row.isEdit" type="primary" size="small" @click="editRow(scope.row)">
              编辑
            </el-button> -->
                <!--  <el-button v-else type="success" size="small" @click="saveRow(scope.row)">
              保存
            </el-button>

            <el-button type="danger" size="small" @click="deleteRow(scope.$index)">
              删除
            </el-button> -->
                <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>
    </div>
    <div class="bottom_tool_wrap">
      <template v-if="stepsInfo.step == 0">
        <el-button type="primary" @click="nextStep">下一步</el-button>
      </template>
      <template v-else>
        <el-button @click="previousStep">上一步</el-button>
        <el-button type="primary" @click="submitAsDraft">保存为草稿</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </template>
    </div>
    <Dialog_form :dialogConfigInfo="newCreateSqlDialogInfo" />
  </div>
</template>

<style lang="scss" scoped>
.top_tool_wrap {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #d9d9d9;

  :deep(.el-steps) {
    width: 30%;
  }
}

.content_main {
  height: calc(100% - 40px);

  .second-step-content {
    height: calc(100% - 80px);
    width: 100%;
    padding: 16px;

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

:deep(.el-dialog) {
  .dialog-form-inline {
    .checkbox_input {
      display: flex;
      flex-direction: column;

      .input_panel {
        margin: 0;
      }
    }

    .select_group {
      .el-form-item__content>.el-input {
        margin-top: 21px;
      }
    }

    .radio_panel {
      .panel_content {
        display: none;
      }
    }
  }
}

:deep(.batchDialog) {
  .el-tree-node__content {
    padding-left: 8px !important;

    .el-icon {
      display: none;
    }
  }
}

.bottom_tool_wrap {
  height: 40px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>