<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleEdit">{{ t('routes.empower.sq') }}</a-button>
        <a-button type="primary" @click="handleAllExport">{{ t('routes.empower.pldr') }}</a-button>
      </template>
      <template #copy="{ record }">
        <a @click="handleCopy(record.authorizeKey)">
          {{ record.authorizeKey }}
        </a>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('common.edit'),
              //ifShow: getCheckPerm('algorithm-updata'),
              onClick: handleEdit.bind(null, record),
            },
            {
              label: t('common.delText'),
              color: 'error',
              //ifShow: getCheckPerm('algorithm-delete'),
              onClick: handleDelete.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddModal @register="register" @update="reload" />
    <batchModal @register="registerBatch" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h, computed } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  import { authorizeModelingList, authorizeModelingdelete } from '/@/api/authorizeModeling';
  import { useModal } from '/@/components/Modal';
  import { copyTextToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { Time } from '/@/components/Time';
  import AddModal from './AddModal.vue';
  import batchModal from './batchModal.vue';
  import { useLocaleStore } from '/@/store/modules/locale';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { usePermissionStore } from '/@/store/modules/permission';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { incrementUseTypeList } from '/@/api/account';
  export default defineComponent({
    components: {
      BasicTable,
      AddModal,
      TableAction,
      batchModal,
      Time,
    },
    setup() {
      const { createMessage, createConfirm } = useMessage();
      // const permissionStore = usePermissionStore();
      // const { getCheckPerm } = permissionStore;
      const { t } = useI18n();
      const [register, { openModal }] = useModal();
      const localeStore = useLocaleStore();
      const [registerBatch, { openModal: openBatchModal }] = useModal();
      const isEn = computed(() => localeStore.getLocale === 'en');
      const columns: BasicColumn[] = [
        {
          title: t('routes.empower.customerName'),
          dataIndex: 'customerName',
          ellipsis: true,
          width: 250,
        },
        // {
        //   title: '客户类别',
        //   dataIndex: 'customerType',
        //   ellipsis: true,
        //   width: 80,
        //   customRender: ({ record }) => {
        //     return record.customerType == 1 ? '经销' : '直销';
        //   },
        // },
        {
          title: t('routes.empower.endCustomer'),
          ellipsis: true,
          dataIndex: 'endCustomer',
          width: 120,
        },
        // {
        //   title: t('routes.empower.useTypeStr'),
        //   ellipsis: true,
        //   dataIndex: 'useTypeStr',
        //   width: 120,
        // },
        // {
        //   title: '项目号',
        //   ellipsis: true,
        //   dataIndex: 'projectNum',
        //   width: 120,
        // },
        {
          title: t('routes.empower.authorizeKey'),
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'authorizeKey',
          width: 150,
        },
        {
          title: t('routes.empower.authorizeTime'),
          ellipsis: true,
          dataIndex: 'authorizeTime',
          width: 220,
          customRender: ({ record }) => {
            if (record.authorizeStartTime && record.authorizeEndTime) {
              return record.authorizeStartTime + '~' + record.authorizeEndTime;
            }
            return '-';
          },
        },
        {
          title: t('routes.empower.cameraSn'),
          ellipsis: true,
          dataIndex: 'cameraSn',
          width: 120,
        },
        {
          title: t('routes.empower.agentName'),
          ellipsis: true,
          dataIndex: 'agentName',
          width: 220,
        },
        {
          title: t('routes.retailer.createName'),
          ellipsis: true,
          dataIndex: 'createAgentName',
          width: 120,
        },
        {
          title: t('routes.retailer.createTime'),
          ellipsis: true,
          dataIndex: 'createTime',
          width: 160,
          customRender: ({ record }) => {
            return (
              record.createTime &&
              h(Time, {
                value: record.createTime,
                mode: 'datetime',
              })
            );
          },
        },
        {
          title: t('routes.empower.remark'),
          ellipsis: true,
          dataIndex: 'remark',
          width: 200,
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 130,
        autoSubmitOnEnter: true,
        schemas: [
          {
            field: 'customerName',
            label: t('routes.empower.customerName'),
            labelWidth: isEn.value ? 160 : 80,
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          // {
          //   field: 'customerType',
          //   label: '客户类别',
          //   component: 'Select',
          //   componentProps: {
          //     options: [
          //       {
          //         label: '直销',
          //         value: 0,
          //         key: '0',
          //       },
          //       {
          //         label: '经销',
          //         value: 1,
          //         key: '1',
          //       },
          //     ],
          //   },
          //   colProps: {
          //     xl: 8,
          //     xxl: 8,
          //   },
          // },
          // {
          //   field: 'useType',
          //   label: t('routes.empower.useTypeStr'),
          //   component: 'ApiSelect',
          //   componentProps: {
          //     api: incrementUseTypeList,
          //     labelField: 'name',
          //     valueField: 'id',
          //     immediate: true,
          //   },
          //   colProps: {
          //     xl: 8,
          //     xxl: 8,
          //   },
          // },
          {
            field: 'authorizeKey',
            labelWidth: 150,
            label: t('routes.empower.authorizeKey'),
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'cameraSn',
            component: 'Input',
            label: t('routes.empower.cameraSn'),
            colProps: { span: 8 },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: authorizeModelingList,
        title: t('routes.empower.list'),
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 100,
          title: t('common.operating'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        rowKey: 'id',
        canResize: true,
      });
      async function handleDelete(record) {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', t('common.reminder')),
          content: () => h('span', t('routes.empower.deltTips')),
          onOk: async () => {
            await authorizeModelingdelete({ id: record.id });
            reload();
            createMessage.success(t('common.optSuccess'));
          },
        });
      }
      function handleCopy(str: string) {
        copyTextToClipboard(str);
        createMessage.success(t('routes.scene.copySccuse'));
      }
      function handleAllExport() {
        openBatchModal(true, {});
      }
      function handleEdit(record = {}) {
        openModal(true, {
          ...record,
          authorizeTime: `${record.authorizeTime || '10'}_${record.authorizeTimeUnit || '1'}`,
        });
      }
      return {
        registerTable,
        handleCopy,
        handleDelete,
        reload,
        register,
        registerBatch,
        t,
        // getCheckPerm,
        handleEdit,
        handleAllExport,
      };
    },
  });
</script>
