<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button
          v-auth="[RoleEnum.SUPER, RoleEnum.PLAT_ADMIN, RoleEnum.COMPANY_ADMIN]"
          type="primary"
          @click="openAddModal"
          >{{ t('routes.devices.addCamera') }}</a-button
        >
      </template>

      <template #cameraType="{ record }">
        <Tag color="green">{{ rendercameraTypeLabel(Number(record.cameraType)) }} </Tag></template
      >
      <template #own="{ record }">
        {{ renderOwnTypeLabel(record.own) }}
      </template>

      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              label: t('common.edit'),
              onClick: handleEditScenes.bind(null, record),
            },
            {
              icon: 'clarity:unlink-line',
              label: t('common.unbind'),
              ifShow: !!record.userName,
              popConfirm: {
                title: t('routes.corporation.isUnBind'),
                confirm: handleUnbindDevice.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddModal @update="reload" @register="registerAddModal" />
    <EditModal @register="registerEditModal" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Tag } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { ListApi } from '/@/api/device/list';
  import { unDeviceApi } from '/@/api/corporation/list';
  import AddModal from './AddModal.vue';
  import EditModal from './EditModal.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { RoleEnum } from '/@/enums/roleEnum';

  const { t } = useI18n();
  // param type 0
  export default defineComponent({
    components: { BasicTable, TableAction, Tag, AddModal, EditModal },
    setup() {
      const { createMessage } = useMessage();
      const [registerAddModal, { openModal: openAddModal }] = useModal();
      const [registerEditModal, { openModal: openEditModal }] = useModal();
      const columns: BasicColumn[] = [
        {
          title: t('routes.devices.childName'),
          dataIndex: 'childName',
          fixed: 'left',
          width: 100,
        },
        {
          title: t('routes.devices.email'),
          dataIndex: 'userName',
          width: 230,
        },
        // {
        //   title: t('routes.devices.companyId'),
        //   dataIndex: 'companyName',
        //   width: 120,
        // },
        // {
        //   title: t('routes.devices.cameraType'),
        //   dataIndex: 'cameraType',
        //   width: 230,
        //   slots: { customRender: 'cameraType' },
        // },
        {
          title: t('routes.devices.cameraType'),
          dataIndex: 'goodsName',
          slots: { customRender: 'cameraType' },
          width: 230,
        },
        {
          title: t('routes.devices.snCode'),
          dataIndex: 'snCode',
          width: 120,
        },
        {
          title: t('routes.devices.wifiName'),
          dataIndex: 'wifiName',
          width: 180,
        },
        {
          title: t('routes.devices.activationTime'),
          dataIndex: 'activatedTime',
          width: 150,
        },
        {
          title: t('routes.devices.shipmentType'),
          dataIndex: 'own',
          slots: { customRender: 'own' },
          width: 120,
        },
        {
          title: t('common.operating'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
          auth: [RoleEnum.SUPER, RoleEnum.PLAT_ADMIN],
          width: 140,
        },
      ];

      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        schemas: [
          {
            field: 'searchKey',
            label: t('routes.devices.searchName'),
            labelWidth: 120,
            component: 'Input',
            componentProps: {
              placeholder: t('routes.devices.searchNamePlaceholder'),
            },
            colProps: {
              span: 12,
            },
          },
        ],
      };
      // { getForm }
      const [registerTable, { reload }] = useTable({
        title: t('routes.devices.deviceList'),
        api: ListApi,
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        showIndexColumn: false,
        rowKey: 'id',
        handleSearchInfoFn: function (searchData) {
          if (searchData.fieldTime) {
            searchData.startDate = searchData.fieldTime[0];
            searchData.endDate = searchData.fieldTime[1];
            delete searchData.fieldTime;
          }
          return searchData;
        },
      });
      // pagination.value = { pageSize: 20 };
      function rendercameraTypeLabel(cameraType: number): string {
        switch (cameraType) {
          case 4:
            return t('routes.devices.cameraName.4');
          case 1:
            return t('routes.devices.cameraName.1');
          case 9:
            return t('routes.devices.cameraName.9');
          case 10:
            return t('routes.devices.cameraName.10');
          case 11:
            return t('routes.devices.cameraName.11');
          case 6:
            return t('routes.devices.cameraName.6');
          default:
            return '';
        }
      }
      function renderOwnTypeLabel(type: number): string {
        switch (type) {
          case 0:
            return t('routes.devices.ownName.0');
          case 2:
            return t('routes.devices.ownName.2');
          case 1:
            return t('routes.devices.ownName.1');
          case 3:
            return t('routes.devices.ownName.3');
          default:
            return '';
        }
      }
      function handleEditScenes(record: Recordable) {
        console.log('record', record);
        openEditModal(true, record);
      }
      async function handleUnbindDevice(record: Recordable) {
        await unDeviceApi({
          childName: record.childName,
        });
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      return {
        registerTable,
        createMessage,
        rendercameraTypeLabel,
        renderOwnTypeLabel,
        registerAddModal,
        openAddModal,
        t,
        reload,
        handleEditScenes,
        handleUnbindDevice,
        registerEditModal,
        RoleEnum,
      };
    },
  });
</script>
