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

<script lang="ts" setup name="importTableField">
import { ref } from 'vue';
import {
  getDataTypeList,
  getParamsList
} from "@/api/modules/dataAsset";
import { pinyin } from 'pinyin-pro';
import useUserStore from "@/store/modules/user";

const emits = defineEmits([
  "cancelImport",
  "save"
]);

const userStore = useUserStore()
const userData = JSON.parse(userStore.userData)
const { proxy } = getCurrentInstance() as any;
const step = ref(0);
const fullscreenLoading = ref(false);

//是否列表
const isNotList = ref([
  {
    label: "Y",
    value: "Y",
  },
  {
    label: "N",
    value: "N",
  },
]);

//字段类型
const fieldTypes: any = ref([]);

/** 参数列表。 */
const paramsList: any = ref([]);

const tableFieldsLoading = ref(false);
//记录当前正在编辑的表创建信息。
const tableCreateInfo: Ref<any> = ref({
  guid: "",
  sheetName: '', //所选择的sheet页。
  tableData: [
    {
      tableName: "",
      tableChName: "",
      dataCount: null,
      description: "",
    },
  ],
  fileUrl: '',
  fileName: '',
  damCatalogTableField: [], // 字段标准数组。
});

/** 上传的文件字段信息。 */
const fileTableFields: any = ref([]);
/** 上传的文件数据信息 */
const fileTableData: any = ref([]);
/** 上传的文件信息。 */
const uploadDataFileInfo: any = ref([]);
const uploadFileRef: any = ref();

const handleFileDataChange = (fileFields, files, sheetName, data) => {
  if (fileTableFields.value != fileFields) {//文件字段改变，下一步时需要清空。
    fileTableFields.value = fileFields.slice(0);
    tableCreateInfo.value.damCatalogTableField = [];
  }
  fileTableData.value = data;
  uploadDataFileInfo.value = files;
  tableCreateInfo.value.sheetName = sheetName;
  tableCreateInfo.value.fileUrl = files?.[0]?.url;
  tableCreateInfo.value.fileName = files?.[0]?.name;
  console.log(files);
}

const getFieldTypeList = () => {
  getDataTypeList().then((res: any) => {
    fieldTypes.value = [];
    if (res.code == proxy.$passCode) {
      fieldTypes.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const getParamsListData = () => {
  getParamsList().then((res: any) => {
    paramsList.value = [];
    if (res.code == proxy.$passCode) {
      paramsList.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const changeStep = (val) => {
  if (val === 1) {
    uploadFileRef.value.fileFormRef.ruleFormRef.validate((valid) => {
      if (valid) {
        if (!fileTableFields.value.length) {
          proxy.$ElMessage.error('上传文件字段不能为空！');
          return;
        }
        if (!fieldTypes.value.length) {
          getFieldTypeList();
        }
        if (!paramsList.value.length) {
          getParamsListData();
        }
        if (!tableCreateInfo.value.damCatalogTableField.length) {
          tableCreateInfo.value.damCatalogTableField = fileTableFields.value.map(field => {
            let enName = pinyin(field.chName, {
              pattern: 'first',
              separator: '',
              toneType: 'none'
            });
            let index = enName.indexOf("(") || enName.indexOf("（") || enName.indexOf('[') || enName.indexOf('【') || enName.indexOf(':') || enName.indexOf('：');
            if (index > -1) {
              enName = enName.substring(0, index);
            }
            return {
              chName: field.chName,
              enName: enName,
              isPrimary: 'N',
              notNull: field.notNull || 'N',
              isEdit: true
            }
          });
        }
        step.value = val;
      }
    });
  } else {
    step.value = val;
  }
};

const fieldsTableRef: any = ref();

const dataTypeChange = (val, scope) => {
  scope.row['defaultValue'] = ''
  scope.row['fieldLength'] = undefined
  scope.row['fieldPrecision'] = undefined
}

const selectTableFieldRows = ref([]);

/** 勾选字段标准选中变化。 */
const selectionFieldsChange = (val) => {
  selectTableFieldRows.value = val;
};

/** 添加字段标准 */
const addField = () => {
  let len = tableCreateInfo.value.damCatalogTableField.length;
  tableCreateInfo.value.damCatalogTableField.push({
    orderNum: len + 1,
    isPrimary: "N",
    notNull: "N",
    isEdit: true
  });
  //设置选中表格当前新增行。
  fieldsTableRef.value?.setCurrentRow(
    tableCreateInfo.value.damCatalogTableField[tableCreateInfo.value.damCatalogTableField.length - 1]
  );
  nextTick(() => {
    let bodyWrapper = fieldsTableRef.value?.$el.querySelector('.el-table__body');
    let domScroll = bodyWrapper.parentElement.parentElement;
    let rect = domScroll.getBoundingClientRect();
    let maxNum = len + 1;
    if (maxNum * 38 > rect.height + domScroll.scrollTop) {
      fieldsTableRef.value?.setScrollTop(maxNum * 38 - rect.height + 2)
    }
  })
};

/**
 * 上移规则：
 * 勾选多个时先从最上面开始逐个上移一行，若已经移到最上面一行，则不处理。
 */
const moveUp = () => {
  let selectRows = fieldsTableRef.value?.getSelectionRows();
  if (!selectRows.length) {
    proxy.$ElMessage.error('请先选择需要勾选的数据进行上移');
    return;
  }
  let data = tableCreateInfo.value.damCatalogTableField;
  let selectRowIndexs: number[] = [];
  let minNum: number = 0;
  selectRows.forEach((row, i) => {
    let orderNum = data.findIndex(d => d === row) + 1;
    if (orderNum == 1) {
      selectRowIndexs.push(orderNum);
      minNum = orderNum;
      return;
    }
    if (selectRowIndexs.includes(orderNum - 1)) {
      //下一行也是选中的，则不做转换。
      return;
    }
    let topNum = orderNum - 1;
    if (i === 0) {
      minNum = topNum;
    }
    row.orderNum = topNum;
    let changeRow = data[topNum - 1];
    changeRow.orderNum = orderNum;
    selectRowIndexs.push(topNum);
    data[topNum] = changeRow;
    data[topNum - 1] = row;
  });
  nextTick().then(() => {
    let bodyWrapper = fieldsTableRef.value?.$el.querySelector('.el-table__body');
    let domScroll = bodyWrapper.parentElement.parentElement;
    if ((minNum * 38 - 36 - 2) < domScroll.scrollTop) {
      fieldsTableRef.value?.setScrollTop((domScroll.scrollTop - 36 - 2) < 0 ? 0 : (domScroll.scrollTop - 36 - 2))
    }
  });
}

/**
 * 下移规则：
 * 勾选多个时先从最下面开始逐个下移一行，若已经移到最下面一行，则不处理。
 */
const moveDown = () => {
  let selectRows = fieldsTableRef.value?.getSelectionRows();
  if (!selectRows.length) {
    proxy.$ElMessage.error('请先选择需要勾选的数据进行下移');
    return;
  }
  let data = tableCreateInfo.value.damCatalogTableField;
  let selectRowIndexs: number[] = [];
  let maxNum: number = 0;
  selectRows.slice(0).reverse().forEach((row, i) => {
    let orderNum = data.findIndex(d => d === row) + 1;
    if (orderNum === data.length) {
      maxNum = orderNum;
      selectRowIndexs.push(orderNum);
      return;
    }
    if (selectRowIndexs.includes(orderNum + 1)) {
      //下一行也是选中的，则不做转换。
      return;
    }
    let bottomNum = orderNum + 1;
    row.orderNum = bottomNum;
    if (i === 0) {
      maxNum = bottomNum;
    }
    let changeRow = data[bottomNum - 1];
    changeRow.orderNum = orderNum;
    selectRowIndexs.push(bottomNum);
    data[orderNum - 1] = changeRow;
    data[bottomNum - 1] = row;
  });
  nextTick(() => {
    let bodyWrapper = fieldsTableRef.value?.$el.querySelector('.el-table__body');
    let domScroll = bodyWrapper.parentElement.parentElement;
    let rect = domScroll.getBoundingClientRect();
    if (maxNum * 38 > rect.height + domScroll.scrollTop) {
      fieldsTableRef.value?.setScrollTop(maxNum * 38 - rect.height + 2)
    }
  })
}

/** 批量删除字段标准 */
const delFeilds = () => {
  if (selectTableFieldRows.value.length == 0) {
    proxy.$ElMessage({
      type: "info",
      message: "请选择需要删除的字段",
    });
    return;
  }
  if (tableCreateInfo.value.guid) {
    if (selectTableFieldRows.value.find((row: any) => row.isPrimary === 'Y')) {
      proxy.$ElMessage.error('已建表不能删除主键字段');
      return;
    }
  }
  proxy.$openMessageBox('确定要删除该字段吗？', () => {
    let tableFields = tableCreateInfo.value.damCatalogTableField;
    let tableData = tableCreateInfo.value.tableData[0];
    selectTableFieldRows.value.forEach((r) => {
      let index = tableFields.findIndex((t: any) => t === r);
      if (index !== -1) {
        let row = tableFields[index];
        tableFields.splice(index, 1);
        if (tableData.codeName == row.enName) {
          tableData.codeName = "";
        }
        if (tableData.codeColumn == row.enName) {
          tableData.codeColumn = "";
        }
      }
    });
    fieldsTableRef.value?.clearSelection();
    proxy.$ElMessage({
      type: "success",
      message: "删除成功",
    });
  }, () => {
    proxy.$ElMessage.info("已取消删除");
  })
};

//点击编辑按钮
const handleFieldClickEdit = (scope) => {
  scope.row['isEdit'] = true;
};

//点击保存按钮
const handleFieldClickSave = (scope) => {
  if (!scope.row.enName) {
    proxy.$ElMessage({
      type: "error",
      message: "字段英文名称不能为空！",
    });
    return;
  }
  scope.row['isEdit'] = false;
};

const handleFieldDelete = (scope) => {
  proxy.$openMessageBox('此操作将永久删除, 是否继续？', () => {
    let tableFields = tableCreateInfo.value.damCatalogTableField;
    tableFields.splice(scope.$index, 1);
    tableCreateInfo.value.damCatalogTableField.forEach((field, i) => {
      field.orderNum = i + 1;
    });
    let row = scope.row;
    let tableData = tableCreateInfo.value.tableData[0];
    if (tableData.codeName == row.enName) {
      tableData.codeName = "";
    }
    if (tableData.codeColumn == row.enName) {
      tableData.codeColumn = "";
    }
    proxy.$ElMessage({
      type: "success",
      message: "删除成功",
    });
  }, () => {
    proxy.$ElMessage.info("已取消删除");
  })
}

const save = () => {
  let tableData = tableCreateInfo.value.tableData[0];
  if (!tableData.tableName) {
    proxy.$ElMessage.error('表英文名称不能为空');
    return;
  }
  if (!tableData.dataCount) {
    proxy.$ElMessage.error('表数据总数不能为空');
    return;
  }
  const regex = /^[a-zA-Z]/;
  if (!regex.test(tableData.tableName)) {
    proxy.$ElMessage.error('表英文名称必须以英文字符开头');
    return;
  }
  if (!tableData.tableChName) {
    proxy.$ElMessage.error('表中文名称不能为空');
    return;
  }
  let tableFields = tableCreateInfo.value.damCatalogTableField || [];
  if (!tableFields.length) {
    proxy.$ElMessage({
      type: "error",
      message: "表字段不能为空",
    });
    return;
  }
  let hasPrimary = false;
  let enNames: any = [];
  let chNames: any = [];
  let index = 1;
  for (const field of tableFields) {
    if (!field.enName) {
      proxy.$ElMessage.error(`第 ${index} 个字段的英文名称不能为空！`);
      return;
    }
    if (enNames.indexOf(field.enName) > -1) {
      proxy.$ElMessage.error(`字段的英文名称 ${field.enName} 不能重复！`);
      return;
    }
    if (!regex.test(field.enName)) {
      proxy.$ElMessage.error(`第 ${index} 个字段的英文名称必须以英文字符开头`);
      return;
    }
    if (chNames.indexOf(field.chName) > -1) {
      proxy.$ElMessage.error(`字段的英文名称 ${field.chName} 不能重复！`);
      return;
    }
    if (!field.dataType) {
      proxy.$ElMessage.error(`第 ${index} 个字段的字段类型不能为空`);
      return;
    }
    if (field.dataType === "decimal" && (!field.fieldPrecision && field.fieldPrecision != 0)) {
      proxy.$ElMessage.error(`第 ${index} 个字段的字段类型为浮点型时，精度不能为空`);
      return;
    }
    if (field.dataType === "varchar" && (!field.fieldLength && field.fieldLength != 0)) {
      proxy.$ElMessage.error(`第 ${index} 个字段的字段类型为字符型时，长度不能为空`);
      return;
    }
    if (field.dataType === "char" && (!field.fieldLength && field.fieldLength != 0)) {
      proxy.$ElMessage.error(`第 ${index} 个字段的字段类型为单字符型时，长度不能为空`);
      return;
    }
    if (field.dataType === "decimal" && (!field.fieldLength && field.fieldLength != 0)) {
      proxy.$ElMessage.error(`第 ${index} 个字段的字段类型为浮点符型时，长度不能为空`);
      return;
    }
    if (field.isPrimary === 'Y') {
      hasPrimary = true;
      if (field.notNull == 'N') {
        proxy.$ElMessage.error(`第 ${index} 个字段为主键，应设置为必填`);
        return;
      }
      if (field.dataType == 'text') {
        proxy.$ElMessage.error(`第 ${index} 个字段为主键，字段类型不能设置为‘大字段型’`);
        return;
      }
      if (field.dataType == 'json') {
        proxy.$ElMessage.error(`第 ${index} 个字段为主键，字段类型不能设置为‘JSON类型’`);
        return;
      }
      if (field.dataType == 'bit') {
        proxy.$ElMessage.error(`第 ${index} 个字段为主键，字段类型不能设置为‘布尔类型’`);
        return;
      }
    }
    field.orderNum = index;
    enNames.push(field.enName);
    chNames.push(field.chName);
    index++;
  }
  if (!hasPrimary) {
    proxy.$ElMessage.error(`至少有一个主键字段！`);
    return;
  }
  emits('save', { ...tableCreateInfo.value, ...tableCreateInfo.value.tableData[0], staffGuid: userData.staffGuid });
}

const cancel = () => {
  proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
    emits('cancelImport');
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}

const setFormValue = (v) => {
  uploadFileRef.value.setFormValue(v);
}

const setTableInfo = (v) => {
  tableCreateInfo.value = v;
  fileTableFields.value = v?.damCatalogTableField || [];
  if (v.guid) {
    step.value = 1;
    getFieldTypeList();
    getParamsListData();
  }
  tableCreateInfo.value.tableData = [{
    tableName: v.tableName,
    tableChName: v.tableChName,
    dataCount: v.dataCount,
    description: v.description
  }]
}

/** 限制长度输入框只能输入整型数字，表，字段英文名称，限制输入字符，数字和下划线。 */
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;
  }
}

defineExpose({
  setFormValue,
  setTableInfo,
  fullscreenLoading
});
</script>

<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main">
      <uploadExcelFile ref="uploadFileRef" v-show="step === 0" @fileDataChange="handleFileDataChange" />
      <ContentWrap id="id-baseInfo" v-show="step == 1" title="设置属性字段" description="">
        <el-table ref="tableRef" :data="tableCreateInfo.tableData" :highlight-current-row="true" stripe border
          height="100%" tooltip-effect="light" row-key="guid" :style="{
            width: '100%',
            height: 'auto',
            display: 'inline-block',
          }">
          <el-table-column prop="tableName" label="表英文名称" width="200px" align="left" show-overflow-tooltip>
            <template #header>
              <span>表英文名称</span>
              <span style="color:red;margin-left: 2px;">*</span>
            </template>
            <template #default="scope">
              <el-input v-model.trim="scope.row['tableName']" :disabled="!!tableCreateInfo.guid" placeholder="必填"
                :maxlength="50" @input="inputLengthKeyUp(/[^a-zA-Z0-9_]/g, scope, 'tableName')" />
            </template>
          </el-table-column>
          <el-table-column prop="tableChName" label="表中文名称" width="200px" align="left" show-overflow-tooltip>
            <template #header>
              <span>表中文名称</span>
              <span style="color:red;margin-left: 2px;">*</span>
            </template>
            <template #default="scope">
              <el-input v-model.trim="scope.row['tableChName']" placeholder="必填" :maxlength="50" />
            </template>
          </el-table-column>
          <el-table-column prop="tableChName" label="表数据总数(条)" width="200px" align="left" show-overflow-tooltip>
            <template #header>
              <span>表数据总数(条)</span>
              <span style="color:red;margin-left: 2px;">*</span>
            </template>
            <template #default="scope">
              <el-input v-model.trim="scope.row['dataCount']" placeholder="必填" :maxlength="19"
                @input="inputLengthKeyUp(/\D/g, scope, 'dataCount', null, 1)" />
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" width="220px" align="left" show-overflow-tooltip>
            <template #default="scope">
              <el-input :maxlength="500" v-model.trim="scope.row['description']" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table>
        <div class="tools_btns">
          <!-- <el-button type="primary" @click="addField" v-preReClick>新增</el-button> !-->
          <el-button @click="moveUp">上移</el-button>
          <el-button @click="moveDown">下移</el-button>
          <el-button @click="delFeilds" v-preReClick>批量删除</el-button>
        </div>
        <div class="table_fields_panel">
          <el-table ref="fieldsTableRef" :data="tableCreateInfo.damCatalogTableField" v-loading="tableFieldsLoading"
            :highlight-current-row="true" stripe border height="100%" @selection-change="selectionFieldsChange"
            tooltip-effect="light" :style="{
              width: '100%',
              'max-height': '100%',
              display: 'inline-block',
            }">
            <el-table-column type="selection" :width="32" align="center" />
            <el-table-column label="排序" type="index" width="56px" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="chName" label="字段中文名称" width="150px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-input v-if="scope.row['isEdit'] && tableCreateInfo.guid && scope.row['isPrimary'] != 'Y'"
                  :placeholder="'请输入'" v-model.trim="scope.row['chName']" :maxlength="50" />
                <span v-else>{{ scope.row["chName"] || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="enName" label="字段英文名称" width="150px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-input v-if="scope.row['isEdit'] && !tableCreateInfo.guid" v-model.trim="scope.row['enName']"
                  placeholder="必填" @input="inputLengthKeyUp(/[^a-zA-Z0-9_]/g, scope, 'enName')" :maxlength="50" />
                <span v-else>{{ scope.row["enName"] || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="dataType" label="字段类型" width="120px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-select v-if="scope.row['isEdit'] && !tableCreateInfo.guid" v-model="scope.row['dataType']"
                  @change="(val) => dataTypeChange(val, scope)" placeholder="请选择">
                  <el-option v-for="opt in fieldTypes" :key="opt['paramValue']" :label="opt['paramName']"
                    :value="opt['paramValue']" />
                </el-select>
                <span v-else>{{ fieldTypes.find(f => f.paramValue === scope.row["dataType"])?.paramName || "--"
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fieldLength" label="长度" width="115px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-input
                  v-if="scope.row['isEdit'] && !tableCreateInfo.guid && (scope.row['dataType'] == 'varchar' || scope.row['dataType'] == 'decimal' || scope.row['dataType'] == 'char')"
                  v-model.trim="scope.row['fieldLength']" placeholder="必填"
                  @input="inputLengthKeyUp(/\D/g, scope, 'fieldLength', 2000, 1)" />
                <span v-else>{{ scope.row["fieldLength"] == null ? '--' : scope.row["fieldLength"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fieldPrecision" label="精度" width="115px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-input v-if="scope.row['isEdit'] && scope.row['dataType'] == 'decimal' && !tableCreateInfo.guid"
                  v-model.trim="scope.row['fieldPrecision']" placeholder="必填"
                  @input="inputLengthKeyUp(/\D/g, scope, 'fieldPrecision', 30, 1)" />
                <span v-else>{{ scope.row["fieldPrecision"] == null ? '--' : scope.row["fieldPrecision"] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="dictionaryCode" label="关联字典" width="130px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-select v-if="scope.row['isEdit'] && !(tableCreateInfo.guid && scope.row['isPrimary'] == 'Y')"
                  v-model="scope.row['dictionaryCode']" placeholder="请选择" clearable filterable>
                  <el-option v-for="opt in paramsList" :key="opt['paramCode']" :label="opt['paramType']"
                    :value="opt['paramCode']" />
                </el-select>
                <span v-else>{{ scope.row['dictionaryCode'] ? (paramsList.find(p => p.paramCode ==
                  scope.row['dictionaryCode'])?.paramType || "--") : '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="isPrimary" label="是否主键" width="130px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-select v-if="scope.row['isEdit'] && !tableCreateInfo.guid" v-model="scope.row['isPrimary']"
                  placeholder="请选择">
                  <el-option v-for="opt in isNotList" :key="opt['value']" :label="opt['label']" :value="opt['value']" />
                </el-select>
                <span v-else>{{ scope.row["isPrimary"] || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="notNull" label="是否必填" width="130px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-select
                  v-if="scope.row['isEdit'] && !(tableCreateInfo.guid && (scope.row['notNull'] == 'N' || scope.row['isPrimary'] == 'Y'))"
                  v-model="scope.row['notNull']" placeholder="请选择">
                  <el-option v-for="opt in isNotList" :key="opt['value']" :label="opt['label']" :value="opt['value']" />
                </el-select>
                <span v-else>{{ scope.row["notNull"] || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="业务规则描述" width="220px" align="left" show-overflow-tooltip>
              <template #default="scope">
                <el-input v-if="scope.row['isEdit']" :maxlength="500" v-model.trim="scope.row['description']"
                  placeholder="请输入" />
                <span v-else>{{ scope.row["description"] || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120px" align="left" fixed="right" show-overflow-tooltip>
              <template #default="scope">
                <span class="text_btn" v-if="!scope.row['isEdit']" @click="handleFieldClickEdit(scope)"
                  v-preReClick>编辑</span>
                <span class="text_btn" v-else @click="handleFieldClickSave(scope)" v-preReClick>保存</span>
                <template v-if="!(tableCreateInfo.guid && scope.row['isPrimary'] == 'Y')">
                  <el-divider direction="vertical" />
                  <span class="text_btn" @click="handleFieldDelete(scope)">删除</span>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </ContentWrap>
    </div>
    <div class="bottom_tool_wrap">
      <template v-if="step == 0">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="changeStep(1)">下一步</el-button>
      </template>
      <template v-else>
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="!tableCreateInfo.guid" @click="changeStep(0)">上一步</el-button>
        <el-button type="primary" @click="save" v-preReClick>保存</el-button>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content_main {
  height: calc(100% - 40px);
  overflow: hidden auto;
}

:deep(.upload-main) {
  height: calc(100% - 16px);

  .header-bg-title {
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
  }
}

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

.tools_btns {
  padding: 8px 0;
}

.table_fields_panel {
  height: 400px;
  margin-bottom: 10px;
}

:deep(.el-table) {
  & td.el-table__cell {
    padding: 3px 0;
    height: 36px;
  }
}

.el-card {
  margin: 16px;
}
</style>