<template>
  <div>
    <BasicTable
      @register="registerTable"
      :rowSelection="{ type: 'checkbox', onChange: onSelectChange }"
    >
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增商品</a-button>
        <PopConfirmButton
          title="是否确定批量删除？"
          primary
          color="error"
          @confirm="handlePatchDelete"
        >
          批量删除</PopConfirmButton
        >
        <PopConfirmButton
          title="是否确定批量上架？"
          primary
          color="warning"
          @confirm="handlePatchEnSale"
        >
          批量上架</PopConfirmButton
        >
        <PopConfirmButton
          title="是否确定批量下架？"
          ghost
          color="error"
          @confirm="handlePatchUnSale"
        >
          批量下架</PopConfirmButton
        >
      </template>
      <template #realShopUrl="{ record }">
        <a :href="record.realShopUrl" target="_blank">{{ record.realShopUrl }}</a>
      </template>

      <template #addTime="{ record }">
        <Time :value="record.addTime" mode="datetime" />
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'mdi:information-outline',
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              label: '删除',
              popConfirm: {
                title: '是否确认删除',
                confirm: () => {
                  handleSingleDelete(record.id);
                },
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <ProductDrawer @register="registerDrawer" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { PopConfirmButton } from '/@/components/Button';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { uploadApi } from '/@/api/sys/upload';
  // import { Switch } from 'ant-design-vue';
  // import { h } from 'vue';
  // UnSaleApi EnSaleApi
  import { ListApi, DeleteApi, EnSaleApi, UnSaleApi } from '/@/api/product/list';
  import { useI18n } from '/@/hooks/web/useI18n';
  // import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useGo } from '/@/hooks/web/usePage';
  import { useDrawer } from '/@/components/Drawer';
  import ProductDrawer from './productDrawer.vue';
  // import { PageWrapper } from '/@/components/Page';
  import { columns, searchForm } from './list.data';
  import { Time } from '/@/components/Time';

  export default defineComponent({
    components: { BasicTable, TableAction, ProductDrawer, Time, PopConfirmButton },
    setup() {
      const { createMessage } = useMessage();
      const go = useGo();
      const { t } = useI18n();
      const [registerDrawer, { openDrawer }] = useDrawer();

      const [registerTable, { reload, getSelectRowKeys }] = useTable({
        title: '商品列表',
        api: ListApi,
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        showIndexColumn: true,
        rowKey: 'id',
        pagination: { pageSize: 20 },
        clickToRowSelect: false,
        bordered: true,
      });

      function handleEdit(record: Recordable) {
        openDrawer(true, {
          record,
          isUpdate: true,
        });
      }
      function handleCreate() {
        openDrawer(true, {
          isUpdate: false,
        });
      }
      function onSelectChange(): void {}
      async function handleDelete(ids: string[]) {
        await DeleteApi(ids);
        nextTick(reload);
      }
      function handleSingleDelete(id: string) {
        handleDelete([id]);
      }

      function handlePatchDelete() {
        const keys = getSelectRowKeys();
        console.log('key', keys);
        if (keys.length === 0) {
          createMessage.info(t('modal.atLeastOne'));
          return;
        }
        handleDelete(keys);
      }
      async function handlePatchEnSale() {
        try {
          const keys = getSelectRowKeys();
          if (keys.length === 0) {
            createMessage.info(t('modal.atLeastOne'));
            return;
          }
          await EnSaleApi(keys);
          nextTick(reload);
        } catch (error) {
          nextTick(reload);
        }
      }
      async function handlePatchUnSale() {
        try {
          const keys = getSelectRowKeys();
          console.log('key', keys);
          if (keys.length === 0) {
            createMessage.info('请至少选择一项');
            return;
          }
          await UnSaleApi(keys);
          nextTick(reload);
        } catch (error) {
          nextTick(reload);
        }
      }
      return {
        registerTable,
        createMessage,
        t,
        go,
        registerDrawer,
        handleEdit,
        handleCreate,
        onSelectChange,
        handleSingleDelete,
        handlePatchDelete,
        handlePatchEnSale,
        handlePatchUnSale,
        uploadApi: uploadApi as any,
      };
    },
  });
</script>
