<template>
  <div class="front-page">
    <div class="data-summary">
      <h3>数据汇总</h3>
      <div class="list-item">
        <router-link class="item" v-for="item in dataSummaryData" :key="item.icon" :to="item.path">
          <img :src="require(`@/../public/img/icon/${item.icon}.png`)" alt="">
          <div class="info">
            <span class="tips">{{item.tips}}</span>
            <span class="count">{{item.count}}</span>
          </div>
        </router-link>
      </div>
    </div>
    <div class="added-today">
      <h3>今日新增</h3>
      <div class="list-item">
        <router-link class="item" v-for="item in addedTodayData" :key="item.icon" :to="item.path">
          <div class="icon">
            <img :src="require(`@/../public/img/icon/${item.icon}.png`)" alt="">
          </div>
          <span class="count">{{item.count}}</span>
          <span class="tips">{{item.tips}}</span>
        </router-link>
      </div>
    </div>
    <div class="active-chart" :style="{width: '100%', height: '600px'}">
      <h3>活动作品数统计</h3>
      <div id="myChart" style="width: 100%;height: 600px"></div>
    </div>
  </div>
</template>

<script>
  import {activeTotal, censusAllTotal, censusTodayTotal} from "@/api/wel/index";

  var echarts = require('echarts');
  export default {
    name: "wel",
    data() {
      return {
        option: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        },
        // 数据的key属性对应后台数据key，用来循环匹配数据
        dataSummaryData: [
          {
            tips: '作品总数',
            count: 0,
            icon: 'ic_zuopin',
            key: 'activeProductCount',
            path: '/sing_active/activeproductrecord'
          },
          {
            tips: '活动总数',
            count: 0,
            key: 'activeCount',
            icon: 'ic_huodong',
            path: '/sing_active/activerecord'
          },
          {
            tips: '用户总数',
            count: 0,
            key: 'userCount',
            icon: 'ic_yonghu',
            path: '/sing_user/loginuser'
          },
          {
            tips: '在线用户',
            count: 0,
            key: 'onlinePeopleNumber',
            icon: 'ic_zaixian',
            path: '/sing_user/loginuser'
          },
        ],
        addedTodayData: [
          {
            tips: '今日新增作品',
            count: 0,
            key: 'activeProductCount',
            icon: 'ic_zuopin1',
            path: '/sing_active/activeproductrecord'
          },
          {
            tips: '今日新增活动',
            count: 0,
            key: 'activeCount',
            icon: 'ic_huodong1',
            path: '/sing_active/activerecord'
          },
          {
            tips: '今日新增用户',
            count: 0,
            key: 'userCount',
            icon: 'ic_yonghu1',
            path: '/sing_user/loginuser'
          },
          {
            tips: '在线用户',
            count: 0,
            key: 'onlinePeopleNumber',
            icon: 'ic_yonghu2',
            path: '/sing_user/loginuser'
          },
        ],
        /*optionTotal: {
          data: [
            {
              click: () => {
                this.$router.push({path: "/sing_active/activeproductrecord"});
              },
              title: '作品总数',
              prop: 'activeProductCount',
              count: 0,
              icon: 'el-icon-star-on',
              color: '#4065E0'
            },
            {
              click: () => {
                this.$router.push({path: "/sing_active/activerecord"});
              },
              title: '活动总数',
              prop: 'activeCount',
              count: 0,
              icon: 'el-icon-s-flag',
              color: '#6F7FFA',
            },
            {
              click: () => {
                this.$router.push({path: "/sing_user/loginuser"});
              },
              title: '用户总数',
              prop: 'userCount',
              count: 0,
              icon: 'el-icon-user-solid',
              color: '#6FCAFA',
            },
            {
              click: () => {
                this.$router.push({path: "/sing_user/loginuser"});
              },
              title: '在线用户',
              prop: 'onlinePeopleNumber',
              count: 0,
              icon: 'el-icon-user-solid',
              color: '#1DD3B7',
            },
          ],
          span: 6,
        },
        optionToday: {
          data: [
            {
              click: () => {
                this.$router.push({path: "/sing_active/activeproductrecord"});
              },
              prop: 'activeProductCount',
              title: '今日新增作品',
              count: 0,
              icon: 'el-icon-star-on',
              color: '#409EFF',
            },
            {
              click: () => {
                this.$router.push({path: "/sing_active/activerecord"});
              },
              title: '今日新增活动',
              prop: 'activeCount',
              count: 0,
              icon: 'el-icon-s-flag',
              color: '#e44447',
            },
            {
              click: () => {
                this.$router.push({path: "/sing_user/loginuser"});
              },
              title: '今日新增用户',
              prop: 'userCount',
              count: 0,
              icon: 'el-icon-user-solid',
              color: '#5669e7',
            },
            {
              click: () => {
                this.$router.push({path: "/sing_user/loginuser"});
              },
              title: '在线用户',
              prop: 'onlinePeopleNumber',
              count: 0,
              icon: 'el-icon-user-solid',
              color: '#25b03f',
            },
          ],
          span: 6,
        },*/
      };
    },
    created() {
      this.init()
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        /*            activeTotal().then(res => {
                    const titleList = [];
                    const countList = [];
                    res.data.data.forEach(ele => {
                      titleList.push(ele.name);
                      countList.push(ele.value);
                    })
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById('myChart'))
                    // 绘制图表
                    myChart.setOption({
                      title: {
                        text: '活动作品统计'
                      },
                      tooltip: {},
                      xAxis: {
                        data: titleList,
                        name: "活动名称",
                        axisLabel : {//坐标轴刻度标签的相关设置。
                          formatter : function(params){
                            var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 6;// 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {

                              for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";// 表示每一次截取的字符串
                                var start = p * provideNumber;// 开始截取的位置
                                var end = start + provideNumber;// 结束截取的位置
                                // 此处特殊处理最后一行的索引值
                                if (p == rowNumber - 1) {
                                  // 最后一次不换行
                                  tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                  // 每一次拼接字符串并换行
                                  tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;// 最终拼成的字符串
                              }

                            } else {
                              // 将旧标签的值赋给新标签
                              newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName
                          }

                        }
                      },
                      yAxis: {},
                      series: [{
                        name: '作品数',
                        type: 'bar',
                        data: countList
                      }],
                      grid:{//直角坐标系内绘图网格
                        bottom:"40%" //
                      },

                    });
                  });*/
        /*activeTotal().then(res => {
          let myChart = echarts.init(document.getElementById('myChart'))
          myChart.setOption({
            //backgroundColor: "#fff",
            title: {
              text: '活动作品统计',
              left: 'center',
              top: 20,
              textStyle: {
                color: '#000'
              }
            },
            tooltip: {
              trigger: 'item'
            },
            visualMap: {
              show: false,
              min: 80,
              max: 600,
              inRange: {
                colorLightness: [0, 1]
              }
            },
            series: [
              {
                name: '作品数',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: res.data.data
                .sort(function (a, b) {
                  return a.value - b.value;
                }),
                roseType: 'radius',
                label: {
                  color: '#000'
                },
                labelLine: {
                  lineStyle: {
                    color: '#000'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                },
                itemStyle: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function () {
                  return Math.random() * 200;
                }
              }
            ]
          })
        })*/
        activeTotal().then(res => {
          let myChart = echarts.init(document.getElementById("myChart"));
          myChart.setOption({
            backgroundColor: '#fff',
            title: {
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            // legend: {
            //   orient: 'vertical',
            //   left: 'left'
            // },
            series: [
              {
                name: '作品数',
                type: 'pie',
                radius: '50%',
                data: res.data.data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ],
          })

          window.addEventListener("resize", ()=>{
            myChart.resize();
          })
        })
      },
      init() {
        censusAllTotal().then(res => {
          let {data} = res.data
          this.dataSummaryData.map(item => {
            return (item.count = data[item.key]) && item
          })
        });
        censusTodayTotal().then(res => {
          let {data} = res.data
          this.addedTodayData.map(item => {
            return (item.count = data[item.key]) && item
          })
        });
      }
    },
  };
</script>

<style scoped lang="scss">
  .front-page {
    padding-top: 30px;
    padding-left: 15px;

    h3 {
      font-size: 18px;
      color: #353535;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .data-summary {
      margin-bottom: 30px;

      .list-item {
        display: flex;
        justify-content: center;
        align-items: center;

        .item {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 15px;
          height: 200px;
          color: #fff;
          border-radius: 10px;

          &:nth-child(1) {
            background-color: #4065E0;
          }

          &:nth-child(2) {
            background-color: #6F7FFA;
          }

          &:nth-child(3) {
            background-color: #6FCAFA;
          }

          &:nth-child(4) {
            background-color: #1DD3B7;
          }

          .info {
            margin-left: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .count {
              font-weight: bold;
              font-size: 36px;
              margin-top: 37px;
            }
          }
        }
      }
    }

    .added-today {
      border-radius: 10px;

      .list-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 280px;
        background-color: #fff;

        .item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: #F2F6FA;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .count {
            color: #409EFF;
            font-weight: bold;
            font-size: 36px;
            margin: 30px 0 20px;
          }

          .tips {
            font-size: 14px;
            color: #888;
            font-weight: 400;
          }
        }
      }
    }
  }
</style>

