<template>
  <div class="l-from-body">
    <a-form
      ref="formRef"
      :rules="data.rules"
      :model="formData"
      labelAlign="left"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="数据库" name="dbCode">
        <a-select
          v-model:value="formData.dbCode"
          placeholder="请选择"
          :options="sqlOptions"
          :field-names="{ label: 'text', value: 'id', options: 'childNodes' }"
        />
      </a-form-item>
      <a-form-item label="数据表" name="table">
        <a-space>
          <a-input v-model:value="formData.table" placeholder="请输入" readonly />
          <a-button @click="handleTableClick">选择</a-button>
        </a-space>
      </a-form-item>
      <a-form-item label="关联流程字段" name="rfield">
        <a-select
          v-model:value="formData.rfield"
          placeholder="请选择"
          :options="data.columns"
          :field-names="{ label: 'name', value: 'dbColumnName' }"
        />
      </a-form-item>
      <a-form-item label="审核人字段" name="auditorField">
        <a-select
          v-model:value="formData.auditorField"
          placeholder="请选择"
          :options="data.columns"
          :field-names="{ label: 'name', value: 'dbColumnName' }"
        />
      </a-form-item>
    </a-form>
    <a-modal
      width="60%"
      wrap-class-name="full-modal-children"
      v-model:open="data.tableOpen"
      title="选择数据表"
      @ok="tableHandleOk"
      :destroyOnClose="true"
    >
      <SelectTable ref="tableRef" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { SelectTable } from '@/components/SelectTable/index';
  import { getTableForms } from '@/api/sys/flowPenal';
  import { getLoadDataBaseLinkTree } from '@/api/demo/system';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const labelCol = { span: 6 };
  const wrapperCol = { span: 17 };
  const formRef = ref<any>();
  const tableRef = ref<any>();
  const sqlOptions = ref([]);

  const data = reactive({
    rules: {
      dbCode: [{ required: true, message: '请选择数据库' }],
      table: [{ required: true, message: '请选择数据表' }],
      rfield: [{ required: true, message: '请选择关联字段' }],
      auditorField: [{ required: true, message: '请选择审核人字段' }],
    },
    columns: [],
    tableOpen: false,
  });
  let formData = ref({
    dbCode: '',
    table: '',
    rfield: '',
    auditorField: '',
    type: '6',
  });
  async function getSQL() {
    const data = await getLoadDataBaseLinkTree();
    let res: any = [];
    data.forEach((element) => {
      if (element.childNodes == null) {
        element.childNodes = [];
      }
      let point = {};
      if (element.id == 'hcsystemdb') {
        point = {
          id: '1',
          text: '常用数据库',
          childNodes: [
            {
              id: element.id,
              text: element.text,
            },
          ],
        };
        res.push(point);
      } else {
        res.push(element);
      }
    });
    sqlOptions.value = res;
  }
  function handleTableClick() {
    if (formData.value.dbCode == '') {
      return createMessage.warning('请先选择数据库');
    }
    data.tableOpen = true;
  }
  function tableHandleOk() {
    const obj = tableRef.value.getRow();
    formData.value.table = obj[0].name;
    handleTableChange(obj[0].name);
    data.tableOpen = false;
  }
  // 选择数据表，把获取表头
  async function handleTableChange(table) {
    var querys = {
      dbCode: formData.value.dbCode,
      tableNames: table,
    };
    const obj: Recordable = await getTableForms(querys);
    let columnsData = obj[0].db_codecolumnsList;
    columnsData.forEach((element) => {
      element.name = element.dbColumnName + '(' + element.description + ')';
    });
    data.columns = columnsData;
  }
  // 校验表单
  function validateForm() {
    formRef.value
      .validate()
      .then(async () => {
        return true;
      })
      .catch(async () => {
        return false;
      });
  }

  function getForm() {
    return formData.value;
  }

  defineExpose({
    validateForm,
    getForm,
  });
  onMounted(() => {
    getSQL();
  });
</script>
<style scoped>
  .l-from-body {
    padding: 10px 30px;
  }
</style>
<style lang="less">
  .full-modal-children {
    .ant-modal {
      max-width: 100%;
    }

    .ant-modal-content {
      height: calc(80vh);
    }

    .ant-modal-body {
      height: 80%;
    }
  }
</style>
