<template>
  <div class="dataView-content">
    <div class="data-header">
      <dv-border-box-5 :color="['rgba(115, 164, 255, 0.3)', 'rgba(0,125,255,0.2)']">
        智享亿家投递大数据
      </dv-border-box-5>
      <dv-decoration-3 style="width:25%;height:30px;" />
      <dv-border-box-5 :color="['rgba(46, 77, 255, 0.2)', 'rgba(0,125,255,0.2)']" :reverse="true">
        <div>区域</div>
        <!-- <select v-model="queryParam.provinceCode" @change="getCityList" placeholder="省">
          <option value="">省</option>
          <option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</option>
        </select> -->
        <select v-model="queryParam.cityCode" @change="getAreaList" placeholder="市">
          <option value="">选择市</option>
          <option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</option>
        </select>
        <select v-model="queryParam.districtCode" @change="initChart" placeholder="区/县">
          <option value="">选择区/县</option>
          <option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</option>
        </select>
        <a-icon
          @click="isFullscreenMap"
          :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}"
          :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
      </dv-border-box-5>
    </div>
    <div class="data-body">
      <div class="b-left">
        <div>
          <dv-border-box-13>
            <div id="con1" style="width: 100%;height: 100%;"></div>
          </dv-border-box-13>
        </div>
        <div>
          <dv-border-box-13>
            <div id="con2" style="width: 100%;height: 100%;"></div>
          </dv-border-box-13>
        </div>
      </div>
      <div class="b-middle">
        <div>
          <dv-border-box-8 style="padding: 10px;">
            <div id="map" :style="{height: '100%'}"></div>
          </dv-border-box-8>
        </div>
        <div>
          <dv-border-box-12>
            <div class="total-block">
              <div>
                <dv-digital-flop :config="userTotal" style="width:100%;height:50px;" />
                <div class="total-label">用户总数</div>
              </div>
              <div>
                <dv-digital-flop :config="devTotal" style="width:100%;height:50px;" />
                <div class="total-label">设备总数</div>
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
      <div class="b-right">
        <div>
          <dv-border-box-13>
            <div id="con3" style="width: 100%;height: 100%;"></div>
          </dv-border-box-13>
        </div>
        <div>
          <dv-border-box-13>
            <div id="con4" style="width: 100%;height: 100%;"></div>
          </dv-border-box-13>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {
  getUserTotal,
  getDeviceTotal,
  getMapStation
} from '@/api/nodeMap.js'
import {
  getNewRegister,
  getTimeSharingLog,
  getDeliveryTop,
  getHeatMapData,
  getLocationCode
} from '@/api/borard.js'
import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
import moment from 'moment'
import getDate from '@/libs/getDate.js'
export default {
  name: 'DataBoratd',
  data () {
    return {
      queryParam: {
        provinceCode: '610000', //  省
        cityCode: '610100', // 市
        districtCode: '' // 区
      },
      addrProvinceList: [{
        code: '610000',
        id: '610000',
        isOpen: '0',
        name: '陕西省',
        parentId: '100000',
        parentIds: '100000',
        sort: 27,
        type: '2'
      }], //  省下拉
      addrCityList: [
        {
          'id': '610100',
          'sort': 1,
          'parentId': '610000',
          'parentIds': '100000,610000',
          'isOpen': '0',
          'name': '西安市',
          'code': '610100'
        },
        {
          'id': '610400',
          'sort': 4,
          'parentId': '610000',
          'parentIds': '100000,610000',
          'isOpen': '0',
          'name': '咸阳市',
          'code': '610400'
        }
      ], //  市下拉
      addrDistrictList: [], //  区下拉
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      userTotal: {
        number: [],
        content: '{nt}',
        formatter: this.formatter
      },
      devTotal: {
        number: [],
        content: '{nt}',
        formatter: this.formatter
      },
      isMapFull: false,
      map: null, // 地图对象
      markerLayer: null, // 地图点标记对象
      infoWindow: null, // 地图信息窗口对象
	    beginDate: moment().subtract('days', 7).format('YYYY-MM-DD 00:00:00'), // 查询开始时间
	    endDate: moment(moment().add(-1, 'days').endOf('day').valueOf()).format('YYYY-MM-DD 23:59:59') // 查询结束时间
    }
  },
  methods: {
    // 获取省列表'
    getProvinceList () {
      getProvince().then(res => {
        if (res.status == 200) {
          this.addrProvinceList = res.data || []
        } else {
          this.addrProvinceList = []
        }
      })
    },
    // 获取城市列表
    getCityList (e) {
      if (e.target.value == '') return
      this.addrCityList = []
      this.addrDistrictList = []
      this.queryParam.cityCode = ''
      this.queryParam.districtCode = ''
      this.getCityListRequest(e.target.value)
    },
    getCityListRequest (val) {
      getCityByPro({
        id: val
      }).then(res => {
        if (res.status == 200) {
          this.addrCityList = res.data || []
        } else {
          this.addrCityList = []
        }
      })
    },
    // 获取区县列表
    getAreaList (e) {
      if (e.target.value == '') return
      this.addrDistrictList = []
      this.queryParam.districtCode = ''
      this.initChart()
      this.getAreaListRequest(e.target.value)
    },
    getAreaListRequest (val) {
      getDistrictByCity({
        id: val
      }).then(res => {
        if (res.status == 200) {
          this.addrDistrictList = res.data || []
        } else {
          this.addrDistrictList = []
        }
      })
    },
    // 全屏
    fullScreen () {
      var element = document.documentElement
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      }
    },
    // 退出全屏
    exitFullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    },
    // 地图是否全屏展示
    isFullscreenMap () {
      this.isMapFull = !this.isMapFull
      if (this.isMapFull) {
        this.fullScreen()
      } else {
        this.exitFullscreen()
      }
      this.chart1.resize()
      this.chart2.resize()
      this.chart3.resize()
      this.chart4.resize()
    },
    formatter (number) {
      const numbers = number.toString().split('').reverse()
      const segs = []
      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
      return segs.join(',').split('').reverse().join('')
    },
    // 获取用户总数
    getUser () {
      getUserTotal({
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }).then(res => {
        const data = res.data || 0
        const arr = []
        arr.push(data)
        this.userTotal = {
          number: arr,
          content: '{nt}',
          formatter: this.formatter
        }
        console.log(this.userTotal, data, '获取用户总数')
      })
    },
    // 获取设备总数
    getDevice () {
      getDeviceTotal({
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }).then(res => {
        const data = res.data || 0
        const arr = []
        arr.push(data)
        this.devTotal = {
          number: arr,
          content: '{nt}',
          formatter: this.formatter
        }
      })
    },
    // 获取新用户注册量
    getNewRegister () {
      const params = {
        beginRegisterTime: this.beginDate,
        endRegisterTime: this.endDate,
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }
      getNewRegister(params).then(res => {
        if (res.status == 200) {
          const xData = res.data.dateTime
          const yData = res.data.registerNum
          const arr = []
          yData.map(item => {
            arr.push(Number(item))
          })
          this.initChart1(xData, arr)
        }
      })
    },
    // 获取分时投递
    getTimeSharingLog () {
      const params = {
        'beginDeliveryDate': this.beginDate,
        'endDeliveryDate': this.endDate,
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }
      getTimeSharingLog(params).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.initChart2(res.data)
        }
      })
    },
    // 排行榜
    getDeliveryTop () {
      const params = {
        'beginDeliveryDate': this.beginDate,
        'endDeliveryDate': this.endDate,
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }
      getDeliveryTop(params).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.initChart3(res.data)
        }
      })
    },
    getLocationCode () {
      const cityCode = this.queryParam.cityCode
      const districtCode = this.queryParam.districtCode
      getLocationCode({
        keyword: districtCode || cityCode
      }).then(res => {
        console.log(res)
        if (res.status == 200) {
          if (this.map) {
            this.map.panTo(new TMap.LatLng(res.data.lat, res.data.lng))
          } else {
            this.initMap(res.data)
          }
        }
      })
    },
    // 初始化地图
    initMap (res) {
      // 定义地图中心点坐标 默认定位在陕西省咸阳市
      var center = new TMap.LatLng(res.lat, res.lng)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      this.map = new TMap.Map(document.getElementById('map'), {
        center: center, // 设置地图中心点坐标
        mapStyleId: 'style3',
        zoom: 13, // 设置地图缩放级别
        pitch: 0, // 设置俯仰角
        showControl: false,
        rotation: 45 // 设置地图旋转角度
      })
      // 创建并初始化MultiMarker 点标记
      this.markerLayer = new TMap.MultiMarker({
        map: this.map, // 指定地图容器
        // 样式定义
        styles: {
          // 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          'myStyle': new TMap.MarkerStyle({
            'width': 16, // 点标记样式宽度（像素）
            'height': 20, // 点标记样式高度（像素）
            'src': '../ldt.png', // 图片路径
            // 焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            'anchor': {
              x: 8,
              y: 15
            }
          })
        },
        // 点标记数据数组
        geometries: []
      })
      // 初始化infoWindow
      this.infoWindow = new TMap.InfoWindow({
        map: this.map,
        position: new TMap.LatLng(39.984104, 116.307503),
        offset: {
          x: 0,
          y: -32
        } // 设置信息窗相对position偏移像素
      })
      this.infoWindow.close() // 初始关闭信息窗关闭
      this.markerLayer.on('mousemove', this.showMarkTitle)
      // 监听地图加载完成
      this.map.on('tilesloaded', this.getMapMark)
    },
    // 获取热力图
    getHeatMapData () {
      // 初始化热力图并添加至map图层
      const heat = new TMap.visualization.Heat({
        max: 350, // 热力最强阈值
        min: 0, // 热力最弱阈值
        height: 0, // 峰值高度
        gradientColor: { // 渐变颜色
          0.6: '#673198',
          0.8: '#e53390',
          0.9: '#ffc95a'
        },
        radius: 30 // 最大辐射半径
      }).addTo(this.map)
      const params = {
        'beginDeliveryDate': this.beginDate,
        'endDeliveryDate': this.endDate,
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }
      getHeatMapData(params).then(res => {
        if (res.status == 200) {
          const ret = []
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].lat <= 90) {
              ret.push({
                count: res.data[i].deliveryTimes,
                lat: res.data[i].lat,
                lng: res.data[i].lng
              })
            }
          }
          // console.log(ret)
          heat.setData(ret)// 设置数据
        }
      })
    },
    // 获取地图点坐标
    getMapMark () {
      getMapStation({
        'provinceCode': this.queryParam.provinceCode,
        'cityCode': this.queryParam.cityCode,
        'districtCode': this.queryParam.districtCode
      }).then(res => {
        const list = res.data || []
        const data = []
        list.map((item, index) => {
          if (item.lat <= 85.051128 && item.lat >= -85.051128) {
            const p = {
              'id': item.id, // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
              'styleId': 'myStyle', // 指定样式id
              'position': new TMap.LatLng(Number(item.lat), Number(item
                .lng)), // 点标记坐标位置
              'properties': { // 自定义属性
                'title': item.name
              }
            }
            data.push(p)
          }
        })
        // 增加点标记
        this.markerLayer.add(data)
      })
      this.getHeatMapData()
    },
    // 显示地图标记点名称
    showMarkTitle (evt) {
      this.infoWindow.open() // 打开信息窗
      this.infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
      this.infoWindow.setContent(evt.geometry.properties.title) // 设置信息窗内容
    },
    // 初始化图表
    initChart () {
      // 用户总数
      this.getUser()
      // 设备总数
      this.getDevice()
      // 地图
      this.getLocationCode()
      // 新注册用户
      this.getNewRegister()
      // 分时投递
      this.getTimeSharingLog()
      // 设备分布比例
      const con3 = document.getElementById('con3')
      const chart3 = echarts.init(con3)
      const option3 = {
        color: ['#10e7d5', '#06beff', '#f2bca1', '#8484fb'],
        title: {
          text: '设备分布比例',
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
        },
        tooltip: {},
        series: [{
          type: 'pie',
          radius: ['30%', '50%'],
          startAngle: -Math.PI / 8,
          avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
          label: {
            normal: {
              formatter: params => {
                return (
                  '{name|' + params.name + '}{value|' +
                        params.value + '%' + '}'
                )
              },
              padding: [0, -70, 25, -70],
              rich: {
                name: {
                  fontSize: 12,
                  padding: [0, 10, 0, 4],
                  color: '#999'
                },
                value: {
                  fontSize: 12,
                  color: '#999'
                }
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 60,
              lineStyle: {
                color: '#e6e6e6'
              }
            }
          },
          data: [{
            name: '居民小区',
            value: 49
          },
          {
            name: '公共机构',
            value: 32
          },
          {
            name: '学校',
            value: 14
          },
          {
            name: '企业',
            value: 5
          }
          ],
          insideLabel: {
            show: true
          }
        }]
      }
      chart3.setOption(option3)
      this.chart3 = chart3
      this.chart3.resize()
      // 网点投递量排名
      this.getDeliveryTop()
    },
    // 排行榜
    initChart3 (res) {
      const con4 = document.getElementById('con4')
      const chart4 = echarts.init(con4)
      const option4 = {
        title: {
          text: '网点投递量排名',
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
        },
        tooltip: {
          formatter: '{b0}: {c0}kg'
        },
        grid: {
          left: 15,
          right: 15,
          bottom: 20,
          top: 85,
          containLabel: true
        },
        xAxis: {
          data: res.stationName
        },
        yAxis: {
          name: 'kg',
          type: 'value'
        },
        series: [{
          data: res.deliveryWeight,
          type: 'bar',
          barWidth: 30,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            color: '#37a2da',
            shadowColor: '#246d91',
            shadowOffsetX: 10,
            shadowOffsetY: -1
          }
        }]
      }
      chart4.setOption(option4)
      this.chart4 = chart4
      this.chart4.resize()
    },
    // 分时投递记录
    initChart2 (res) {
      const con2 = document.getElementById('con2')
      const chart2 = echarts.init(con2)
      const series = []
      const arr = res.dayKey.slice(res.dayKey.length - 3)
      console.log(arr)
      for (let i = 0; i < arr.length; i++) {
        series.push({
          name: arr[i],
          data: res.value[arr[i]],
          type: 'line',
          stack: '投递量',
          smooth: true,
          barWidth: 10,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          }
        })
      }
      const option2 = {
        title: {
          text: '分时投递量',
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
        },
        tooltip: {
          formatter: '{b0}时: {c0}kg'
        },
        grid: {
          left: 20,
          right: 40,
          bottom: 20,
          top: 85,
          containLabel: true
        },
        legend: {
          data: arr,
          orient: 'vertical',
          textStyle: {
            fontSize: 10
          },
          top: 15,
          left: 'right'
        },
        xAxis: {
          name: '时',
          type: 'category',
          data: res.hourKey,
          nameTextStyle: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        yAxis: {
          name: 'kg',
          type: 'value',
          nameTextStyle: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        series: series
      }
      chart2.setOption(option2)
      this.chart2 = chart2
      this.chart2.resize()
    },
    // 初始化新用户注册量
    initChart1 (xData, yData) {
      const con1 = document.getElementById('con1')
      const chart1 = echarts.init(con1)
      const option1 = {
		  title: {
		      text: '新用户注册量',
          top: 20,
          left: 20,
          textStyle: {
            color: '#abd7ff'
          },
          textAlingn: 'left'
		  },
        tooltip: {
          formatter: '{b0}日: {c0}人'
        },
        grid: {
          left: 15,
          right: 60,
          bottom: 20,
          top: 85,
          containLabel: true
        },
		  xAxis: {
		     name: '日期',
		     data: xData,
          type: 'category',
          nameTextStyle: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
		  },
		  yAxis: {
		     name: '用户',
          type: 'value',
          nameTextStyle: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
		  },
		  series: [{
		    data: yData,
		    type: 'line',
		    smooth: true,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          lineStyle: {
            color: 'rgba(55, 162, 218, 0.9)'
          },
		    areaStyle: {
		      color: {
		          type: 'linear',
		          x: 0,
		          y: 0,
		          x2: 0,
		          y2: 1,
		          colorStops: [{
		              offset: 0, color: 'rgba(55, 162, 218, 0.5)' // 0% 处的颜色
		          }, {
		              offset: 1, color: 'rgba(55, 162, 218, 0.9)' // 100% 处的颜色
		          }]
		      }
		    }
		  }]
      }
      chart1.setOption(option1)
      this.chart1 = chart1
      this.chart1.resize()
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        that.chart1.resize()
        that.chart2.resize()
        that.chart3.resize()
        that.chart4.resize()
      })()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      setTimeout(() => {
        vm.initChart()
        vm.getAreaListRequest(vm.queryParam.cityCode)
      }, 150)
    })
  },
  beforeRouterLeave (to, from, next) {
    next(vm => {
      // 销毁地图
      vm.map.destroy()
      vm.map = null
    })
  }
}
</script>

<style lang="less">
	.dataView-content {
		width: 100%;
		height: 100%;
		min-height: 600px;
		background-image: url(../../assets/dataViewBg.png);
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;

		.data-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>div {
				height: 80px;
				line-height: 80px;

				&:first-child {
					width: 40%;
					color: #b3dcf5;
          padding-right: 10%;
					.border-box-content {
						font-size: 30px;
						text-align: center;
					}
				}

				&:last-child {
					width: 35%;
					color: #0ed3ff;

					.border-box-content {
						font-size: 18px;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-left: 50px;

						select {
							background: #021931;
							border: 1px solid #3e566d;
							min-width: 20%;
							padding: 2px 10px;
							margin: 0 10px;
							box-shadow: inset 0 0 2px #69b2ff;
							border-radius: 6px;
						}
					}
				}
			}
		}

		.data-body {
			flex-grow: 1;
			display: flex;

			.b-left,
			.b-right {
				width: 25%;
				display: flex;
				padding: 5px;
				flex-direction: column;
        justify-content: space-around;
        > div{
          height: 400px;
        }
			}

			.b-middle {
				width: 50%;
				padding: 5px;
				display: flex;
				flex-direction: column;

				>div {
					&:first-child {
						height: 80%;
					}

					&:last-child {
						height: 20%;

						.total-block {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 100%;

							>div {
								width: 40%;
							}

							.total-label {
								color: #fff;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>
