<template>
  <div ref="myEchart" class="content" :style="{ height: '100%', width: '100%', margin: '0px 10px 10px 10px' }"></div>
</template>

<script>

  // import {
  //   raiseOldWholeData,
  //   exceptionSituation,
  //   raiseOldmanSituation,
  //   weekDayCompare,
  //   getMapDataTongji,
  //   bindFuWuLiang
  // } from '@/api/tongji/kanBanJuJiaYangLao'
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  // import xt_data from '@/assets/河北省/邢台市/geojson.json'
  import xt_data from '@/assets/全国/geojson.json'
  export default {
    mixins: [resize],
    data() {
      return {
        chartDatas2: [],
        chart: null,
        startCharts: null,
        charPie3currentIndex: 0,
        dataLen: 0
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.startCharts) {
        clearInterval(this.startCharts)
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        // getMapDataTongji().then(response => {
        //   if (response.code === 20000) {
        //     if (
        //       response.data !== null &&
        //       response.data !== '' &&
        //       response.data !== undefined
        //     ) {
        // this.countyData = []
        // for (var i = 0; i < response.data.length; i++) {
        //   var county = response.data[i]
        //   this.countyData.push({
        //     name: county.title,
        //     value: county.departmentCount,
        //     county: county
        //   })
        //   console.log('chartDatas2', this.chartDatas2)
        //   if (county.title === '邢东新区') {
        //     this.chartDatas2.push({
        //       name: '邢东新区',
        //       value: [
        //         114.597268,
        //         37.096124,
        //         county.departmentCount,
        //         county.personCount
        //       ]
        //     })
        //   }
        //   if (county.title === '经济开发区') {
        //     this.chartDatas2.push({
        //       name: '经济开发区',
        //       value: [
        //         114.565733,
        //         37.06169,
        //         county.departmentCount,
        //         county.personCount
        //       ]
        //     })
        //   }
        // }
        // console.log('chartDatas2aaaa', this.chartDatas2)
        var _self = this
        const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
        this.chart = myChart
        window.onresize = myChart.resize
        myChart.showLoading()
        var option = {}
        console.log(JSON.stringify(this.countyData))
        this.countyData = [
          { 'name': '北京市', 'value': '20', 'county': { 'title': '北京市' } },
          { 'name': '甘肃省', 'value': '40', 'county': { 'title': '甘肃省' } },
          { 'name': '四川省', 'value': '100', 'county': { 'title': '四川省' } },
          { 'name': '山西省', 'value': '200', 'county': { 'title': '山西省' } },
          { 'name': '辽宁省', 'value': '48', 'county': { 'title': '辽宁省' } },
          { 'name': '吉林省', 'value': '268', 'county': { 'title': '吉林省' } },
          { 'name': '陕西省', 'value': '369', 'county': { 'title': '陕西省' } },
          { 'name': '河北省', 'value': '500', 'county': { 'title': '河北省' } },
          { 'name': '山东省', 'value': '10', 'county': { 'title': '山东省' } },
          { 'name': '天津市', 'value': '356', 'county': { 'title': '天津市' } },
          { 'name': '河南省', 'value': '479', 'county': { 'title': '河南省' } },
          { 'name': '湖北省', 'value': '285', 'county': { 'title': '湖北省' } },
          { 'name': '重庆市', 'value': '190', 'county': { 'title': '重庆市' } },
          { 'name': '贵州省', 'value': '560', 'county': { 'title': '贵州省' } },
          { 'name': '福建省', 'value': '80', 'county': { 'title': '福建省' } },
          { 'name': '湖南省', 'value': '159', 'county': { 'title': '湖南省' } },
          { 'name': '江西省', 'value': '259', 'county': { 'title': '江西省' } },
          { 'name': '广东省', 'value': '359', 'county': { 'title': '广东省' } },
          { 'name': '海南省', 'value': '459', 'county': { 'title': '海南省' } },
          { 'name': '台湾省', 'value': '559', 'county': { 'title': '台湾省' } },
          { 'name': '江苏省', 'value': '80', 'county': { 'title': '江苏省' } },
          { 'name': '安徽省', 'value': '480', 'county': { 'title': '安徽省' } },
          { 'name': '上海市', 'value': '90', 'county': { 'title': '上海市' } },
          { 'name': '浙江省', 'value': '418', 'county': { 'title': '浙江省' } },
          { 'name': '云南省', 'value': '131', 'county': { 'title': '云南省' } },
          { 'name': '青海省', 'value': '4', 'county': { 'title': '青海省' } },
          { 'name': '广西壮族自治区', 'value': '428', 'county': { 'title': '广西壮族自治区' } },
          { 'name': '宁夏回族自治区', 'value': '248', 'county': { 'title': '宁夏回族自治区' } },
          { 'name': '西藏自治区', 'value': '138', 'county': { 'title': '西藏自治区' } },
          { 'name': '内蒙古自治区', 'value': '318', 'county': { 'title': '内蒙古自治区' } },
          { 'name': '新疆维吾尔自治区', 'value': '381', 'county': { 'title': '新疆维吾尔自治区' } },
          { 'name': '黑龙江省', 'value': '48', 'county': { 'title': '黑龙江省' } },

        ]
        echarts.registerMap('xingtai', xt_data, {})
        option = {
          title: {
            text: '全国仓库分布图',
            // subtext: 'Data from www.census.gov',
            left: 'center',
            textStyle: {
              fontSize: 24,
              color: '#026193'
              // fontWeight: 'bolder' // 字体加粗
            },
            show: true
          },
          tooltip: {
            alwaysShowContent: true,
            textStyle: {
              fontSize: 12,
              color: '#ccc'
            },
            trigger: 'item',
            backgroundColor: '#242429cc',
            formatter: function (params) {
              const value = (params.value + '').split('.')
              var valueStr = value[0].replace(
                /(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
                '$1,'
              )
              return (
                params.name +
                '<br/>仓库数量: ' +
                valueStr +
                '个'
              )
            }
          },
          // geo: {
          //   map: 'xingtai',
          //   aspectScale: 0.75,
          //   layoutCenter: ['50%', '50.5%'],
          //   layoutSize: '102%',
          //   silent: true,
          //   roam: false,
          //   z: 0,
          //   itemStyle: {
          //     normal: {
          //       areaColor: '#9db8d2',
          //       shadowColor: 'rgba(0, 0, 0, 1)',
          //       shadowBlur: 0,
          //       shadowOffsetX: 0,
          //       shadowOffsetY: 10,
          //       borderColor: 'rgba(0, 0, 0, 0.7)',
          //       borderWidth: 0.5
          //     },
          //     emphasis: {
          //       areaColor: '#2AB8FF',
          //       borderWidth: 1,
          //       color: 'green',
          //       label: {
          //         show: false
          //       }
          //     }
          //   }
          // },
          geo: {
            show: true,
            map: 'xingtai',
            roam: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#3c8dbc', // 没有值得时候颜色
                borderColor: '#097bba'
              },
              emphasis: {
                areaColor: '#fbd456' // 鼠标滑过选中的颜色
              }
            }
          },
          visualMap: {
            show: false,
            left: 'right',
            bottom: 20,
            min: 0,
            max: 100,
            text: ['高', '低'],
            calculable: true,
            textStyle: {
              color: '#fff'
            },
            inRange: {
              color: ['#f37b1d', '#1e6ff0', '#6e41c7', '#34b157'],
              symbolSize: [30, 100]
            }
          },
          toolbox: {
            show: false,
            // orient: 'vertical',
            left: 'left',
            top: 'top',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          textStyle: {
            fontSize: 16
          },
          series: [
            // {
            //   name: '机构数量',
            //   type: 'map',
            //   roam: true,
            //   map: 'xingtai',
            //   emphasis: {
            //     label: {
            //       show: true,
            //     },
            //   },
            //   label: {
            //     show: true,
            //     // formatter: '{b}:{@score}人'
            //   },
            //   data: this.countyData,
            // },
            {
              name: '机构数量',
              type: 'map',
              roam: false,
              map: 'xingtai',
              label: {
                show: false
                // formatter: '{b}:{@score}人'
              },
              data: this.countyData,
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bolder'
                },
                itemStyle: {
                  // borderType: 'solid',
                  // borderWidth: 3,
                  // borderColor: '#e83e11',
                  shadowBlur: 20,
                  shadowOffsetX: 5,
                  shadowOffsetY: 5
                }
              }
            }
            // {
            //   // 小图标圆圈
            //   symbol: 'circle',
            //   symbolSize: 20,
            //   label: {
            //     normal: {
            //       formatter: '{b}',
            //       position: 'right',
            //       show: true
            //       // textStyle: {
            //       //   color: '#f00',
            //       //   fontSize: 12
            //       // },
            //     },
            //     emphasis: {
            //       show: true
            //     }
            //   },
            //   itemStyle: {
            //     color: '#fa3008',
            //     opacity: 1,
            //     borderColor: '#9603ea',
            //     borderWidth: 1

            //     // normal: {
            //     //    opacity  : 1,
            //     //   borderColor: '#fa3008',
            //     //    borderWidth: 1,
            //     //   color: '#ff'
            //     // }
            //   },
            //   name: 'light',
            //   type: 'scatter',
            //   coordinateSystem: 'geo',
            //   data: this.chartDatas2
            // },
            // {
            //   // 小图标老人数量
            //   name: 'Top 5',
            //   type: 'scatter',
            //   coordinateSystem: 'geo',
            //   // symbol: 'pin',
            //   // symbolSize: [50, 50],
            //   symbolOffset: [0, -12],
            //   symbol: 'image://home/markertu3.png',
            //   symbolSize: [30, 30],
            //   label: {
            //     normal: {
            //       show: false,
            //       textStyle: {
            //         color: '#ff0',
            //         fontSize: 12
            //       },
            //       formatter(value) {
            //         return value.data.value[2] //
            //         // return value.data.areaCount//
            //       }
            //     }
            //   },
            //   itemStyle: {
            //     normal: {
            //       opacity: 1,
            //       borderColor: '#fa3008',
            //       borderWidth: 1,
            //       color: '#d800ff'
            //       // color: '#D8BC37' // 标志颜色
            //     }
            //   },
            //   data: this.chartDatas2,
            //   showEffectOn: 'render',
            //   rippleEffect: {
            //     brushType: 'stroke'
            //   },
            //   hoverAnimation: true,
            //   zlevel: 1
            // }
            //   {
            //     data: [
            //       { name: '宁晋县', value: [114.921027, 37.618956, 56] },
            //       { name: '襄都区', value: 0 },
            //       { name: '信都区', value: 0 },
            //       { name: '任泽区', value: 0 },
            //       { name: '南和区', value: 0 },
            //       { name: '临城县', value: 0 },
            //       { name: '内丘县', value: 0 },
            //       { name: '柏乡县', value: 0 },
            //       { name: '隆尧县', value: 0 },
            //       { name: '巨鹿县', value: 0 },
            //       { name: '新河县', value: 0 },
            //       { name: '广宗县', value: 0 },
            //       { name: '平乡县', value: 0 },
            //       { name: '威县', value: 0 },
            //       { name: '清河县', value: 0 },
            //       { name: '临西县', value: 0 },
            //       { name: '南宫市', value: 0 },
            //       { name: '沙河市', value: 0 }
            //     ],
            //     name: '点',
            //     type: 'effectScatter',
            //     coordinateSystem: 'geo',
            //     // symbol: 'pin', // 气泡
            //     symbolSize: 20,
            //     label: {
            //       normal: {
            //         show: true,
            //         formatter: function(params) {
            //           return params.data.value[2]
            //         },
            //         textStyle: {
            //           color: '#fff',
            //           fontSize: 9
            //         }
            //       }
            //     },
            //     itemStyle: {
            //       normal: {
            //         color: '#F62157' // 标志颜色'#F62157'
            //       }
            //     },
            //     zlevel: 6
            //   }
          ],
          animation: true
        }
        myChart.setOption(option)
        myChart.hideLoading()
        myChart.on('click', function (params) {
          var areaCode = params.data.county.areaCode
          var name = params.name
          var jwd = params.data.county.jwd
          _self.$router.push({
            path: '/kanban/jujiayanglao2',
            query: { name: name, areaCode: areaCode, jwd: jwd }
          })
        })
        setTimeout(() => {
          myChart.resize()
          // alert('ok')
        }, 800)

        var _this = this
        var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
        _this.charPie3currentIndex = 0
        // 2、鼠标移动上去的时候的高亮动画
        this.chart.on('mouseover', function (param) {
          isSet = false
          // 取消之前高亮的图形
          _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
            // dataIndex: _this.charPie3currentIndex
          })
          // 高亮当前图形
          _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
          // 显示 tooltip
          _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        })
        // 3、自动高亮展示
        var chartHover = function () {
          _this.dataLen = option.series[0].data.length
          // 取消之前高亮的图形
          _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
            // dataIndex: _this.charPie3currentIndex
          })
          _this.charPie3currentIndex =
            (_this.charPie3currentIndex + 1) % _this.dataLen
          // 高亮当前图形
          _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: _this.charPie3currentIndex
          })
          // 显示 tooltip
          _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: _this.charPie3currentIndex
          })
        }
        clearInterval(_this.startCharts)
        _this.startCharts = setInterval(chartHover, 2000)
        // 4、鼠标移出之后，恢复自动高亮
        this.chart.on('mouseout', function (param) {
          if (!isSet) {
            clearInterval(_this.startCharts)
            _this.startCharts = setInterval(chartHover, 2000)
            isSet = true
          }
        })
      }
    }
  }
</script>