<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="openAddModal">{{
          t('routes.corporation.addCorporation')
        }}</a-button>
      </template>
      <template #no="{ record }">
        <Tag :color="renderTag(record.state, 'color')">
          {{ renderTag(record.state, 'text') || '审核中' }}
        </Tag>
      </template>
      <template #time="{ record }">
        <Time :value="record.createTime" mode="date" />
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:info-standard-line',
              // tooltip: '详细信息',
              label: t('routes.corporation.detailed'),
              onClick: () => {
                infoText(record);
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <detailsModal @register="registerDeviceModal" />
    <AddCorporationModal @register="registerAddCorporationModal" @submit="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
  import { uploadApi } from '/@/api/sys/upload';
  import { Tag } from 'ant-design-vue';
  import { Time } from '/@/components/Time';
  import { ListVerifyApi } from '/@/api/corporation/list';
  import detailsModal from './detailsModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import AddCorporationModal from './AddCorporationModal.vue';

  export default defineComponent({
    components: { BasicTable, Tag, TableAction, detailsModal, Time, AddCorporationModal },
    setup() {
      const { t } = useI18n();
      const [registerDeviceModal, { openModal: openDeviceModal }] = useModal();
      const [registerAddCorporationModal, { openModal: openAddCorporationModal }] = useModal();
      const columns: BasicColumn[] = [
        {
          title: t('routes.corporation.submitTime'),
          dataIndex: 'createTime',
          slots: { customRender: 'time' },
          width: 180,
          // editComponent: 'DatePicker',
          // editComponentProps: {
          //   valueFormat: 'YYYY-MM-DD',
          //   format: 'YYYY-MM-DD',
          // },
        },
        {
          title: t('routes.corporation.enterpriseName'),
          dataIndex: 'name',
          width: 230,
        },
        {
          title: t('routes.corporation.phone'),
          dataIndex: 'userName',
          width: 120,
        },
        {
          title: t('routes.corporation.approveState'),
          dataIndex: 'state',
          slots: { customRender: 'no' },
          width: 180,
        },
        {
          title: t('common.operation'),
          dataIndex: '',
          slots: { customRender: 'action' },
          width: 120,
        },
      ];

      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        schemas: [
          {
            field: 'state',
            component: 'Select',
            label: t('routes.devices.deviceList'),
            defaultValue: '',
            colProps: {
              span: 4,
            },
            componentProps: {
              options: ['', 1, 0, 2].map((ele) => {
                return { value: ele, key: ele, label: renderTag(ele, 'text') };
              }),
            },
          },
          {
            field: 'userName',
            label: t('routes.corporation.phone'),
            component: 'Input',
            colProps: {
              span: 6,
            },
          },
          {
            field: 'fieldTime',
            component: 'RangePicker',
            label: t('routes.corporation.timeField'),
            colProps: {
              span: 8,
            },
          },
        ],
      };
      // { getForm }
      const [registerTable, { reload }] = useTable({
        title: t('routes.corporation.businessAuth'),
        api: ListVerifyApi,
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        handleSearchInfoFn: function (searchData) {
          if (searchData.fieldTime) {
            searchData.startTime = searchData.fieldTime[0];
            searchData.endTime = searchData.fieldTime[1];
            delete searchData.fieldTime;
          }
          console.log('searchData', searchData);

          return searchData;
        },
        showIndexColumn: false,
        rowKey: 'id',
        //TODO
        fetchSetting: {
          pageField: 'page',
          sizeField: 'limit',
          listField: 'list',
          totalField: 'totalCount',
        },
      });
      function infoText(record) {
        openDeviceModal(true, { record });
      }
      function renderTag(state, type) {
        let obj = {
          1: { color: 'success', text: t('routes.corporation.stateName.1') },
          2: { color: 'warning', text: t('routes.corporation.stateName.2') },
          0: { color: 'green', text: t('routes.corporation.stateName.0') },
        };
        let active = obj[state] || { color: 'green', text: t('routes.corporation.stateName.9') };
        // console.log('active', active, state);
        if (type == 'color') {
          return active.color || 'green';
        } else {
          return active.text || 'green';
        }
      }
      // pagination.value = { pageSize: 20 };

      function openAddModal() {
        openAddCorporationModal(true);
      }
      return {
        registerTable,
        uploadApi: uploadApi as any,
        registerDeviceModal,
        infoText,
        renderTag,
        t,
        openAddModal,
        registerAddCorporationModal,
        reload,
      };
    },
  });
</script>
