<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">
          <ele-tree-select
            :data="groupsList"
            label-key="groupsName"
            value-key="groupsId"
            v-model="groupsId"
            :clearable="true"
            placeholder="归属"
            :disabled="false"
            :default-expand-all="false"
            :expand-on-click-node="false"
            @input="updateValue"
          />
        </div>
        <div class="list-tool-divider">
          <el-divider direction="vertical" />
        </div>
        <div class="list-tool-item">
          <el-select
            clearable
            v-model="insiders"
            placeholder="内部人员"
            class="ele-fluid"
            @input="updateValue"
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="2" />
          </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 {
    getGroupsStatisticsCustomer,
    exportGroupsStatisticsCustomer
  } from '@/api/sylive/groups-statistics';
  import { listGroups } from '@/api/sylive/groups';
  import { utils, writeFile } from 'xlsx';

  export default {
    props: { data: Object },
    data() {
      return {
        //分组数据
        groupsList: [],
        activityId: null,
        insiders: null,
        groupsId: null,
        itemId: '',
        // 表格列配置
        columns: []
      };
    },
    methods: {
      /* 表格数据源 */
      async datasource({ page, limit, order }) {
        const result = await getGroupsStatisticsCustomer({
          ...order,
          page,
          limit,
          activityId: this.activityId,
          groupsId: this.groupsId,
          insiders: this.insiders,
          itemId: this.itemId,
          levels: this.data.levels
        });
        if (!order.sort && result.columns) {
          this.columns = result.columns;
        }
        return { count: result.count, list: result.list };
      },
      /* 查询分组 */
      groupsQuery() {
        listGroups({ activityId: this.activityId })
          .then((list) => {
            this.groupsList = this.$util.toTreeData({
              data: list,
              idField: 'groupsId',
              parentIdField: 'parentId'
            });
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      /* 导出数据 */
      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 }) => {
          exportGroupsStatisticsCustomer({
            ...where,
            ...order,
            activityId: this.activityId,
            groupsId: this.groupsId,
            insiders: this.insiders,
            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 });
            }
          }, 1700);
          this.groupsQuery();
        },
        immediate: true
      }
    }
  };
</script>
<style lang="scss" scoped>
  .list-tool-divider {
    padding: 0 12px;
  }
</style>
