<template>
  <PageWrapper contentBackground>
    <div class="desc-wrap-BasicTable">
      <BasicTable @register="registerTimeTable">
        <template #toolbar>
          <a-button type="primary" @click="handleAdd"> {{t('routes.retailer.add')}}</a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: t('routes.retailer.setName'),
                //icon: 'la:file-invoice-dollar',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: t('common.edit'),
                //icon: 'la:file-invoice-dollar',
                onClick: headleDetails.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <AddModal @update="reload" @register="registerAddModal" />
    <EditModal @register="registerEditModal" @update="reload" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive, h, computed } from 'vue';
  import { BasicTable, useTable, FormProps, TableAction, BasicColumn } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { Divider, Card, Empty, Descriptions, Steps, Tabs } from 'ant-design-vue';
  import { listApi, banOrUnBan } from '/@/api/retailer';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import AddModal from './AddModal.vue';
  import EditModal from './EditModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Switch } from 'ant-design-vue';
  import { Time } from '/@/components/Time';
  import { useUserStore } from '/@/store/modules/user';
  import { usePermissionStore } from '/@/store/modules/permission';
  export default defineComponent({
    components: {
      BasicTable,
      AddModal,
      EditModal,
      TableAction,
      PageWrapper,
      [Divider.name]: Divider,
      [Card.name]: Card,
      Empty,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      const { t } = useI18n();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const searchInfo = reactive<Recordable>({
        // type: 1,
      });
      const [registerAddModal, { openModal: openAddModal }] = useModal();
      const [registerEditModal, { openModal: openEditModal }] = useModal();
      const userStore = useUserStore();
      const isDev = computed(() => userStore.getSystemEnv);
      const { createMessage } = useMessage();

      const refundTimeTableSchema: BasicColumn[] = [
        {
          title: t('routes.retailer.name'),
          width: 120,
          dataIndex: 'name',
        },
        {
          title: t('routes.retailer.form.nickName'),
          width: 120,
          dataIndex: 'nickName',
        },
        {
          title: t('routes.retailer.form.userId'),
          width: 100,
          dataIndex: 'userName',
        },
        {
          title: t('routes.retailer.majorTotalNum'),
          width: 150,
          dataIndex: 'majorTotalNum',
          customRender: ({ record }) => {
            return record.majorTotalNum - record.majorUseNum;
          }
        },
        {
          title: t('routes.retailer.highTotalNum'),
          width: 150,
          dataIndex: 'highTotalNum',
          ifShow: isDev.value,
          customRender: ({ record }) => {
            return record.highTotalNum - record.highUseNum;
          }
        },
        {
          title: t('routes.retailer.downTotalNum'),
          width: 150,
          dataIndex: 'downTotalNum',
          customRender: ({ record }) => {
            return record.downTotalNum - record.downUseNum;
          }
        },
        {
          title: t('routes.retailer.createName'),
          width: 120,
          dataIndex: 'createName',
        },
        {
          title: t('routes.retailer.createTime'),
          width: 150,
          dataIndex: 'createTime',
          customRender: ({ record }) => {
            return (
              record.createTime &&
              h(Time, {
                value: record.createTime,
                mode: 'datetime',
              })
            );
          },
        },
        {
          title: t('common.state'),
          dataIndex: 'status',
          width: 90,
          customRender: ({ record }) => {
            if (!Reflect.has(record, 'pendingStatus')) {
              record.pendingStatus = false;
            }
            return h(Switch, {
              checked: record.status == '0',
              style: 'width: 90px',
              checkedChildren: t('routes.retailer.form.enable'),
              unCheckedChildren: t('routes.retailer.form.stopUsing'),
              loading: false,
              onChange: async (checked: boolean) => {
                record.pendingStatus = true;
                const newStatus = checked ? '0' : '1';
                await banOrUnBan({ id: record.id, status: newStatus });
                if (checked) {
                  Reflect.set(record, 'status', newStatus);
                } else {
                  Reflect.set(record, 'status', newStatus);
                }
                reload();
                createMessage.success(t('common.optSuccess'));
              },
            });
          },
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 150,
        autoSubmitOnEnter: true,
        schemas: [
          {
            field: 'agentName',
            label: t('routes.retailer.name'),
            component: 'Input',
            componentProps: {
              maxLength: 100,
            },
            colProps: {
              xl: 10,
              xxl: 10,
            },
          },
        ],
      };
      const [registerTimeTable, { reload }] = useTable({
        api: listApi,
        columns: refundTimeTableSchema,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        searchInfo: searchInfo,
        // beforeFetch:(T)=>{
        //   T.type = searchInfo.type
        //   console.log('beforeFetch',T,searchInfo)
        //   return T
        // },
        actionColumn: {
          width: 180,
          title: t('common.operating'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        canResize: true,
      });
      function tabChange(val: string) {
        console.log('tabChange', val);
        reload();
      }
      async function handleDelete(record: Recordable) {
        console.log('点击了删除', record);
        await DelAndUpload({ id: record.id });
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      function handleOpen(record: Recordable) {
        console.log('点击了启用', record);
      }
      function handleAdd() {
        openAddModal(true, {});
      }
      function headleDetails(record: Recordable) {
        openAddModal(true, record);
      }
      function handleEdit(record: Recordable) {
        openEditModal(true, record);
      }
      return {
        registerTimeTable,
        handleDelete,
        handleOpen,
        tabChange,
        reload,
        registerAddModal,
        registerEditModal,
        openAddModal,
        handleEdit,
        getCheckPerm,
        t,
        searchInfo,
        handleAdd,
        headleDetails,
      };
    },
  });
</script>
