<template>
  <div class="ele-body ele-body-card" v-loading="loading">
    <el-row :gutter="15">
      <el-col
        v-for="(item, index) in statistics.activityData1.list"
        :key="index"
        :style="statistics.activityData1.style"
      >
        <el-card class="analysis-chart-card" shadow="never">
          <template v-slot:header>
            <div class="ele-cell">
              <div class="ele-cell-content">{{ item.name }}</div>
            </div>
          </template>
          <div class="analysis-chart-card-num ele-text-heading">
            {{ item.value }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col
        v-for="(item, index) in statistics.activityData2.list"
        :key="index"
        :style="statistics.activityData2.style"
      >
        <el-card :class="item.url != '' ? 'el-header_add' : ''" shadow="never">
          <template v-slot:header>
            <div class="ele-cell" @click="openPiechart(item.url, item.name)">
              <div class="ele-cell-content">{{ item.name }}</div>
              <i class="el-icon-arrow-right" v-if="item.url != ''"></i>
            </div>
          </template>
          <div
            class="analysis-chart-card-num ele-text-heading"
            @click="openPiechart(item.url, item.name)"
          >
            {{ item.value }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col
        v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }"
        style="width: 50%"
      >
        <el-card shadow="never" body-style="padding: 0px">
          <div class="ele-table-tool ranking-order-header">
            <div class="ele-table-tool-title">
              <div class="ele-table-tool-title-label">
                <h6 style="font-size: 15px">
                  {{ preheatingChartOption.title }}
                </h6>
              </div>
            </div>
            <div class="list-tool-item">
              <el-select
                v-model="itemIdPreheating"
                clearable
                class="ele-fluid"
                @input="queryFunnel('left')"
              >
                <el-option
                  v-for="item in statistics.tableData.goods"
                  :key="item.value"
                  :value="item.value"
                  :label="item.name"
                />
              </el-select>
            </div>
          </div>
          <div
            style="width: 500px; margin: 0 auto; padding-top: 7px"
            v-if="preheatingChartOption.title"
          >
            <v-chart
              ref="funnelChart"
              style="width: 500px; height: 303px"
              :option="preheatingChartOption.chartOption"
            />
          </div>
          <ele-empty v-else v-show="true"></ele-empty>
        </el-card>
      </el-col>
      <el-col
        v-bind="styleResponsive ? { lg: 3, md: 8 } : { span: 3 }"
        style="width: 50%"
      >
        <el-card shadow="never" body-style="padding: 0px">
          <div class="ele-table-tool ranking-order-header">
            <div class="ele-table-tool-title">
              <div class="ele-table-tool-title-label">
                <h6 style="font-size: 15px">{{ liveChartOption.title }}</h6>
              </div>
            </div>
            <div class="list-tool-item">
              <el-select
                v-model="itemIdLive"
                clearable
                class="ele-fluid"
                @input="queryFunnel('right')"
              >
                <el-option
                  v-for="item in statistics.tableData.goods"
                  :key="item.value"
                  :value="item.value"
                  :label="item.name"
                />
              </el-select>
            </div>
          </div>
          <div
            style="width: 500px; margin: 0 auto; padding-top: 7px"
            v-if="liveChartOption.title"
          >
            <v-chart
              ref="funnelChart"
              style="width: 500px; height: 303px"
              :option="liveChartOption.chartOption"
            />
          </div>
          <ele-empty v-else v-show="true"></ele-empty>
        </el-card>
      </el-col>
    </el-row>
    <watchOrderLinechart />
    <level-table
      v-for="(item, index) in statistics.levelData"
      :key="index"
      :data="statistics.tableData"
      :level="item.value"
      :title="item.title"
    />
    <biz-table :data="statistics.tableData" />
    <consultant-table :data="statistics.tableData" />
    <customer-table :data="statistics.tableData" />
  </div>
</template>

<script>
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import {
    getGroupsStatistics,
    getGroupsStatisticsFunnel
  } from '@/api/sylive/groups-statistics';
  const ROUTE_PATH = '/sylive/groups-statistics';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { FunnelChart } from 'echarts/charts';
  import { TooltipComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import 'echarts-wordcloud';
  import { echartsMixin } from '@/utils/echarts-mixin';
  import LevelTable from './components/level-table.vue';
  import BizTable from './components/biz-table.vue';
  import ConsultantTable from './components/consultant-table.vue';
  import CustomerTable from './components/customer-table.vue';
  import watchOrderLinechart from './components/watchOrder-linechart.vue';

  use([CanvasRenderer, TooltipComponent, FunnelChart]);

  export default {
    name: 'SyliveGroupsStatistics',
    components: {
      VChart,
      LevelTable,
      BizTable,
      ConsultantTable,
      CustomerTable,
      watchOrderLinechart
    },
    mixins: [echartsMixin(['funnelChart'])],
    data() {
      return {
        activityId: null,
        itemIdRanking: '',
        itemIdPreheating: '',
        itemIdLive: '',
        statistics: {
          activityData1: { list: [], style: '' },
          activityData2: { list: [], style: '' },
          levelData: [],
          tableData: { days: [], goods: [], levels: [] }
        },
        loading: true,
        browseRank: { area: [], biz: [], consultant: [] },
        subscribeRank: { area: [], biz: [], consultant: [] },
        watchRank: { area: [], biz: [], consultant: [] },
        orderRank: { area: [], biz: [], consultant: [] },
        // 词云图表配置
        preheatingChartOption: { title: '', chartOption: {} },
        liveChartOption: { title: '', chartOption: {} }
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      /* 打开饼状图 */
      openPiechart(url, title) {
        if (url != '') {
          this.$router.replace(url + '&title=' + title);
        }
      },
      query() {
        this.loading = true;
        getGroupsStatistics(Number(this.activityId))
          .then((data) => {
            this.loading = false;
            this.$util.assignObject(this.statistics, {
              ...data
            });
            if (data.tableData.goods[0]) {
              this.itemIdPreheating = data.tableData.goods[0]['value'];
              this.itemIdLive = data.tableData.goods[0]['value'];
            }
            this.queryFunnel();
            // 修改页签标题
            if (this.$route.path === ROUTE_PATH) {
              setPageTabTitle(data.title + '的分组数据统计');
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      queryFunnel(show) {
        let itemId = '';
        if (show == 'left') {
          itemId = this.itemIdPreheating;
        } else if (show == 'right') {
          itemId = this.itemIdLive;
        } else {
          itemId = this.itemIdPreheating;
        }
        getGroupsStatisticsFunnel({
          activityId: this.activityId,
          show: show,
          itemId: itemId
        }).then((data) => {
          //浏览转化漏斗((预热阶段)
          if (data.funnelPreheating.title) {
            this.preheatingChartOption.title = data.funnelPreheating.title;
            this.preheatingChartOption.chartOption = {
              series: [
                {
                  name: 'Expected',
                  type: 'funnel',
                  top: '1%',
                  bottom: '5%',
                  left: '2%',
                  width: '72%',
                  label: {
                    position: 'right',
                    formatter: '{b}'
                  },
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    opacity: 0.7
                  },
                  data: data.funnelPreheating.expectedData
                },
                {
                  name: 'Actual',
                  type: 'funnel',
                  top: '1%',
                  bottom: '5%',
                  left: '7%',
                  width: '62%',
                  maxSize: '62%',
                  label: {
                    position: 'inside',
                    formatter: '{c}',
                    color: '#000'
                  },
                  itemStyle: {
                    opacity: 0.4,
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  data: data.funnelPreheating.actualData,
                  z: 100
                }
              ]
            };
          }
          //浏览转化漏斗(直播阶段)
          if (data.funnelLive.title) {
            this.liveChartOption.title = data.funnelLive.title;
            this.liveChartOption.chartOption = {
              series: [
                {
                  name: 'Expected',
                  type: 'funnel',
                  top: '1%',
                  bottom: '5%',
                  left: '2%',
                  width: '72%',
                  label: {
                    position: 'right',
                    formatter: '{b}'
                  },
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    opacity: 0.7
                  },
                  data: data.funnelLive.expectedData
                },
                {
                  name: 'Actual',
                  type: 'funnel',
                  top: '1%',
                  bottom: '5%',
                  left: '7%',
                  width: '62%',
                  maxSize: '62%',
                  label: {
                    position: 'inside',
                    formatter: '{c}',
                    color: '#000'
                  },
                  itemStyle: {
                    opacity: 0.4,
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  data: data.funnelLive.actualData,
                  z: 100
                }
              ]
            };
          }
        });
      }
    },
    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();
        },
        immediate: true
      }
    }
  };
</script>

<style lang="scss" scoped>
  /* 人数分布排名 */
  .monitor-user-count-item {
    margin-bottom: 8px;
    :deep(.el-progress-bar__outer) {
      background: none;
    }
    .ele-cell-content {
      padding-right: 10px;
    }
  }
  .analysis-chart-card-num {
    font-size: 30px;
  }

  .analysis-chart-card-content {
    height: 40px;
    box-sizing: border-box;
    margin-bottom: 12px;
  }

  .analysis-chart-card-text {
    padding-top: 12px;
  }

  .workplace-table-card {
    :deep(.el-table tbody > .el-table__row:last-child td) {
      border-bottom: none;
    }

    :deep(.el-table:before) {
      display: none;
    }
  }

  .el-header_add .ele-cell {
    color: #409eff;
    cursor: pointer;
  }
  .el-header_add .analysis-chart-card-num {
    color: #409eff;
    cursor: pointer;
  }
  .ranking-order-header {
    border-bottom: 1px solid var(--border-color-lighter);
    box-sizing: border-box;
    padding: 10px 17px;
  }
</style>
