<template>
  <ele-page flex-table>
    <page-search @search="reload"></page-search>
    <common-table
      ref="pageRef"
      :pageConfig="pageConfig"
      :columns="columns"
      :tools="false"
      show-summary
      :flex-table="false"
    >
      <template #toolbar="{ row }">
        <div>
          <el-radio-group @change="handleStatusChange" v-model="useStatus">
            <el-radio-button label="售后订单实时统计" value="1" />
            <el-radio-button label="售后订单历史统计" value="2" />
          </el-radio-group>
          <el-button
            style="margin-left: 40px"
            type="success"
            plain
            v-permission="'statistic:afterSales:export'"
            @click="handleExportExcel(row)"
          >
            导出EXCEL
          </el-button>
        </div>
      </template>
    </common-table>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import pageSearch from './components/page-search.vue';
  import { useDictData } from '@/utils/use-dict-data';

  defineOptions({ name: 'afterSalesStatistic' });

  const useStatus = ref('1');
  function handleStatusChange(val) {
    useStatus.value = val;
    pageRef.value?.reload();
  }

  /** 表格列配置 */
  const columns = ref([
    { type: 'index', label: '#', align: 'center', width: 80 },
    { label: '售后订单数', prop: 'orderNum', align: 'center' },
    { label: '发出订单数', prop: 'bookNum', align: 'center' },
    { label: '未发订单数', prop: 'price', align: 'center' },
    { label: '客户申请时间', prop: 'createTime', align: 'center' },
    { label: '仓库', prop: 'godownName', align: 'center' },
  ]);

  /** 页面组件实例 */
  const pageRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '/baseinfo/godown/pagelist',
    exportUrl: '/baseinfo/godown/export',
    fileName: '售后统计',
    cacheKey: 'afterSalesStatisticTable'
  });

  //刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }

  //导出excel
  function handleExportExcel() {
    pageRef.value?.exportData('售后统计');
  }
</script>
