<template>
  <div class="p-4">
    <!-- <GrowCard :loading="loading" class="enter-y" /> -->
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleExport">导出数据</a-button>
      </template>
    </BasicTable>
    <!-- <div class="md:flex enter-y">
      <div class="md:w-1/2 enter-y">
        <Card class="w-full">
          <VisitAnalysisBar :loading="loading" />
        </Card>
      </div>
      <div class="!md:mx-2"></div>
      <Card class="md:w-1/2 enter-y">

        <VisitAnalysis :loading="loading" />
      </Card>
    </div>
    <div class="md:flex enter-y mt-4">
      <Card class="md:w-1/2 md:w-full"> </Card>
    </div> -->
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { BasicTable, useTable, BasicColumn, FormProps } from '/@/components/Table';
  // import { useI18n } from '/@/hooks/web/useI18n';
  // import GrowCard from './components/GrowCard.vue';
  import {
    // bulletChatApi,
    userStaticsApi,
    bulletChatStaticsApi,
    companyChatExportApi,
  } from '../../../api/dashboard/analysis';
  import { formatToDate } from '/@/utils/dateUtil';
  import dayjs from 'dayjs';

  const loading = ref(true);
  // const { t } = useI18n();

  const columns: BasicColumn[] = [
    {
      title: '企业名称',
      dataIndex: 'key1',
      width: 120,
    },
    {
      title: '房间管理',
      dataIndex: 'key2',
      width: 120,
    },
    {
      title: '直播场景名称',
      dataIndex: 'key3',
      width: 120,
    },
    {
      title: '主持人',
      dataIndex: 'key4',
      width: 120,
    },
    {
      title: '总观看人数',
      dataIndex: 'key5',
      width: 120,
    },
    {
      title: '总直播时长',
      dataIndex: 'key6',
      width: 120,
    },
    {
      title: '总分享人数',
      dataIndex: 'key6',
      width: 120,
    },
  ];
  const searchForm: Partial<FormProps> = {
    labelWidth: 100,
    schemas: [
      {
        field: 'companyId',
        label: '请选择企业',
        component: 'ApiSelect',
        required: true,
        componentProps: {
          // api: ShippingListApi,
          // resultField: 'list',
          // labelField: 'name',
          // valueField: 'id',
          // immediate: true,
          // onChange: function (_, opt) {
          //   // Reflect.set(modalRecord, 'shippingName', opt.label);
          // },
          // params: {
          //   page: 1,
          //   limit: 1000,
          // },
        },
        colProps: {
          xl: 5,
          xxl: 5,
        },
      },
      {
        field: 'roomId',
        label: '请选择房间',
        component: 'ApiSelect',
        colProps: {
          xl: 5,
          xxl: 5,
        },
        componentProps: {},
      },
      {
        field: 'sceneId',
        label: '请选择直播场景',
        labelWidth: 130,
        component: 'ApiSelect',
        colProps: {
          xl: 5,
          xxl: 5,
        },
        componentProps: {},
      },
      {
        field: 'time',
        label: '时间段',
        component: 'RangePicker',
        colProps: {
          xl: 5,
          xxl: 5,
        },
        componentProps: {},
      },
    ],
  };

  const today = formatToDate(dayjs(new Date()));
  const priorDate = formatToDate(dayjs(new Date().setDate(new Date().getDate() - 30)));

  const searchInfo = reactive({
    liveRoomId: '',
    limit: 20,
    page: 1,
    time: [priorDate, today],
  });

  const [registerTable] = useTable({
    title: '房间留言状态',
    columns: columns,
    useSearchForm: true,
    formConfig: searchForm,
    api: bulletChatStaticsApi,
    afterFetch: function (data) {
      console.log('data', data);

      return data;
    },
    searchInfo: searchInfo,
  });

  onMounted(async () => {
    await userStaticsApi(searchInfo);
  });
  async function handleExport() {
    await companyChatExportApi(searchInfo);
    // const downloadBlob = new Blob([data], {
    //   type: 'text/csv',
    // });
    // const url = URL.createObjectURL(downloadBlob);
    // const a: HTMLAnchorElement = document.createElement('a');
    // document.body.appendChild(a);
    // a.style.display = 'none';
    // a.href = url;
    // const name = new Date().getTime();
    // a.download = `${name}.csv`;
    // a.click();
    // window.URL.revokeObjectURL(url);
  }

  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>
