<template>
  <el-card shadow="never">
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      title="顾问统计"
      :columns="columns"
      :datasource="datasource"
      size="mini"
    >
      <template v-slot:toolkit>
        <div class="list-tool-item">
          <el-select
            v-model="day"
            clearable
            class="ele-fluid"
            @input="updateValue"
          >
            <el-option
              v-for="item in data.days"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>
        </div>
        <div class="list-tool-divider">
          <el-divider direction="vertical" />
        </div>
        <div class="list-tool-item">
          <el-select
            v-model="itemId"
            clearable
            class="ele-fluid"
            @input="updateValue"
          >
            <el-option
              v-for="item in data.goods"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>
        </div>
        <div class="list-tool-divider">
          <el-divider direction="vertical" />
        </div>
        <el-button
          size="small"
          type="primary"
          class="ele-btn-icon"
          icon="el-icon-download"
          @click="exportData"
        >
          导出
        </el-button>
        <div class="list-tool-divider">
          <el-divider direction="vertical" />
        </div>
      </template>
    </ele-pro-table>
  </el-card>
</template>

<script>
  import {
    getGroupsStatisticsConsultant,
    exportGroupsStatisticsConsultant
  } from '@/api/sylive/groups-statistics';
  import { utils, writeFile } from 'xlsx';

  export default {
    props: { data: Object },
    data() {
      return {
        activityId: null,
        day: '',
        itemId: '',
        // 表格列配置
        columns: []
      };
    },
    methods: {
      /* 表格数据源 */
      async datasource({ page, limit, order }) {
        const result = await getGroupsStatisticsConsultant({
          ...order,
          page,
          limit,
          activityId: this.activityId,
          day: this.day,
          itemId: this.itemId,
          levels: this.data.levels
        });
        if (!order.sort && result.columns) {
          this.columns = result.columns;
        }
        return { count: result.count, list: result.list };
      },
      /* 导出数据 */
      exportData() {
        const array = [];
        const arrayItem = [];
        this.columns.forEach((d) => {
          arrayItem.push(d.label);
        });
        array.push(arrayItem);
        const loading = this.$loading({ lock: true });
        this.$refs.table.doRequest(({ where, order }) => {
          exportGroupsStatisticsConsultant({
            ...where,
            ...order,
            activityId: this.activityId,
            day: this.day,
            itemId: this.itemId,
            levels: this.data.levels
          })
            .then((data) => {
              loading.close();
              data.forEach((d) => {
                let arrayItem = [];
                for (let key in d) {
                  arrayItem.push(d[key]);
                }
                array.push(arrayItem);
              });
              writeFile(
                {
                  SheetNames: ['Sheet1'],
                  Sheets: {
                    Sheet1: utils.aoa_to_sheet(array)
                  }
                },
                '顾问统计.xlsx'
              );
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        });
      },
      /* 更新选中数据 */
      updateValue() {
        this.$refs.table.reload({ page: 1 });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== '/sylive/groups-statistics') {
            return;
          }
          const activityId = this.$route.query.id;
          if (!activityId || activityId == this.activityId) {
            return;
          }
          this.activityId = activityId;
          setTimeout(() => {
            if (!this.itemId && this.data.goods[0]) {
              this.itemId = this.data.goods[0]['value'];
            }
            if (this.$refs.table) {
              this.$refs.table.reload({ page: 1 });
            }
          }, 1600);
        },
        immediate: true
      }
    }
  };
</script>
<style lang="scss" scoped>
  .list-tool-divider {
    padding: 0 12px;
  }
</style>
