<template>
  <div class="home">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户行为数据统计" name="behavior">
        <div style="height: 400px;">
          <Echart :options="options" id="可选" height='100%' width="100%" v-if="options"></Echart>
        </div>

        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <div style="float: left;font-weight: bold;">精品展数据统计</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>
          精品展地区分布
        </el-card>
        <h3>展览数据</h3>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-card>
              <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
                <div>展览分布统计
                </div>
                <el-radio-group v-model="radio" style="float: right;">
                  <el-radio :label="1">按地区</el-radio>
                  <el-radio :label="2">按博物馆</el-radio>
                </el-radio-group>
              </div>
              展览分布统计饼图
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
                <div>展览类别统计</div>
                <el-radio-group v-model="radio" style="float: right;">
                  <el-radio :label="1">按类型</el-radio>
                  <!-- <el-radio :label="2">按</el-radio> -->
                </el-radio-group>
              </div>
              展览类别统计饼图
            </el-card>
          </el-col>
        </el-row>
        <h3>文物数据</h3>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-card>
              <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
                <div>文物分布统计
                </div>
                <el-radio-group v-model="radio" style="float: right;">
                  <el-radio :label="1">按地区</el-radio>
                  <el-radio :label="2">按博物馆</el-radio>
                </el-radio-group>
              </div>
              文物分布统计饼图
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
                <div>文物类别统计</div>
                <el-radio-group v-model="radio" style="float: right;">
                  <el-radio :label="1">按类型</el-radio>
                  <el-radio :label="2">按年代</el-radio>
                </el-radio-group>
              </div>
              文物类别统计饼图
            </el-card>
          </el-col>
        </el-row>

      </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'
  export default {
    name: 'Home',
    components: {
      TablePage, Echart,
    },
    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',
        radio: 1,
        list: {
          records: [
            {
              name: '神秘贵州',
              unit: '贵州省地质博物馆',
              regionName: '贵阳市',
              dj: 100,
              dz: 8,
              sc: 7
            },
            {
              name: '夜郎的疑问',
              unit: '黔西南州博物馆',
              regionName: '黔西南州',
              dj: 99,
              dz: 6,
              sc: 7
            },
            {
              name: '四渡赤水',
              unit: '遵义博物馆',
              regionName: '遵义市',
              dj: 96,
              dz: 4,
              sc: 9
            }
          ]
        },
        options: null,
        currentSortPage: 2,//1-文物；2-展览；3-虚拟展厅；4-精品展览，0-所有。默认0
      }
    },
    watch: {
      currentSortPage(value) {
        this.currentSortPage = value
        this.loadListByPageSort()
      }
    },
    mounted() {
      this.getBehaviorData()
      this.loadListByPageSort()
      // this.getBarData()
    },
    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'
        ];
        var legendList = [];
        let res = await getBarMap()
        const { allBrowseSortList, culturalRelicSortList, exhibitionSortList, virtualSortList } = res.data
        let barListAll = []
        allBrowseSortList.map(item => {
          let obj = {}
          if (item.data > 0) {
            obj.name = item.name
            obj.value = item.data
            barListAll.push(obj)
          }
        })

        // console.log('allBrowseSortList', allBrowseSortList);

        console.log('barListAll', barListAll);

        for (var i = 0; i < barListAll.length; i++) {
          legendList.push(barListAll[i].name);
        }
        this.options = {
          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: '50%',
            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
            }
          },
          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]
            }
          },]
        }
      },
      // 加载下方点击量明细
      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 getBarData() {
        let res = await getBarMap()
        console.log(res);
      },

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

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

    }
  }
</script>

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