<template>
  <Modal
    centered
    title="从数据库导入表单"
    width="600px"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
  >
    <template #footer>
      <c-button @click="handleCancel">关闭</c-button>
      <c-button @click="handleTrans" type="primary" preIcon="ant-design:swap-outlined" :loading="btnLoading"
        >生成表单</c-button
      >
    </template>

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" style="padding-bottom: 0; margin-bottom: 0">
      <Form layout="inline">
        <Row :gutter="24">
          <Col :span="24">
            <FormItem label="表名" style="padding-bottom: 0; margin-bottom: 0; width: 60px">
              <InputSearch
                enter-button
                placeholder="请输入表名"
                v-model:value="filterId"
                @press-enter="searchFilter"
                @search="searchFilter"
                allow-clear
                style="width: 300px"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>

    <div class="ant-alert ant-alert-info" style="margin: 5px 0; height: 30px; padding: 6px 10px; font-size: 12px">
      <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
        selectedRowKeys.length
      }}</a
      >项&nbsp;&nbsp;
      <a style="margin-left: 24px" @click="onClearSelected">清空</a>
    </div>

    <Spin :spinning="confirmLoading">
      <Table
        ref="table"
        size="small"
        bordered
        rowKey="id"
        :pagination="true"
        :columns="columns"
        :dataSource="dataSource"
        :locale="{ emptyText: emptyText }"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
      />
    </Spin>
  </Modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { onlyMessage } from '@jdlinker/utils';
  import { queryTables, transTables } from '../cgform.api';
  import { Modal, Form, Row, Col, Spin, Table, FormItem, InputSearch } from 'ant-design-vue';

  const columns = [
    {
      title: '序号',
      dataIndex: '',
      key: 'rowIndex',
      width: 60,
      align: 'center',
      customRender: function ({ index }) {
        return parseInt(index) + 1;
      }
    },
    {
      title: '表名',
      align: 'left',
      dataIndex: 'id'
    }
  ];
  const emit = defineEmits(['success']);
  const emptyText = ref('暂无数据');
  const visible = ref(false);
  const confirmLoading = ref(false);
  const btnLoading = ref(false);
  const filterId = ref('');
  const dataSource = ref([]);
  const metaSource = ref([]);
  const selectedRowKeys = ref([]);

  const queryTableList = () => {
    confirmLoading.value = true;
    queryTables().then((res) => {
      confirmLoading.value = false;
      if (res.success) {
        dataSource.value = res.result;
        metaSource.value = res.result;
      } else {
        onlyMessage(res.message, 'warning');
      }
    });
  };
  const show = () => {
    visible.value = true;
    btnLoading.value = false;
    filterId.value = '';
    emptyText.value = '暂无数据';
    selectedRowKeys.value = [];
    queryTableList();
  };
  const onSelectChange = (options) => {
    selectedRowKeys.value = options;
  };
  const onClearSelected = () => {
    selectedRowKeys.value = [];
  };
  const handleCancel = () => {
    visible.value = false;
  };
  const handleSuccess = () => {
    visible.value = false;
    emit('success');
  };
  const handleTrans = () => {
    if (!selectedRowKeys.value || selectedRowKeys.value.length == 0) {
      onlyMessage('请选择一张表', 'warning');
    } else {
      btnLoading.value = true;
      transTables(selectedRowKeys.value.join(',')).then((res) => {
        btnLoading.value = false;
        if (res.success) {
          onlyMessage(res.message, 'success');
          handleSuccess();
        } else {
          onlyMessage(res.message, 'warning');
        }
      });
    }
  };
  const searchFilter = () => {
    if (!filterId.value) {
      dataSource.value = [...metaSource.value];
    } else {
      dataSource.value = metaSource.value.filter((item) => item.id.indexOf(filterId.value) >= 0);
    }
  };
  const searchReset = () => {
    filterId.value = '';
    searchFilter();
  };
  defineExpose({ show });
</script>

<style scoped>
  .ant-modal-cust-warp {
    height: 100%;
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto;
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden;
  }
</style>
