<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <gro-customer-search :data="activityInfo" @search="reload" />
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="syliveCustomerTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            class="ele-btn-icon"
            icon="el-icon-dcustomerload"
            @click="exportData"
          >
            导出客户
          </el-button>
          <el-button
            size="small"
            icon="el-icon-upload2"
            class="ele-btn-icon"
            @click="openImport"
          >
            导入客户
          </el-button>
        </template>
        <template v-slot:useStatus="{ row }">
          <span
            :class="row.useStatus == 2 ? 'ele-text-success' : 'ele-text-danger'"
          >
            {{ row.useStatusName }}
          </span>
        </template>
        <template v-slot:action="{ row }">
          <el-link
            v-if="row.useStatus != 1"
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="openDetail(row)"
          >
            详情
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 导入弹窗 -->
    <gro-customer-import :visible.sync="showImport" @done="reload" />
  </div>
</template>

<script>
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import GroCustomerSearch from './components/gro-customer-search.vue';
  import { getActivityInfo } from '@/api/sylive/activity';
  import {
    listGroupsCustomer,
    exportGroupsCustomer
  } from '@/api/sylive/groups-customer';
  import { utils, writeFile } from 'xlsx';
  import GroCustomerImport from './components/gro-customer-import';
  const ROUTE_PATH = '/sylive/groups-customer';

  export default {
    name: 'syliveGroupsCustomer',
    components: {
      GroCustomerImport,
      GroCustomerSearch
    },
    data() {
      return {
        title: '客户列表',
        activityId: null,
        activityInfo: { statusAry: [], visitTagAry: [] },
        // 加载状态
        loading: true,
        showDetail: false,
        showStatus: false,
        showImport: false,
        current: [],
        currentStatus: {},
        useType: 0,
        // 表格列配置
        columns: []
      };
    },
    methods: {
      /* 打开导入弹窗 */
      openImport() {
        this.showImport = true;
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        this.useType = where ? where.useType : 0;
        const result = await listGroupsCustomer({
          ...where,
          ...order,
          page,
          limit,
          activityId: this.activityId
        });
        if (!order.sort && result.columns) {
          this.columns = result.columns;
        }
        return { count: result.count, list: result.list };
      },
      query() {
        this.loading = true;
        getActivityInfo({
          activityId: Number(this.activityId),
          type: 'customer'
        })
          .then((data) => {
            this.loading = false;
            // 修改页签标题
            if (this.$route.path === ROUTE_PATH) {
              this.activityInfo = data;
              this.title = data.title + '的客户列表';
              setPageTabTitle(this.title);
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 刷新表格 */
      reload(where) {
        this.useType = where ? where.useType : 0;
        this.$refs.table.reload({ page: 1, where: where });
      },
      /* 导出数据 */
      exportData() {
        const loading = this.$loading({ lock: true });
        this.$refs.table.doRequest(({ where, order }) => {
          const activityId = this.activityId;
          exportGroupsCustomer({ ...where, ...order, activityId })
            .then((data) => {
              loading.close();
              const array = [data.columns];
              data.list.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)
                  }
                },
                this.title + '.xlsx'
              );
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          const activityId = this.$route.query.id;
          if (!activityId || activityId == this.activityId) {
            return;
          }
          this.activityId = activityId;
          this.query();
          if (this.$refs.table) {
            this.$refs.table.reload({ page: 1 });
          }
        },
        immediate: true
      }
    }
  };
</script>
