<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <!-- <a-button type="primary" @click="handleCreate"> 新增</a-button> -->
        <!-- <a-button type="primary" color="warning" @click="() => {}"> 编辑</a-button>
        <a-button type="primary" color="error" @click="() => {}"> 删除</a-button> -->
      </template>

      <template #cover="{ record }">
        <TableImg
          :size="120"
          :simpleShow="true"
          :imgList="[record.thumb || '/resource/img/header.jpg']"
        />
      </template>
      <template #createTime="{ record }">
        <Time v-if="record.createTime" :value="record.createTime" mode="datetime" />
      </template>

      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('routes.scenes.unAssistant'),
              onClick: handleUnAssistantModal.bind(null, record),
              ifShow: isPatchAuth,
            },
          ]"
        />
      </template>
    </BasicTable>
    <unAssistantModal @register="registerUnAssistantModal" @submit="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, computed, ref } from 'vue';
  import {
    BasicTable,
    useTable,
    BasicColumn,
    FormProps,
    TableAction,
    TableImg,
  } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Tabs } from 'ant-design-vue';
  import { contractorListApi } from '/@/api/corporation/list';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { Time } from '/@/components/Time';

  import { useLocaleStore } from '/@/store/modules/locale';
  import unAssistantModal from './unAssistantModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useUserStore } from '/@/store/modules/user';
  import { RoleEnum } from '/@/enums/roleEnum';

  const localeStore = useLocaleStore();
  console.log('localeStore', localeStore);

  const userStore = useUserStore();

  export default defineComponent({
    components: {
      BasicTable,
      TableAction,
      TableImg,
      // PageWrapper,
      Time,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
      unAssistantModal,
    },
    setup() {
      const { createMessage } = useMessage();
      const { t } = useI18n();
      const loading = ref(false);
      const tableType = ref<Number>(0); //0看看 、1看见、 2深时
      const isJA = computed(() => localeStore.getLocale === 'ja');
      const columns: BasicColumn[] = [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 80,
          defaultHidden: true,
        },
        {
          title: t('routes.contractor.mainContractorName'),
          dataIndex: 'mainContractorName',
          ellipsis: false,
          width: 120,
        },
        {
          title: t('routes.contractor.mainContractorAccount'),
          dataIndex: 'mainContractorAccount',
          ellipsis: false,
          width: 120,
        },
        {
          title: t('routes.contractor.contractorName'),
          dataIndex: 'contractorName',
          ellipsis: false,
          // slots: { customRender: 'link' },
          width: 180,
        },
        {
          title: t('routes.contractor.contractorAccount'),
          dataIndex: 'contractorAccount',
          ellipsis: true,
          // slots: { customRender: 'cover' },
          width: 150,
        },
        {
          title: t('routes.contractor.sceneCount'),
          dataIndex: 'sceneCount',
          width: 120,
        },
        {
          title: t('routes.contractor.createTime'),
          dataIndex: 'createTime',
          slots: { customRender: 'createTime' },
          width: 200,
        },
        {
          title: t('common.operation'),
          dataIndex: '',
          slots: { customRender: 'action' },
          width: 100,
          // fixed: 'right',
        },
      ];

      const roleList = userStore.roleList;
      console.log('roleList', roleList);

      const isPatchAuth = computed(() => {
        return roleList.includes(RoleEnum.PLAT_ADMIN) || roleList.includes(RoleEnum.SUPER);
      });
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        schemas: [
          {
            field: 'mainContractorAccount',
            label: t('routes.contractor.mainContractorAccount'),
            labelWidth: 160,
            component: 'Input',
            colProps: {
              lg: 6,
              xl: 6,
              xxl: 6,
              sm: 12,
              xs: 24,
            },
          },
          {
            field: 'contractorAccount',
            label: t('routes.contractor.contractorAccount'),
            labelWidth: 160,
            component: 'Input',
            colProps: {
              lg: 6,
              xl: 6,
              xxl: 6,
              sm: 12,
              xs: 24,
            },
          },
        ],
      };
      const [registerUnAssistantModal, { openModal: openUnAssistantModal }] = useModal();
      const [registerTable, { reload, getSelectRowKeys }] = useTable({
        title: t('routes.dashboard.contractorManage'),
        api: contractorListApi,
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        searchInfo: { type: tableType },
        tableSetting: { fullScreen: true },
        clickToRowSelect: true,
        showIndexColumn: true,
        rowKey: 'num',
        beforeFetch: (T) => {
          loading.value = true;
          return T;
        },
        afterFetch: (T) => {
          loading.value = false;
          return T;
        },
      });

      function changeTable(val: Number) {
        tableType.value = val;
        reload();
      }
      const handleSelect = async () => {
        const keys = getSelectRowKeys();
        console.log('key', keys);
      };
      const handleCreate = () => {
        console.log('handleCreate');
      };
      const handleUnAssistantModal = (record: Recordable) => {
        openUnAssistantModal(true, { ...record });
      };
      return {
        isPatchAuth,
        registerTable,
        createMessage,
        t,
        changeTable,
        tableType,
        loading,
        isJA,
        handleSelect,
        handleCreate,
        handleUnAssistantModal,
        registerUnAssistantModal,
        reload,
      };
    },
  });
</script>
