<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="name">
        <a-input v-model:value="formData.name" placeholder="请输入" />
      </a-form-item>
      <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="formData.columns"
          :field-names="{ label: 'name', value: 'dbColumnName' }"
        />
      </a-form-item>
      <a-form-item label="比较字段" name="cfield">
        <a-select
          v-model:value="formData.cfield"
          placeholder="请选择"
          :options="formData.columns"
          :field-names="{ label: 'name', value: 'dbColumnName' }"
        />
      </a-form-item>
      <a-form-item label="比较类型" name="compareType">
        <a-select
          v-model:value="formData.compareType"
          placeholder="请选择"
          :options="data.options"
        />
      </a-form-item>
      <a-form-item label="数据值" name="value">
        <a-input v-model:value="formData.value" placeholder="请输入" />
      </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" :dbCode="formData.dbCode" />
    </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([]);
  let formData: any = ref({});
  const props = defineProps({
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  formData.value = props.propsData;
  const data = reactive({
    rules: {
      dbCode: [{ required: true, message: '请选择数据库' }],
      table: [{ required: true, message: '请选择数据表' }],
      rfield: [{ required: true, message: '请选择关联字段' }],
      cfield: [{ required: true, message: '请选择比较字段' }],
      compareType: [{ required: true, message: '请选择比较类型' }],
      value: [{ required: true, message: '请填写值' }],
      name: [{ required: true, message: '请填写条件名称' }],
    },
    options: [
      { value: '1', label: '等于' },
      { value: '2', label: '不等于' },
      { value: '3', label: '大于' },
      { value: '4', label: '大于等于' },
      { value: '5', label: '小于' },
      { value: '6', label: '小于等于' },
      { value: '7', label: '包含' },
      { value: '8', label: '不包含' },
      { value: '9', label: '包含于' },
      { value: '10', label: '不包含于' },
    ],
    tableOpen: false,
  });

  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() {
    console.log(tableRef.value.getRow());
    const obj = tableRef.value.getRow();
    formData.value.table = obj[0].tableName;
    handleTableChange(obj[0].tableName);
    data.tableOpen = false;
  }
  // 选择数据表，把获取表头
  async function handleTableChange(table) {
    var querys = {
      dbCode: formData.value.dbCode,
      tableNames: table,
    };
    const obj = await getTableForms(querys);
    let columnsData = obj[0].db_codecolumnsList;
    columnsData.forEach((element) => {
      element.name = element.dbColumnName + '(' + element.description + ')';
    });
    formData.value.columns = columnsData;
  }
  function setForm(data) {
    formData.value = data;
  }
  // 校验表单
  function validateForm() {
    formRef.value
      .validate()
      .then(async () => {
        return true;
      })
      .catch(async () => {
        return false;
      });
  }
  function getForm() {
    return formData.value;
  }

  defineExpose({
    validateForm,
    getForm,
    setForm,
  });
  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>
