<template>
  <div class="report">
    <select-time @handleSelectTime="handleSelectTime($event, 1)" />
    <div class="ins_statistics">
      <div class="content">
        <pie-echarts :option-data="dataValue.clubCount.data" :title="'机构统计'">
          <template #title>
            <div class="label">机构统计</div>
            <div class="nums">{{ dataValue.clubCount.count || 0 }}个</div>
          </template>
        </pie-echarts>
      </div>
      <div class="content">
        <pie-dub-echarts :option-data1="dataValue.clubActivityCount.data" :option-data2="dataValue.clubActivityCount.data">
          <template #title>
            <div class="label">机构活跃统计</div>
            <div class="nums">{{ dataValue.clubActivityCount.count || 0 }}个</div>
          </template>
          <template #echarts1>
            <div class="e-title">活跃机构</div>
            <div class="e-title">{{ dataValue.clubActivityCount.data['活跃机构'] || 0 }}个</div>
          </template>
          <template #echarts2>
            <div class="e-title">不活跃机构</div>
            <div class="e-title">{{ dataValue.clubActivityCount.data['不活跃机构'] || 0 }}个</div>
          </template>
        </pie-dub-echarts>
      </div>
    </div>
    <select-time :time-list="timeList" :active-link-id="5" @handleSelectTime="handleSelectTime($event, 2)" />
    <div class="ins_trends">
      <line-echarts :option-data="dataValue.addClubCount.data" />
      <line-echarts :echarts-name="'机构订单趋势'" :option-data="dataValue.clubOrder.data" />
    </div>
    <select-time @handleSelectTime="handleSelectTime($event, 3)" />
    <div class="ins_deStatistics">
      <div class="content">
        <pie-dub-echarts :option-data1="dataValue.remarks.data" :option-data2="dataValue.remarks.data" :title="'咨询统计'">
          <template #title>
            <div class="label">咨询统计</div>
            <div class="nums">{{ dataValue.remarks.count }}个</div>
          </template>
          <template #echarts1>
            <div class="e-title">机构咨询</div>
            <div class="e-title">{{ dataValue.remarks.data['机构咨询'] }}个</div>
          </template>
          <template #echarts2>
            <div class="e-title">游客咨询</div>
            <div class="e-title">{{ dataValue.remarks.data['游客咨询'] }}个</div>
          </template>
        </pie-dub-echarts>
      </div>
      <div class="content">
        <pie-echarts :option-data="dataValue.record.data" :title="'访问统计'">
          <template #title>
            <div class="label">访问统计</div>
            <div class="nums">{{ dataValue.record.count }}个</div>
          </template>
        </pie-echarts>
      </div>
    </div>
    <div class="hot-content">
      <hot-tips :columns="bandColumns" :hot-data="dataValue.brandProductSalesRecords">
        <template #head>
          <div class="label">热门品牌</div>
          <div class="tips">销量排名前10的品牌</div>
        </template>
      </hot-tips>
      <hot-tips :columns="storeColumns" :hot-data="dataValue.productSalesRecords">
        <template #head>
          <div class="label">热门商品</div>
          <div class="tips">销量排名前10的商品</div>
        </template>
      </hot-tips>
      <hot-tips :columns="keyColumns" :hot-data="dataValue.keywords">
        <template #head>
          <div class="label">热门搜索词</div>
          <div class="tips">排名前10的搜索词</div>
        </template>
      </hot-tips>
    </div>
  </div>
</template>

<script>
import SelectTime from './components/select-time'
import PieEcharts from './components/pei-echarts.vue'
import PieDubEcharts from './components/pie-dub-echarts.vue'
import LineEcharts from './components/line-echarts.vue'
import HotTips from './components/hot-tips.vue'
import { getIns_statistics, getIns_orderTrends, getIns_accessStatistics } from '@/api/mallPortrait/disitrib'

export default {
  components: {
    SelectTime,
    PieEcharts,
    PieDubEcharts,
    LineEcharts,
    HotTips
  },
  data() {
    return {
      bandColumns: [{ text: '品牌logo', label: 'image', labelWidth: 80 }, { text: '品牌名称', label: 'name' }, { text: 'TOP', label: 'top', labelWidth: 80 }],
      storeColumns: [{ text: '商品图片', label: 'image', labelWidth: 80 }, { text: '商品名称', label: 'name' }, { text: 'TOP', label: 'top', labelWidth: 80 }],
      keyColumns: [{ text: '搜索词', labelWidth: 120 }, { text: 'TOP', label: 'top' }],
      dataValue: {
        // 机构活跃度统计
        clubActivityCount: {
          data: {
            '不活跃机构': 0,
            '活跃机构': 0
          }
        },
        // 机构统计
        clubCount: {},
        // 机构新增趋势
        addClubCount: {},
        // 机构订单趋势
        clubOrder: {},
        // 机构访问统计
        record: {},
        // 机构咨询统计
        remarks: {
          data: {
            '游客咨询': 0,
            '机构咨询': 0
          }
        },
        // 热门品牌
        brandProductSalesRecords: [],
        // 热门商品
        productSalesRecords: [],
        // 热搜词
        keywords: []
      },
      timeList: [{
        id: 5,
        content: '近一周'
      },
      {
        id: 2,
        content: '近1月'
      },
      {
        id: 3,
        content: '近6月'
      },
      {
        id: 4,
        content: '近1年'
      }]
    }
  },
  methods: {
    /**
     * 获取机构统计报表
     */
    async getIns_statistics(e) {
      const { data } = await getIns_statistics({ startCreateTime: e[0], endCreateTime: e[1] })
      this.dataValue.clubActivityCount = data.clubActivityCount
      this.dataValue.clubCount = data.clubCount
    },
    async getIns_orderTrends(e) {
      const { data } = await getIns_orderTrends({ startCreateTime: e[0], endCreateTime: e[1] })
      this.dataValue.addClubCount = data.clubCount
      this.dataValue.clubOrder = data.clubOrder
    },
    async getIns_accessStatistics(e) {
      const { data } = await getIns_accessStatistics({ startCreateTime: e[0], endCreateTime: e[1] })
      this.dataValue.record = data.record
      this.dataValue.remarks = data.remarks
      this.dataValue.brandProductSalesRecords = data.brandProductSalesRecords
      this.dataValue.productSalesRecords = data.productSalesRecords
      this.dataValue.keywords = data.keywords
    },
    handleSelectTime(e, num) {
      const obj = {
        1: () => this.getIns_statistics(e),
        2: () => this.getIns_orderTrends(e),
        3: () => this.getIns_accessStatistics(e)
      }
      obj[num]()
    }
  }
}
</script>

<style lang="scss" scoped>
.report {
  padding: 20px;
  .ins_statistics {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1.5fr;
    grid-gap: 1vw;
    margin-bottom: 14px;
  }
  .ins_deStatistics {
    display: grid;
    align-items: center;
    grid-template-columns: 1.5fr 1fr;
    grid-gap: 1vw;
    margin-bottom: 14px;
  }
}
.label {
  font-size: 16px;
  font-weight: 600;
  margin-right: 20px;
}
.nums {
  font-size: 16px;
  color: rgb(0, 174, 255);
}
.tips {
  font-size: 14px;
  color: #ccc;
}
.e-title {
  font-size: 14px;
  color: #ccc;
  text-align: center;
}
.hot-content {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  grid-gap: 14px;
}
</style>
