<template>
  <div class="home">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户行为数据统计" name="behavior">
        <el-card>
          <div slot="header" class="clearfix">
            <div style="float: left;">
              <CustomTitle title="综合点击率Top20" />
            </div>
          </div>
          <div style="height: 500px;">
            <Echart :options="allOptions" id="可选" height='100%' width="100%" v-if="allOptions"></Echart>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <div style="float: left;font-weight: bold;">
              <CustomTitle title="各类排名Top5" />
            </div>
          </div>

          <el-row>
            <el-col :span="12">
              <div style="height: 250px;">
                <Echart :options="displayOptions" height='100%' width="100%" v-if="displayOptions"></Echart>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="height: 250px;">
                <Echart :options="crOptions" height='100%' width="100%" v-if="crOptions"></Echart>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div style="height: 250px;">
                <Echart :options="virtualOptions" height='100%' width="100%" v-if="virtualOptions"></Echart>
              </div>
            </el-col>
            <!-- <el-col :span="12">
              <Echart :options="options"  height='100%' width="100%" v-if="options"></Echart>
            </el-col> -->
          </el-row>


        </el-card>
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <div style="float: left;font-weight: bold;">
              <CustomTitle title="展览/文物数据统计明细" />
            </div>
            <el-radio-group v-model="currentSortPage" style="float: right;">
              <el-radio :label="2">展览</el-radio>
              <el-radio :label="1">文物</el-radio>
              <el-radio :label="4">精品展</el-radio>
              <el-radio :label="3">虚拟展厅</el-radio>
            </el-radio-group>
          </div>
          <TablePage :data="list.records" :tableTitle="tableTitle">
          </TablePage>
          <el-pagination style="margin: 16px 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="Number(list.current)" :page-sizes="[10, 20, 50, 100]" :page-size="Number(list.size)"
            layout="total, sizes, prev, pager, next, jumper" :total="Number(list.total)" class="pagination">
          </el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="展览及文物数量统计" name="amount">
        <!-- <h3>展览数据</h3> -->
        <el-card>
          <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
            <CustomTitle title="展览数量统计" />
            <el-radio-group v-model="displayRadio" style="float: right;">
              <el-radio :label="1">按地区</el-radio>
              <el-radio :label="2">按博物馆</el-radio>
              <el-radio :label="3">按类型</el-radio>
            </el-radio-group>
          </div>
          <CombinationChart ref="displayChart" v-if="activeName=='amount'" :pieData="displayAmountData" />
        </el-card>
        <el-card style="margin-top:20px ;">
          <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
            <CustomTitle title="文物数量统计" />
            <el-radio-group v-model="crRadio" style="float: right;">
              <el-radio :label="1">按地区</el-radio>
              <el-radio :label="2">按博物馆</el-radio>
              <el-radio :label="3">按类型</el-radio>
              <el-radio :label="4">按年代</el-radio>
            </el-radio-group>
          </div>
          <CombinationChart ref="crChart" v-if="activeName=='amount'" :pieData="crAmountData" />
        </el-card>
        <el-card style="margin-top:20px ;">
          <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">

            <CustomTitle title="虚拟展厅数量统计" />

            <el-radio-group v-model="virtualRadio" style="float: right;">
              <el-radio :label="1">按地区</el-radio>
              <el-radio :label="2">按博物馆</el-radio>
            </el-radio-group>
          </div>
          <CombinationChart ref="virtualChart" v-if="activeName=='amount'" :pieData="virtualAmountData" />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import TablePage from "@/components/Table/TablePage.vue";
  import { title } from "./config";
  import Echart from '@/components/Echarts' //引入echatrs组件
  import { getListByPageSort, getBarMap } from '@/api/user'
  import { getCulturalRelicStatistic } from '@/api/culturalRelic'
  import { getExhibitionStatistic } from '@/api/display'
  import { getVirtualStatistic } from '@/api/vitual'
  import CombinationChart from './components/CombinationChart'
  import CustomTitle from './components/CustomTitle'

  export default {
    name: 'Home',
    components: {
      TablePage, Echart, CombinationChart, CustomTitle
    },
    computed: {
      ...mapGetters([
        'name'
      ]),
      tableTitle() {
        let tableTitle = title
        switch (this.currentSortPage) {
          case 2:
            tableTitle[0].prop = 'title'
            break;
          default:
            tableTitle[0].prop = 'name'
            break;
        }
        return tableTitle;
      },
    },

    data() {
      return {
        activeName: 'behavior',
        displayRadio: 1,
        crRadio: 1,
        virtualRadio: 1,
        list: {
          records: [
          ],
          current: 1,
          size: 10
        },
        allOptions: null,
        displayOptions: null,
        crOptions: null,
        virtualOptions: null,
        currentSortPage: 2,//1-文物；2-展览；3-虚拟展厅；4-精品展览，0-所有。默认0
        displayAmountData: null,
        crAmountData: null,
        virtualAmountData: null,
      }
    },
    watch: {
      currentSortPage(value) {
        this.currentSortPage = value
        this.loadListByPageSort()
      },
      activeName(value) {
        if (value == 'amount') {
          if (this.displayPieData == null) {
            this.getDisplayAmountData()
          }
          if (this.crAmountData == null) {
            this.getCrAmountData()
          }
          if (this.crAmountData == null) {
            this.getVirtualAmountData()
          }
        }
      },
      displayRadio() {
        this.getDisplayAmountData()
      },
      crRadio() {
        this.getCrAmountData()
      },
      virtualRadio() {
        this.getVirtualAmountData()
      },
    },
    mounted() {
      this.getBehaviorData()
      this.loadListByPageSort()
    },
    methods: {
      // 获取行为数据统计图数据
      async getBehaviorData() {
        var pie_color = ['#00A5B9', '#FFD71D', '#F76464', '#56A3FF', '#32D790', '#F4B561', '#7080DB', '#DF7A90',
          '#3CC4EF', '#EF7F3C', '#EF3C81', '#0DBF8C', '#2F73C0', '#C55E18', '#C899FF', '#C6D727',
          '#FF688F', '#87A0DC', '#00D9F7', '#A24EED'
        ];
        let barListAll = []
        var legendList = [];
        let displaySource = [] //展览的数据集
        let virtualSource = []//虚拟展的数据集
        let crSource = []//文物的数据集
        let res = await getBarMap()
        const { allBrowseSortList, culturalRelicSortList, exhibitionSortList, virtualSortList } = res.data
        allBrowseSortList.map(item => {
          let obj = {}
          // if (item.data > 0) {
          obj.name = item.name
          obj.value = item.data
          barListAll.push(obj)
          // }
        })
        culturalRelicSortList.map(item => {
          let obj = {
            "name": item.name,
            "浏览量": item.browseCount,
            "收藏量": item.collectCount,
            "点赞量": item.loveCount
          }
          crSource.push(obj)
        })

        exhibitionSortList.map(item => {
          let obj = {
            "name": item.name,
            "浏览量": item.browseCount,
            "收藏量": item.collectCount,
            "点赞量": item.loveCount
          }
          displaySource.push(obj)
        })

        virtualSortList.map(item => {
          let obj = {
            "name": item.name,
            "浏览量": item.browseCount,
            "收藏量": item.collectCount,
            "点赞量": item.loveCount
          }
          virtualSource.push(obj)
        })

        for (var i = 0; i < barListAll.length; i++) {
          legendList.push(barListAll[i].name);
        }
        this.allOptions = {
          color: pie_color,
          title: {
            show: false,
            text: '',
            textStyle: {
              color: '#333333',
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: 'axis',
            show: true,
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: [{
            show: false,
            left: '2%',
            right: '10%',
            bottom: 0,
            top: '2%',
            containLabel: true
          },
          ],
          // legend: {
          //   bottom: '4%',
          //   right: '10%',
          //   orient: 'vertical',
          //   width: 540,
          //   height: 240,
          //   padding: [14, 20],
          //   backgroundColor: 'rgba(236,246,255,0.30)',
          //   borderWidth: 1,
          //   borderColor: '#E7F2FB',
          //   borderRadius: 4,
          //   icon: 'circle',
          //   itemWidth: 8,
          //   itemHeight: 8,
          //   textStyle: {
          //     color: '#333333',
          //     fontSize: 12,
          //   },
          //   data: legendList,
          // },
          xAxis: [{
            type: 'value',
            gridIndex: 0,
            name: '次',
            nameTextStyle: {
              color: '#9B9B9B',
              fontSize: 14
            },
            axisLabel: {
              color: '#727272',
              fontSize: 14,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#333333',
                opacity: 0.35,
              }
            },
            axisTick: {
              show: true,
              inside: true,
              lineStyle: {
                color: '#333333',
                opacity: 0.35,
              }
            },
            splitLine: {
              show: false
            },
            show: false
          }],
          yAxis: [{
            type: 'category',
            gridIndex: 0,
            data: legendList,
            inverse: true,
            axisLabel: {
              color: '#727272',
              fontSize: 14,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#333333',
                opacity: 0.35,
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }],
          series: [{
            name: '浏览量',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: barListAll,
            label: {
              show: true,
              position: 'right', // 位置
              color: '#303133',
              fontSize: 14,
              distance: 15, // 距离
              formatter: '{c} 次' // 这里是数据展示的时候显示的数据
            }, // 柱子上方的数值
            barWidth: 20,
            itemStyle: {
              color: '#52A8FF',
              normal: {
                borderRadius: [0, 8, 8, 0],
                color: function (params) {
                  // 定义一个颜色集合
                  let colorList = [
                    '#52A8FF',
                    '#00B389',
                    '#FFA940',
                    '#FF5A57',
                    '#29EFC4',
                    '#F8AEA4',
                    '#FFC53D',
                    '#009982',
                    '#C099FC',
                    '#F5855F',
                  ];
                  // 对每个bar显示一种颜色
                  return colorList[params.dataIndex];
                },
              },
              barBorderRadius: [0, 10, 10, 0]
            }
          },]
        }


        this.crOptions = {
          title: {
            text: '文物排行TOP5',
            left: '5%',
            top: '15',
            textStyle: {
              fontWeight: '400',
              color: '#000',
              fontSize: 14,
            },
          },
          legend: { "top": "10", right: "60" },
          tooltip: {},
          color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
          dataset: {
            dimensions: ['name', '浏览量', '收藏量', '点赞量',],
            source: crSource,
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              rotate: -18,
              color: '#606266',
              interval: 0,
              margin: 20,
              align: 'center',
              textStyle: {
                fontSize: 10
              }
            }
          },
          yAxis: {},
          series: [
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
          ],
        };
        this.displayOptions = {
          title: {
            text: '展览排行TOP5',
            left: '5%',
            top: '15',
            textStyle: {
              fontWeight: '400',
              color: '#000',
              fontSize: 14,
            },
          },
          tooltip: {},
          color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
          dataset: {
            dimensions: ['name', '浏览量', '收藏量', '点赞量',],
            source: displaySource,
          },
          xAxis: {
            type: 'category', axisLabel: {
              rotate: -18,
              color: '#606266',
              interval: 0,
              margin: 20,
              align: 'center',
              textStyle: {
                fontSize: 10
              }
            }
          },
          yAxis: {},
          series: [
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
            // {
            //   type: 'bar',
            //   barWidth: '10%',
            //   itemStyle: {
            //     normal: {
            //       barBorderRadius: 6,
            //     },
            //   },
            // },
          ],
        };
        this.virtualOptions = {
          // legend: { "top": "20", right: "60" },
          title: {
            text: '虚拟展排行TOP5',
            left: '5%',
            top: '15',
            textStyle: {
              fontWeight: '400',
              color: '#000',
              fontSize: 14,
            },
          },
          tooltip: {},
          color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
          dataset: {
            dimensions: ['name', '浏览量', '收藏量', '点赞量',],
            source: virtualSource,
          },
          xAxis: {
            type: 'category', axisLabel: {
              rotate: -18,
              color: '#606266',
              interval: 0,
              margin: 20,
              align: 'center',
              textStyle: {
                fontSize: 10
              }
            }
          },
          yAxis: {},
          series: [
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
            {
              type: 'bar',
              barWidth: '10',
              itemStyle: {
                normal: {
                  barBorderRadius: 6,
                },
              },
            },
          ],
        };


      },
      // 获取行为数据明细
      async loadListByPageSort() {
        const params = {
          type: this.currentSortPage
        }
        let res = await getListByPageSort(params)
        let data = res.data
        switch (this.currentSortPage) {
          case 1:
            // 文物
            this.list = data.culturalRelicPageVos
            break;
          case 2:
            // 展览
            this.list = data.exhibitionPageVos
            break;
          case 3:
            // 虚拟展厅
            this.list = data.virtualPageVos
            break;
          case 4:
            // 精品展览
            this.list = {
              records: [],
              size: 10,
              current: 1
            }
            this.$message.info('精品展览明细正在开发中，敬请期待')
            break;
        }
        // console.log(111, res);
      },

      // 获取展览数量统计图数据
      async getDisplayAmountData() {
        const params = {
          statisticWord: this.displayRadio
        }
        let res = await getExhibitionStatistic(params)
        let data = res.data.exhibitionByRegion || res.data.exhibitionByDept || res.data.exhibitionByType
        this.displayAmountData = data || []
      },

      // 获取文物数量统计图数据
      async getCrAmountData() {
        const params = {
          statisticWord: this.crRadio
        }
        let res = await getCulturalRelicStatistic(params)
        let data = res.data.culturalByRegion || res.data.culturalByDept || res.data.culturalByType || res.data.culturalByYears
        this.crAmountData = data || []
      },

      // 获取虚拟展览数量统计统计图数据
      async getVirtualAmountData() {
        const params = {
          statisticWord: this.virtualRadio
        }
        let res = await getVirtualStatistic(params)
        // console.log(res);
        let data = res.data.virtualByRegion || res.data.virtualByDept
        this.virtualAmountData = data || []
      },

      // 改变页容量
      handleSizeChange(value) {
        this.list.size = value;
        this.loadListByPageSort();
      },

      // 改变当前显示页
      handleCurrentChange(value) {
        this.list.current = value;
        this.loadListByPageSort();
      },

    }
  }
</script>

<style lang="scss" scoped>
  .home {
    padding: 16px;
  }

  .el-tabs--card {
    height: calc(100vh - 110px);
    /* overflow-y: auto; */
  }

  .el-tab-pane {
    height: calc(100vh - 110px);
    overflow-y: auto;
  }
</style>