<template>
  <div class="map-warp">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <Chart v-else ref="chart" :options="options" @mapClick="mapClick" />
    <div class="map-left-box">
      <template v-for="(item,index) in tableData">
        <div :key="index" class="box-value">
          <span class="num">{{ index + 1 }}</span>
          <span class="name">{{ item.addName }}</span>
          <span class="value"><span style="min-width: 25px;display: inline-block;">{{ (item.stationCapacity / 1000).toFixed(2) }}</span>MWh</span>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
// import chinaMap from '@/assets/mapJson/chinaMap.json'
import worldJson from 'echarts/map/json/world.json'
// import { chinaMapOutline } from '@/assets/mapJson/chinaMapOut.js'
import blue from '../../../assets/new-screen/map-blue.png'
import { GetStationInfo, GetCapacity, GetRegionalDistribution } from '@/api/screen/zzScreen'
export default {
  data() {
    return {
      options: {},
      pointData: [],
      pointIndex: 0,
      timer: null,
      currentToolTip: {},
      loading: true,
      tableData: [],
      mapData: [],
      stationNum: []
    }
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    mapClick(params) {
      if (params.seriesType === 'effectScatter' || params.name === '四川') {
        const routeParams = {
          url: '/dashboard-test/dashboard-test',
          urlName: 'dashboard-test',
          data: {
            id: params.data.id
          }
        }
        this.$store.dispatch('user/menuChange', routeParams)
      }
    },
    async getStationNum(deptId) {
      const { data } = await GetRegionalDistribution({
        deptId: deptId
      })
      this.mapData = data
      this.mapData.map((el) => {
        el.name = el.addName
        el.value = el.regionValue
        this.stationNum.push(el.value)
      })
    },
    async getLeftData(deptId) {
      try {
        const { data } = await GetCapacity({
          deptId: deptId
        })
        this.tableData = data
      } catch (error) {
        console.log(error)
      }
    },
    async getData(deptId) {
      this.loading = true
      try {
        const { data } = await GetStationInfo({
          deptId: deptId
        })
        console.log('GetStationInfo', data)
        const province = []
        if (data.length) {
          data.forEach((el) => {
            el.value = [el.latitude, el.longitude]
            el.symbol = 'image://' + blue
            el.cityCode = 1000
            province.push(el)
          })
          this.pointData = province
        } else {
          this.pointData = [{ symbol: 'image://' + blue, cityCode: 1000, value: [118.8062, 31.9208], name: '江苏' }]
        }
      } finally {
        this.loading = false
      }
      this.getInitMap()
    },
    getInitMap() {
      this.$echarts.registerMap('world', worldJson)
      // this.$echarts.registerMap('china', chinaMap)
      // this.$echarts.registerMap('chinaMapOutline', chinaMapOutline)
      this.pointData = [
        { name: 'Beijing', value: [116.4074, 39.9042] }, // 北京
        { name: 'New York', value: [-74.0060, 40.7128] }, // 纽约
        { name: 'London', value: [-0.1278, 51.5074] } // 伦敦
      ]
      var series = [
        {
          // map: 'china',
          name: '国家',
          map: 'world',
          type: 'map',
          roam: false,
          // zoom: 1.65,
          zoom: 1.1,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          // top: '29%',
          top: '10%',
          tooltip: {
            show: false
          },
          itemStyle: {
            normal: {
              areaColor: 'transparent',
              borderColor: 'rgba(21,138,246,100%)',
              borderWidth: 1
            },
            emphasis: {
              areaColor: '#0B63B0',
              textStyle: {
                color: 'red'
              }
            }
          },
          // data: this.mapData
          data: [{ name: 'China', value: 100 }]
        },

        {
          name: '散点',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          rippleEffect: {
            color: 'purple', // 涟漪颜色,默认为散点自身颜色
            brushType: 'fill', // 动画方式,全填充或只有线条,'stroke'
            period: 4, // 动画周期
            scale: '0.5' // 涟漪规模
          },
          itemStyle: {
            normal: {
              color: '#F4E925',
              shadowColor: '#333'
            }
          },
          symbolSize: 10,
          data: [this.pointData[this.pointIndex]]

          // showEffectOn: 'render' // 加载完毕显示特效
        }
      ]

      this.options = {
        visualMap: {
          min: 0,
          max: Math.max(...this.stationNum),
          right: 'right',
          top: 'bottom',
          text: [this.$t('screen.high') + '(' + this.$t('screen.stationNum') + ')', this.$t('screen.low') + '(' + this.$t('screen.stationNum') + ')'],
          calculable: true,
          inRange: {
            // color: ['#5edfd6', '#37d4cf', '#14c9c9', '#0da5aa', '#07828b']
            // color: ['#fcf26b', '#fbe842', '#fadc19', '#cfaf0f', '#a38408']
            color: ['#6aa1ff', '#4080ff', '#165dff', '#0e42d2', '#072ca6', '#031a79']
            // color: ['#8d4eda', '#722ed1', '#551db0', '#3c108f', '#27066e']
            // color: ['#e13edb', '#d91ad9', '#b010b6', '#8a0993', '#650370']
            // color: ['#23c343', '#00b42a', '#009a29', '#008026', '#006622']

          },
          textStyle: {
            color: '#F5FAFF'
          },
          seriesIndex: [0]
        },
        tooltip: {
          trigger: 'item',
          alwaysShowContent: true,
          backgroundColor: 'transparent',
          position: 'top',
          triggerOn: 'click',
          enterable: true,
          formatter: params => {
            // 获取xAxis data中的数据
            let dataStr = `<div></div>`
            dataStr += `<div>
                      <span style="padding-left:10px;font-weight:bold;margin-left:20px;margin-top:5px;font-size="14px">${params.name}</span>
                  </div>`
            dataStr += `<div style="margin-top:15px">
                      <span style="padding-left:10px;">投运时间</span>
                      <span style="margin-left:5px;margin-right:10px;color:rgba(245, 221, 0, 1);font-family:DIN;">${params.data.createTime}</span>
                  </div>`
            dataStr += `<div style="margin-top:2px;">
                      <span style="padding-left:10px;">装机容量</span>
                      <span style="margin-left:5px;margin-right:5px;color:rgba(245, 221, 0, 1);font-family:DIN;">${params.data.capacity}</span>
                      <span style="color:rgba(245, 221, 0, 1);">kWh</span>
                  </div>`
            const div = `<div  style='max-width:220px;height:85px;
            background-image:url(${require('../../../assets/new-screen/tooltip-bg.png')});background-repeat: no-repeat;background-size:100% 100%;' >${dataStr}</div>`
            return div
          }
        },
        color: ['#34c6bb'],
        geo: [
          {
            silent: true,
            // map: 'chinaMapOutline',
            map: 'world',

            zoom: 1.1,
            // top: '10%',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },

            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'rgba(3,56,100,50%)',
                borderColor: 'transparent',
                borderWidth: 1.5,
                shadowColor: 'transparent',
                shadowOffsetX: 0,
                shadowOffsetY: 4,
                shadowBlur: 10
              },
              emphasis: {
                areaColor: 'transparent', // 悬浮背景
                textStyle: {
                  color: '#fff'
                }
              }
            }

          },
          {
            silent: true,
            map: 'chinaMapOutline',
            // zoom: 1.1,
            zoom: 1.2,
            top: '7%',
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },

            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'rgba(1,28,50,100%)',
                borderColor: '#0089FB',
                borderWidth: 1.5,
                shadowColor: '#0089FB',
                shadowOffsetX: 0,
                shadowOffsetY: 4,
                shadowBlur: 15
              },
              emphasis: {
                areaColor: 'transparent', // 悬浮背景
                textStyle: {
                  color: '#fff'
                }
              }
            }

          }],
        series: series
      }

      setTimeout(() => {
        this.$refs.chart?.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 1, // 针对series下第几个数据
          dataIndex: 0 // 第几个数据
        })
      }, 0)

      if (!this.timer) {
        this.timer = setInterval(() => {
          this.pointIndex++
          if (this.pointIndex === this.pointData.length) {
            this.pointIndex = 0
          }
          this.getInitMap()
        }, 5000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.map-warp {
  width: 100%;
  height: 100%;
  position: relative;

  .map-left-box{

    width: 220px;
    height: 180px;
    // border: 1px solid;
    z-index: 9999999;
    position: absolute;
    left: 0;
    bottom: 10px;
    overflow: auto;
    margin-right: 10px;

    .box-value{

      width: 100%;
      height: 24px;
      line-height: 24px;
      background-size: 100% 100%;
      background: url(../../../assets/new-screen/nomal-bg.png)no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      .num{
        width: 20px;
        font-size: 12px;
        padding-left: 20px;
        font-family: DIN;
        height: 24px;
        line-height: 24px;
        text-align: center;
      }
      .name{
        font-size: 12px;
        text-align: center;
        height: 24px;
        line-height: 24px;
      }
      .value{
        font-size: 12px;
        width: 80px;
        line-height: 24px;
        height: 24px;
        background: url(../../../assets/new-screen/select-bg.png)no-repeat;
        background-size: 100% 100%;
        text-align: center;
      }
    }
  }
  .map-right-box{
    width: 200px;
    height: 200px;
    border: 1px solid;
    z-index: 9999999;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.box{
  width: 100px;
  height: 100px;

}
::v-deep *::-webkit-scrollbar{
      background-color: transparent!important;
    }
    ::v-deep *::-webkit-scrollbar-thumb{
      background-color: transparent!important;
    }

</style>
