<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': '48', 'county': { 'title': '北京', 'jwd': '114.52153 , 38.04831', 'personCount': '22831', 'departmentCount': '48', 'ad': '110000' }},


      { 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}]
        // { 'name': '襄都区', 'value': '48', 'county': { 'title': '襄都区', 'jwd': '114.492019,37.061614', 'personCount': '22831', 'departmentCount': '48', 'areaCode': '130502' }},
        // { 'name': '信都区', 'value': '131', 'county': { 'title': '信都区', 'jwd': '114.468435,37.059882', 'personCount': '12487', 'departmentCount': '131', 'areaCode': '130503' }},
        // { 'name': '任泽区', 'value': '67', 'county': { 'title': '任泽区', 'jwd': '114.671936,37.120983', 'personCount': '10179', 'departmentCount': '67', 'areaCode': '130505' }},
        // { 'name': '南和区', 'value': '16', 'county': { 'title': '南和区', 'jwd': '114.683762,37.005041', 'personCount': '3909', 'departmentCount': '16', 'areaCode': '130506' }},
        // { 'name': '临城县', 'value': '30', 'county': { 'title': '临城县', 'jwd': '114.506873,37.444009', 'personCount': '4023', 'departmentCount': '18', 'areaCode': '130522' }},
        // { 'name': '内丘县', 'value': '29', 'county': { 'title': '内丘县', 'jwd': '114.511523,37.287663', 'personCount': '6724', 'departmentCount': '19', 'areaCode': '130523' }},
        // { 'name': '柏乡县', 'value': '70', 'county': { 'title': '柏乡县', 'jwd': '114.693382,37.483596', 'personCount': '1625', 'departmentCount': '7', 'areaCode': '130524' }},
        // { 'name': '隆尧县', 'value': '10', 'county': { 'title': '隆尧县', 'jwd': '114.776348,37.350925', 'personCount': '44038', 'departmentCount': '10', 'areaCode': '130525' }},
        // { 'name': '宁晋县', 'value': '71', 'county': { 'title': '宁晋县', 'jwd': '114.921027,37.618956', 'personCount': '13381', 'departmentCount': '71', 'areaCode': '130528' }},
        // { 'name': '巨鹿县', 'value': '55', 'county': { 'title': '巨鹿县', 'jwd': '115.038782,37.21768', 'personCount': '8627', 'departmentCount': '55', 'areaCode': '130529' }},
        // { 'name': '新河县', 'value': '8', 'county': { 'title': '新河县', 'jwd': '115.247537,37.526216', 'personCount': '212', 'departmentCount': '8', 'areaCode': '130530' }},
        // { 'name': '广宗县', 'value': '27', 'county': { 'title': '广宗县', 'jwd': '115.142797,37.075548', 'personCount': '4903', 'departmentCount': '27', 'areaCode': '130531' }},
        // { 'name': '平乡县', 'value': '39', 'county': { 'title': '平乡县', 'jwd': '115.029218,37.069404', 'personCount': '1884', 'departmentCount': '39', 'areaCode': '130532' }},
        // { 'name': '威县', 'value': '14', 'county': { 'title': '威县', 'jwd': '115.272749,36.983272', 'personCount': '4831', 'departmentCount': '14', 'areaCode': '130533' }},
        // { 'name': '清河县', 'value': '25', 'county': { 'title': '清河县', 'jwd': '115.668999,37.059991', 'personCount': '6240', 'departmentCount': '25', 'areaCode': '130534' }},
        // { 'name': '临西县', 'value': '7', 'county': { 'title': '临西县', 'jwd': '115.498684,36.8642', 'personCount': '1903', 'departmentCount': '7', 'areaCode': '130535' }},
        // { 'name': '经济开发区', 'value': '22', 'county': { 'title': '经济开发区', 'jwd': '114.565733,37.061690', 'personCount': '24184', 'departmentCount': '22', 'areaCode': '130571' }},
        // { 'name': '南宫市', 'value': '24', 'county': { 'title': '南宫市', 'jwd': '115.398102,37.359668', 'personCount': '8200', 'departmentCount': '24', 'areaCode': '130581' }},
        // { 'name': '沙河市', 'value': '23', 'county': { 'title': '沙河市', 'jwd': '114.504902,36.861903', 'personCount': '4745', 'departmentCount': '23', 'areaCode': '130582' }},
        // { 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}]
      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,'
            )
            var personCount = 0
            if (params.componentSubType === 'scatter') {
              // debugger
              valueStr = params.data.value[2]
              personCount = params.data.value[3]
            } else {
              personCount = params.data.county.personCount
            }
            return (
              params.name +
                    '<br/>老人数量: ' +
                    personCount +
                    '人<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>
