<template>
  <div style="height: 100%; position: relative">
    <!-- 中国地图 -->
    <div class="top-btns">
      <div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
      <div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
      <div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
    </div>
    <div class="echarts" id="mapChart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
let mapJson = require('./sx.json')
// let mapBg = require('./assets/home/map-bg.jpg')
let tjf = require('./assets/home/tianjifeng.png')
let twoIcon = require('./assets/home/yd-icon.png')
import labelBg from '../../img/value-bg.png'
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'

console.log(twoIcon)
import 'echarts-gl'
export default {
  props: {
    isZoom: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      btnIndex: 1,
      cityData: [
        // {
        //   cityName: '合肥市',
        //   deptName: '安徽送变电工程有限公司',
        //   value: [117.227239, 31.820586, 100],
        //   totalValue: 100,
        //   totalEquipmentQuantity: 100,
        //   configRate: 100,
        //   lineNum: 100,
        //   substationNum: 100,
        //   cableNum: 100,
        // },
        // {
        //   cityName: '蚌埠市',
        //   deptName: '蚌埠送变电工程有限公司',
        //   value: [117.330324, 33.107951, 100],
        //   totalValue: 100,
        //   totalEquipmentQuantity: 100,
        //   configRate: 100,
        //   lineNum: 100,
        //   substationNum: 100,
        //   cableNum: 100,
        // },
      ],
    }
  },
  mounted() {
    // this.initChart()
    this.getInfo()
  },

  methods: {
    handleBtn(index) {
      this.btnIndex = index
      this.cityData = []
      this.getInfo()
    },
    async getInfo() {
      try {
        let res = null
        if (this.btnIndex == 1) {
          res = await getUnitEquipmentConfigurationApi()
          if (!res.data) return
          this.cityData = res.data.map((item) => {
            let value = item.location.split(',')
            value.push(item.totalValue)
            // console.log('🚀 ~ getInfo ~ value:', value)
            return {
              ...item,
              value,
            }
          })
        } else if (this.btnIndex == 2) {
          res = await getEquipmentNumberApi()
          this.cityData = res.data.map((item) => {
            let value = item.location.split(',')
            value.push(item.num)
            // console.log('🚀 ~ getInfo ~ value:', value)
            return {
              ...item,
              value,
              deptName: item.name,
            }
          })
        } else if (this.btnIndex == 3) {
          res = await getMechanizationRateApi()
        }
        this.$nextTick(() => {
          console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
          this.initChart()
        })
        console.log('🚀 ~ 地图数据 ~ res:', res)
      } catch (error) {
        console.log('🚀 ~ 地图数据 ~ error:', error)
        // this.initChart()
      }
    },
    initChart(jsonData = mapJson) {
      // 模拟数据
      let arr = this.cityData.map((item) => {
        return {
          ...item,
          name: item.cityName,
        }
      })

      echarts.registerMap('ah', jsonData)
      const charEle = document.getElementById('mapChart')
      const myChart = echarts.init(charEle)
      // let tooltip = gzjhTooltip(arr)
      const option = {
        tooltip: {
          show: true,
          backgroundColor: 'transparent',
          borderWidth: 0,
          formatter: function (e) {
            let n = e.name
            let res = ''
            arr.forEach((data) => {
              // console.log('🚀 ~ 提示数据 ~ data:', data)
              if (data.cityName === n) {
                res =
                  "<div style='width: 330px;height: 285px; background: url(" +
                  require('../../img/dialog.png') +
                  ") no-repeat;background-size:100% 100%;'>" +
                  "<div style='width: 300px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
                  n +
                  '</div>' +
                  "<div style='margin-top:10px;margin-bottom:5px;width: 300px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>装备价值：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1);'>" +
                  (data.totalValue / 100000000).toFixed(4) +
                  " <span style='color:#FFF;font-size:14px'> 亿元</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>装备数量：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.totalEquipmentQuantity +
                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>配置率：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.configRate +
                  "<span style='color:#FFF;font-size:14px'> %</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>线路数量：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.lineNum +
                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>变电数量：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.substationNum +
                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
                  require('./assets/home/map-item-row.png') +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  "<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
                  '<div>电缆数量：' +
                  '</div>' +
                  "<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
                  data.cableNum +
                  "<span style='color:#FFF;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  '</div>'
              }
            })
            return res
          },
        },
        geo3D: {
          map: 'ah',
          zoom: 1,
          roam: false,
          label: { show: false },
          itemStyle: {
            opacity: 0, //.01 // important!
          },
          emphasis: {
            label: { show: false },
            itemStyle: { opacity: 0 },
          },
          regionHeight: 0,
          shading: 'lambert',
          // lambertMaterial: {
          //   detailTexture: mapBg
          // },

          viewControl: {
            zoomSensitivity: false,
            rotateSensitivity: 0,
            projection: 'orthographic',
            autoRotate: false,
            autoRotateAfterStill: 1,
            orthographicSize: 100,
            minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: false, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
          },
          light: {
            //光照阴影
            main: {
              color: '#02fce7', //光照颜色
              intensity: 0.5, //光照强度
              shadow: true, //是否显示阴影
              shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
              alpha: 30,
              beta: 90,
            },
            ambient: {
              color: '#fff',
              intensity: 1,
            },
          },
          zlevel: -8,
        },
        // 要显示的散点数据
        series: [
          {
            left: 2,
            top: 8,
            bottom: 20,
            type: 'map3D',
            map: 'ah',
            roam: false,
            data: arr,
            itemStyle: {
              // color: "#4b6f52",
              color: 'transparent',
              borderWidth: 2,
              borderColor: '#b8cad1',
              opacity: 1,
            },
            emphasis: {
              disabled: true, //是否可以被选中
              label: {
                //移入时的高亮文本
                show: true,
                color: '#FFF', //显示字体颜色变淡
              },
              itemStyle: {
                // color: "#4b6f52",
                color: 'rgba(3,240,247,0.3)',
              },
            },
            regionHeight: 0,
            shading: 'lambert',
            // lambertMaterial: {
            //   detailTexture: mapBg,
            //   textureTiling: 1,
            //   // textureOffset:20
            // },
            viewControl: {
              zoomSensitivity: false,
              rotateSensitivity: 0,
              projection: 'orthographic',
              autoRotate: false,
              autoRotateAfterStill: 1,
              orthographicSize: 94,
              minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
              animation: false, // 是否开启动画。[ default: true ]
              animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
            },
            label: {
              show: true,
              color: '#FFF',
              position: 'top',
              fontSize: 18,
            },
            light: {
              //光照阴影
              main: {
                color: 'rgb(14,70,82)', //光照颜色
                intensity: 0.1, //光照强度
                shadow: true, //是否显示阴影
                shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
                alpha: 30,
                beta: 90,
              },
              ambient: {
                color: '#fff',
                intensity: 1,
              },
            },
            zlevel: 1,
            zoom: 1,
            scaleLimit: {
              // 限制缩放的比例
              min: 1, // 最小缩放比例
              max: 1, // 最大缩放比例
            },
          },
          {
            type: 'scatter3D',
            data: arr,
            symbol: 'circle',
            symbolSize: 18,
            coordinateSystem: 'geo3D',
            label: {
              show: true,
              position: 'top', // 先指定一个基准位置（如 'top'）
              offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
              // triggerEvent: true,
              formatter: (params) => {
                // console.log('🚀 ~ initChart ~ params:', params)
                const val = params.data.value || []
                let unit = ''
                if (this.btnIndex === 1) unit = '亿'
                else if (this.btnIndex === 2) unit = '台'
                else if (this.btnIndex === 3) unit = '%'
                return val.length
                  ? `{val|${this.btnIndex === 1 ? (val[2] / 100000000).toFixed(4) : val[2]} ${unit}}\n{name|${
                      params.data.deptAbbreviation
                    }}`
                  : `{name|${params.data.deptAbbreviation}}`
              },
              rich: {
                val: {
                  backgroundColor: { image: labelBg },
                  height: 28,
                  minWidth: 70,
                  lineHeight: 28,
                  padding: [0, 10],
                  align: 'center',
                  verticalAlign: 'middle',
                  color: '#fff',
                  fontSize: 23,
                },
                name: {
                  color: '#fff',
                  fontFamily: 'DS-TITLE',
                  fontSize: 21,
                  padding: [6, 0, 0, 0],
                },
              },
            },
            itemStyle: {
              color: 'rgba(217, 94, 0, 1)',
            },
            zlevel: 1,
          },
        ],
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: tjf, // 图片的 URL
                width: 991, // 图片宽度
                height: 950, // 图片高度
                // 位置根据实际需求调整
                x: 0,
                y: 0,
              },
              left: 'center',
              top: 'center',
            },
          ],
        },
      }
      myChart.setOption(option)
      // 监听地图绑定双击事件（双击进入地图下一级）
      myChart.on('click', (params) => {
        console.log('🚀 ~ 点击 ~ params-->:', params)
        console.log('🚀 ~ initChart ~ params.data-->>:', params.data)
        if (params.seriesType === 'map3D' && params.data) {
          let city =
            params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.name.replace(/市$/, '')

          console.log('🚀 ~ initChart ~ this.$router:', this.$router)
          this.$router.push({
            path: '/screen/cityScreen',
            query: {
              cityName: city,
            },
          })
        }
      })
      myChart.on('mouseover', (params) => {
        // console.log('🚀 ~ 移入 ~ params:', params)
      })
      myChart.on('mouseout', () => {
        // this.selectedCity = null
      })
      return myChart
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts {
  width: 1100px;
  height: 869px;
  margin: 20px auto 0;
  transform: scale(1.1, 0.85);
  transform-origin: 50% 30%;
}

.top-btns {
  margin-top: 100px;
  margin-left: -180px;
  display: flex;
  justify-content: center;
  .btn:not(:last-child) {
    margin-right: 80px;
  }

  .btn {
    font-size: 18px;
    text-align: center;
    padding: 6px 15px;
    font-family: DS-TITLE;
    color: #ccc;
    background-image: url('../../img/btn.png');
    background-size: 100% 100%;
    cursor: pointer;
  }

  .active {
    background-image: url('../../img/btn-active.png');
    background-size: 100% 100%;
  }
}
</style>
