<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>
      </template>
    </ele-pro-table>
  </el-card>
</template>

<script>
  import { pageStatisticsConsultant } from '@/api/sylive/activity';

  export default {
    props: { data: { days: [], goods: [] } },
    data() {
      return {
        day: '',
        itemId: '',
        // 表格列配置
        columns: [
          {
            prop: 'consultantName',
            label: '顾问名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'browse',
            label: '浏览数（人）',
            align: 'center',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'subscribe',
            label: '预约数（人）',
            align: 'center',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'watch',
            label: '观看数（人）',
            align: 'center',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'order',
            label: '订单数（单）',
            align: 'center',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'livePV',
            label: '观看数（人次）',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'watchDuration',
            label: '人均观看（分）',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          }
        ]
      };
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, order }) {
        const activityId = this.$route.query.id;
        if (!activityId) {
          return;
        }
        const day = this.day;
        const itemId = this.itemId;
        return pageStatisticsConsultant({
          ...order,
          page,
          limit,
          activityId,
          day,
          itemId
        });
      },
      /* 更新选中数据 */
      updateValue() {
        this.$refs.table.reload({ page: 1 });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== '/sylive/activity/statistics') {
            return;
          }
          if (this.$refs.table) {
            this.$refs.table.reload({ page: 1 });
          }
        },
        immediate: true
      }
    }
  };
</script>
<style lang="scss" scoped>
  .list-tool-divider {
    padding: 0 12px;
  }
</style>
