<script setup lang="tsx">
import { computed } from 'vue';
import { NButton } from 'naive-ui';
// import dayjs from 'dayjs';
// import { fetchGetStoreList } from '@/service/api/xsb-manage/store-info';
import { fetchGetChannelList, fetchList } from '@/service/api/government/claim-records';
import { commonExport } from '@/utils/common';
import { useTable } from '@/components/zt/Table/hooks/useTable';

const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'id',
    title: '领取流水号',
    align: 'left',
    width: 200
  },
  {
    key: 'topChannelName',
    title: '所属企业',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'userName',
    title: '员工姓名',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'mobile',
    title: '员工电话',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'receivePoints',
    title: '领取积分',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'receiveTime',
    title: '领取时间',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  }
];

const [registerTable, { getTableData, getSeachForm, setTableLoading }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '所属企业',
        component: 'ApiSelect',
        field: 'channelId',
        componentProps: {
          api: fetchGetChannelList,
          resultFeild: 'data',
          labelFeild: 'channelName',
          valueFeild: 'id'
        }
      },
      {
        label: '员工姓名',
        component: 'NInput',
        field: 'userName'
      },
      {
        label: '员工电话',
        component: 'NInput',
        field: 'mobile'
      },

      {
        label: '领取时间',
        component: 'NDatePicker',
        field: 'createTime',
        componentProps: {
          type: 'datetimerange',
          defaultTime: ['00:00:00', '23:59:59']
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'skuId',
    title: '领取列表',
    showAddButton: false,
    scrollX: 1800,
    fieldMapToTime: [['createTime', ['receiveStartTime', 'receiveEndTime']]]
  }
});

const tableData = computed(() => {
  return getTableData();
});

async function handleExport() {
  setTableLoading(true);
  try {
    await commonExport('/smqjh-system/app-api/v1/claim/export', getSeachForm(), '领取列表.xlsx');
  } finally {
    setTableLoading(false);
  }
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchList" @register="registerTable">
      <template #prefix="{ loading }">
        <NSpace>
          <NButton size="small" :disabled="tableData.length == 0" :loading="loading" @click="handleExport">
            导出全部
          </NButton>
        </NSpace>
      </template>
    </ZTable>
  </LayoutTable>
</template>

<style scoped></style>
