<template>
  <div id="consoleDataWe" v-loading="loading" class="consoleDataWe consoleDataWeIndex">
    <div class="consoleData_top">
      <div class="data_top_title r_flex_space">
        <div class="top_title r_flex_center">
          <i />
          <p>汇总数据</p>
        </div>
        <div class="r_flex_center">
          <el-tooltip class="item" effect="dark" content="温馨提示：该查询仅对汇总数据模块进行时间筛选" placement="top">
            <div>
              <i style="color: #918ef9" class="el-icon-question" />
            </div>
          </el-tooltip>
          <el-date-picker
            v-model="dataTotalBo.alltime"
            size="small"
            style="width: 240px"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            type="daterange"
            prefix-icon="el-icon-s-order"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changtime"
          />
          <div class="timeQuery r_transform2" @click="dateQuery">查询</div>
        </div>
      </div>

      <div class="data_top_center r_flex_space">
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">平台总收益</p>
            <p class="data_back_p2"><span>￥</span>{{ statisticsDta.profits }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1">独立访问量(UV)</p>
            <p class="data_text_p2">{{ statisticsDta.uv }}</p>
          </div>
        </div>
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">平台总支出</p>
            <p class="data_back_p2"><span>￥</span>{{ statisticsDta.pay }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1">用户注册数</p>
            <p class="data_text_p2">{{ statisticsDta.registNum }}</p>
          </div>
        </div>
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">大额贷收益</p>
            <p class="data_back_p2"><span>￥</span>{{ statisticsDta.applysPrice }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1">用户留资数</p>
            <p class="data_text_p2">{{ statisticsDta.lzNum }}</p>
          </div>
        </div>
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">极速贷收益</p>
            <p class="data_back_p2"><span>￥</span>{{ statisticsDta.jisuProductPrice }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1">大额贷申请数</p>
            <p class="data_text_p2">{{ statisticsDta.applysNum }}</p>
          </div>
        </div>
        <div class="data_top_list">
          <div class="data_back">
            <p class="data_back_p1">用户访问量(PV)</p>
            <p class="data_back_p2">{{ statisticsDta.pv }}</p>
          </div>
          <div class="data_text">
            <p class="data_text_p1">极速贷点击数</p>
            <p class="data_text_p2">{{ statisticsDta.jisuProductClick }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 折线图 -->
    <div class="r_flex">
      <div class="statistics_left">
        <div class="box_border">
          <div class="data_top_title r_flex_space">
            <div class="r_flex_center">
              <i />
              <p>七日数据</p>
            </div>
            <div />
          </div>
          <div id="main" class="zhexianMap" style="width: 100%" />
        </div>
        <div class="box_border" style="margin-top: 0.3692rem">
          <div class="data_top_title r_flex_space">
            <div class="r_flex_center">
              <i />
              <p>大额贷申请城市分布统计</p>
            </div>
            <div />
          </div>
          <div class="staticNextMain" style="width: 100%; height: 6.9231rem">
            <div id="chinaMap" style="width: 100%; height: 118%; transform: translate(-4%, -10%)" />
          </div>
        </div>
      </div>
      <div class="box_border statistics_right">
        <div class="data_top_title r_flex_space">
          <div class="r_flex_center">
            <i />
            <p>消耗排名</p>
            <div class="r_transform4 paixBorder">
              <span :class="rankParm.isAsc ? 'el_icon' : ''" class="iconfont icon-sort-up-full" @click="changSj(4)" />
              <span :class="!rankParm.isAsc ? 'el_icon' : ''" class="iconfont icon-sort-down-full" @click="changSj(4)" />
            </div>
          </div>
          <div class="r_flex_center date_type r_transform2" style="margin-right: 0.37rem">
            <p :class="activeDate === 1 ? 'dateActive' : ''" @click="changDate(1)"><i />日</p>
            <p :class="activeDate === 2 ? 'dateActive' : ''" @click="changDate(2)"><i />周</p>
            <p :class="activeDate === 3 ? 'dateActive' : ''" @click="changDate(3)"><i />月</p>
            <p :class="activeDate === 0 ? 'dateActive' : ''" @click="changDate(0)"><i />全部</p>
          </div>
        </div>
        <div class="rankBorder">
          <div v-for="(data, index) in rankingData" :key="index" class="rank_list">
            <div class="r_flex_space">
              <p class="rank_text1 rank_text_name r_text">{{ data.deptName }}</p>
              <p class="rank_text1 rank_text2">￥{{ data.amount }}</p>
            </div>
            <div class="xiantiao">
              <div class="xtwidth r_transform5" :style="'width:' + (Number(maxNumDate) == 0 ? 0 : (Number(data.amount) / Number(maxNumDate)) * 100) + '%;'" />
            </div>
          </div>
        </div>
        <img v-show="rankingData.length < 7" class="zhanwei" src="../../../assets/images/zhanwei.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import {dataTotal, sevenApplys, sevenData, cityTotal, ranking} from '@/api/business/total'
import * as echarts from 'echarts'
import '../../../../static/js/china.js'
import countTo from 'vue-count-to'
import moment from 'moment'

export default {
  name: 'ConsoleDataWe',
  components: {
    countTo
  },
  data() {
    return {
      // loading 加载
      loading: false,
      // 表达统计主体
      statisticsDta: {
        applysNum: 0,
        applysPrice: 0,
        jisuProductClick: 0,
        jisuProductPrice: 0,
        lzNum: 0,
        pay: 0,
        profits: 0,
        pv: 0,
        registNum: 0,
        uv: 0
      },
      // 查询参数
      dataTotalBo: {
        pageNum: 1,
        pageSize: 999,
        startTime: '',
        endTime: '',
        alltime: ''
      },
      num: 94567.99,
      // 图表参数
      myChartData: {},
      myChartCity: [],
      ChartCityData: [],
      // 排行榜数据
      rankingData: [
        {name: '安逸花', num: 80},
        {name: '安逸花', num: 70},
        {name: '安逸花', num: 60},
        {name: '安逸花', num: 50},
        {name: '安逸花', num: 40},
        {name: '安逸花', num: 30},
        {name: '安逸花', num: 20},
        {name: '安逸花', num: 10},
        {name: '安逸花', num: 4}
      ],
      rankParm: {
        // 升序
        isAsc: '',
        pageNum: 1,
        pageSize: 12,
        startTime: '',
        endTime: ''
      },
      xrKey: true,
      activeDate: 0,
      maxNumDate: 1000
    }
  },
  created() {
    // this.getdataTotal()
    this.cityTotal()
    this.rankList()
  },
  mounted() {
    // elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
    var elementResizeDetectorMaker = require('element-resize-detector')
    // 创建实例，无参数
    var erd = elementResizeDetectorMaker() // 使用默认选项（将使用基于对象的方法）。

    erd.listenTo(document.getElementsByClassName('staticNextMain'), (element) => {
      // var width = element.offsetWidth;
      // var height = element.offsetHeight;
      if (this.myChartData) {
        setTimeout(() => {
          if (this.xrKey) {
            var myChart = echarts.init(document.getElementById('main'))
            myChart.resize()
            var chinaMap = echarts.init(document.getElementById('chinaMap'))
            chinaMap.resize()
            this.xrKey = false
          }
        }, 300)
        setTimeout(() => {
          this.xrKey = true
        }, 900)
      }
    })

    // 屏幕适配
    this.$nextTick(() => {
      this.adapter()
    })

    // 进页面重新拉取数据
    this.getdataTotal()
  },
  methods: {
    // 屏幕适配
    adapter() {
      const adapHeight =
        window.screen.availHeight -
        document.getElementsByClassName('index_header')[0].scrollHeight -
        document.getElementsByClassName('consoleData_top')[0].scrollHeight -
        document.getElementsByClassName('data_top_title')[0].scrollHeight -
        85
      document.getElementsByClassName('zhexianMap')[0].style.height = `${adapHeight < 250 ? 250 : adapHeight}px`
      var myChart = echarts.init(document.getElementById('main'))
      myChart.resize()
    },
    // 时间选择
    changtime(newtime) {
      this.dataTotalBo.startTime = newtime ? newtime[0] : ''
      this.dataTotalBo.endTime = newtime ? newtime[1] : ''
    },
    // 排名参数
    changSj() {
      this.rankParm.isAsc = this.rankParm.isAsc == 'asc' ? '' : 'asc'
      this.rankList()
    },
    changDate(type) {
      this.activeDate = type
      if (type === 1) {
        this.rankParm.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
        this.rankParm.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
      } else if (type === 2) {
        this.rankParm.startTime = moment().startOf('weeks').format('YYYY-MM-DD HH:mm:ss') // 本周开始日期 2021-01-18
        this.rankParm.endTime = moment().endOf('weeks').format('YYYY-MM-DD HH:mm:ss')
      } else if (type === 3) {
        this.rankParm.startTime = moment().startOf('months').format('YYYY-MM-DD HH:mm:ss') // 本周开始日期 2021-01-18
        this.rankParm.endTime = moment().endOf('months').format('YYYY-MM-DD HH:mm:ss')
      } else if (type === 0) {
        this.rankParm.startTime = ''
        this.rankParm.endTime = ''
      }

      this.rankList()
    },
    dateQuery() {
      this.getdataTotal()
    },
    // 随机0-1000的数
    randomData() {
      return Math.round(Math.random() * 1000)
    },
    // 排行榜
    rankList() {
      ranking(this.rankParm).then((response) => {
        this.maxNumDate = Number(response.data.maxNum)
        this.rankingData = response.data.ranks
      })
    },
    getdataTotal() {
      this.loading = true
      dataTotal(this.dataTotalBo)
        .then((response) => {
          this.statisticsDta = response
          this.loading = false
        })
        .catch((errr) => {
          this.loading = false
        })
      sevenData().then((response) => {
        this.myChartData = response.data
        // 7日折线图
        this.xuanranMyChart()
      })
    },
    cityTotal() {
      cityTotal().then((response) => {
        this.myChartCity = response.data
        // 中国地图分布
        this.xuanranChinaMap()
      })
    },
    xuanranMyChart(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 图表X轴：日期
      var Xdata = this.myChartData.map((value) => value.date.substr(5, 16))
      // 图表Y轴：数量
      // applyNum	大额贷申请数	integer(int64)
      var YapplyNum = this.myChartData.map((value) => value.applyNum)
      // applyPrice	大额贷申请收益	number(bigdecimal)
      var YapplyPrice = this.myChartData.map((value) => value.applyPrice)
      // jisuNum	极速贷点击数	integer(int64)
      var YjisuNum = this.myChartData.map((value) => value.jisuNum)
      // jisuPrice	极速贷点击收益	number(bigdecimal)
      var YjisuPrice = this.myChartData.map((value) => value.jisuPrice)
      // pay支出	number(bigdecimal)
      var Ypay = this.myChartData.map((value) => value.pay)
      // profits收益
      var Yprofits = this.myChartData.map((value) => value.profits)

      var seriesNumber = [
        // { name: '大额贷申请数', data: YapplyNum , clolr: '#2e6cf6', clolr2: '#b9ceff' },
        {name: '大额贷申请收益', data: YapplyPrice, clolr: '#18B9A0'},
        // { name: '极速贷点击数', data: YjisuNum , clolr: '#9E51FC' },
        {name: '极速贷点击收益', data: YjisuPrice, clolr: '#673ab7'},
        {name: '平台总支出', data: Ypay, clolr: '#FE5B9C'},
        {name: '平台总收益', data: Yprofits, clolr: '#CD86FE'}
      ]

      var seriesData = []

      seriesNumber.map((value) => {
        seriesData.push({
          name: value.name,
          type: 'line',
          data: value.data,
          symbolSize: 7,
          symbol: 'circle',
          smooth: true,
          itemStyle: {
            normal: {
              // borderColor: value.clolr,
              color: value.clolr,
              borderWidth: 4
            }
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: value.clolr
              },
              {
                offset: 1,
                color: '#fff'
              }
            ])
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: value.clolr
                  },
                  {
                    offset: 0.4,
                    color: value.clolr
                  },
                  {
                    offset: 0.5,
                    color: '#fff'
                  },
                  {
                    offset: 0.7,
                    color: '#fff'
                  },
                  {
                    offset: 0.8,
                    color: '#fff'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ]
              },
              borderColor: value.clolr,
              borderWidth: 2
            }
          },
          smooth: true
        })
      })

      // 图表属性
      var option = {
        backgroundColor: '#fff',
        title: {
          text: '',
          left: '0%',
          top: '0%',
          textStyle: {
            color: '#333',
            fontSize: 14
          }
        },
        // 说明位置
        legend: {
          show: true,
          icon: 'circle',
          top: '0%',
          right: '4.5%',
          itemWidth: 10,
          itemHeight: 12,
          itemGap: 25
        },
        // 图表位置
        grid: {
          top: '12%',
          left: '2%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: Xdata,
            axisLine: {
              lineStyle: {
                color: '#b5bed1'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#b5bed1'
              },
              margin: 15
            },
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#b5bed1'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#b5bed1'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        // 大额贷申请数，极速贷点击数，平台总支出，平台总收益统计图表，
        series: seriesData
      }

      if (data) {
        myChart.resize()
      } else {
        // 绘制图表
        myChart.setOption(option)
      }
    },
    xuanranChinaMap() {
      this.ChartCityData = this.myChartCity.map((value) => ({
        name:
          value.province.indexOf('新疆') != -1
            ? '新疆'
            : value.province.indexOf('黑龙江') != -1
            ? '黑龙江'
            : value.province.indexOf('西藏') != -1
            ? '西藏'
            : value.province.indexOf('广西') != -1
            ? '广西'
            : value.province.indexOf('宁夏') != -1
            ? '宁夏'
            : value.province.indexOf('内蒙古') != -1
            ? '内蒙古'
            : value.province.indexOf('香港') != -1
            ? '香港'
            : value.province.indexOf('澳门') != -1
            ? '澳门'
            : value.province.slice(0, 2),
        value: value.num
      }))
      // 基于准备好的dom，初始化echarts实例
      var ChinaMap = echarts.init(document.getElementById('chinaMap'))

      // 图表属性
      var chinaOption = {
        //   title: {
        //       text: '大额贷申请城市分布统计',
        //       subtext: '',
        //       left: 'center'
        //   },
        tooltip: {
          trigger: 'item',
          left: '2.5%',
          textStyle: {
            align: 'left'
          }
        },
        color: ['#155eff'],
        // 说明位置
        legend: {
          show: true,
          icon: 'circle',
          top: '6%',
          right: '2.5%',
          itemWidth: 10,
          itemHeight: 12,
          itemGap: 25,
          data: ['大额贷申请数']
        },
        // 图表位置
        geo: {
          // show: true,
          // map: 'china',
          // label: {
          //   normal: {
          //     show: false
          //   },
          //   emphasis: {
          //     show: false
          //   }
          // }

          map: 'china',
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false
            }
          },
          layoutSize: '100%',
          itemStyle: {
            normal: {
              borderColor: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#071E51'
                  },
                  {
                    offset: 1,
                    color: '#071E51'
                  }
                ],
                false
              ),
              borderWidth: 1
              // shadowColor: 'rgba(10,76,139,1)',
              // shadowOffsetY: 0,
              // shadowBlur: 60
            }
          }
        },
        visualMap: {
          min: 0,
          right: '0%',
          left: '8.5%',
          bottom: '8%',
          text: ['高', '低'], // 文本，默认为数值文本
          // min: 0,
          max: 1000,
          inRange: {
            color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#20389C']
          },
          calculable: false
        },
        series: [
          {
            name: '大额贷申请数',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#5E8FFD'
              },
              emphasis: {
                areaColor: '#49DAF8',
                textColor: '#49DAF8'
              }
            },

            data: this.ChartCityData
          }
        ]
      }

      // 绘制图表
      ChinaMap.setOption(chinaOption)
    }
  }
}
</script>

<style>
#consoleDataWe .el_icon {
  color: #918ef9 !important;
}

#consoleDataWe .el-date-editor .el-range__icon {
  color: #918ef9 !important;
}

#consoleDataWe .el-range-editor--small .el-range-separator {
  line-height: 20px;
}

#consoleDataWeIndex .el-loading-spinner {
  transform: translateY(-6rem);
}
</style>
