<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-28 11:58:48
 * @FilePath: src/views/screen/components/dataManagement/EchartsMap.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div :class="className" :style="{height:height,width:width,backgroundColor: 'transparent'}" />
</template>
<script>
import chinaMap from '@/assets/json/china.json'
import * as echarts from 'echarts'

echarts.registerMap('china', chinaMap)
require('echarts/theme/macarons')

import beijingMap from '@/assets/json/province/beijing.json'
import shanghaiMap from '@/assets/json/province/shanghai.json'
import tianjinMap from '@/assets/json/province/tianjin.json'
import chongqingMap from '@/assets/json/province/chongqing.json'
import hebeiMap from '@/assets/json/province/hebei.json'
import henanMap from '@/assets/json/province/henan.json'
import yunnanMap from '@/assets/json/province/yunnan.json'
import liaoningMap from '@/assets/json/province/liaoning.json'
import heilongjiangMap from '@/assets/json/province/heilongjiang.json'
import hunanMap from '@/assets/json/province/hunan.json'
import anhuiMap from '@/assets/json/province/anhui.json'
import shandongMap from '@/assets/json/province/shandong.json'
import xinjiangMap from '@/assets/json/province/xinjiang.json'
import jiangsuMap from '@/assets/json/province/jiangsu.json'
import zhejiangMap from '@/assets/json/province/zhejiang.json'
import jiangxiMap from '@/assets/json/province/jiangxi.json'
import hubeiMap from '@/assets/json/province/hubei.json'
import guangxiMap from '@/assets/json/province/guangxi.json'
import gansuMap from '@/assets/json/province/gansu.json'
import shanxiMap from '@/assets/json/province/shanxi.json'
import neimengguMap from '@/assets/json/province/neimenggu.json'
import shanxi1Map from '@/assets/json/province/shanxi1.json'
import jilinMap from '@/assets/json/province/jilin.json'
import fujianMap from '@/assets/json/province/fujian.json'
import guizhouMap from '@/assets/json/province/guizhou.json'
import guangdongMap from '@/assets/json/province/guangdong.json'
import qinghaiMap from '@/assets/json/province/qinghai.json'
import xizangMap from '@/assets/json/province/xizang.json'
import sichuanMap from '@/assets/json/province/sichuan.json'
import ningxiaMap from '@/assets/json/province/ningxia.json'
import hainanMap from '@/assets/json/province/hainan.json'
import taiwanMap from '@/assets/json/province/taiwan.json'
import xianggangMap from '@/assets/json/province/xianggang.json'
import aomenMap from '@/assets/json/province/aomen.json'
import { getProjectMapData } from '@/api/screen/screen'



export default {
  name: 'EchartsMap',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '45rem'
    },
    proId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null,
      currentMap: 'china', // 当前地图
      provinceMap: {
        '北京': 'beijing',
        '天津': 'tianjin',
        '上海': 'shanghai',
        '重庆': 'chongqing',
        '河北': 'hebei',
        '河南': 'henan',
        '云南': 'yunnan',
        '辽宁': 'liaoning',
        '黑龙江': 'heilongjiang',
        '湖南': 'hunan',
        '安徽': 'anhui',
        '山东': 'shandong',
        '新疆': 'xinjiang',
        '江苏': 'jiangsu',
        '浙江': 'zhejiang',
        '江西': 'jiangxi',
        '湖北': 'hubei',
        '广西': 'guangxi',
        '甘肃': 'gansu',
        '山西': 'shanxi',
        '内蒙古': 'neimenggu',
        '陕西': 'shanxi1',
        '吉林': 'jilin',
        '福建': 'fujian',
        '贵州': 'guizhou',
        '广东': 'guangdong',
        '青海': 'qinghai',
        '西藏': 'xizang',
        '四川': 'sichuan',
        '宁夏': 'ningxia',
        '海南': 'hainan',
        '台湾': 'taiwan',
        '香港': 'xianggang',
        '澳门': 'aomen'
      },
      selectedProvince: '',
      projectMapData: []
    }
  },
  watch: {
    projectMapData: {
      handler: function() {
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      // Register province maps
      echarts.registerMap('北京', beijingMap)
      echarts.registerMap('上海', shanghaiMap)
      echarts.registerMap('天津', tianjinMap)
      echarts.registerMap('重庆', chongqingMap)
      echarts.registerMap('河北', hebeiMap)
      echarts.registerMap('河南', henanMap)
      echarts.registerMap('云南', yunnanMap)
      echarts.registerMap('辽宁', liaoningMap)
      echarts.registerMap('黑龙江', heilongjiangMap)
      echarts.registerMap('湖南', hunanMap)
      echarts.registerMap('安徽', anhuiMap)
      echarts.registerMap('山东', shandongMap)
      echarts.registerMap('新疆', xinjiangMap)
      echarts.registerMap('江苏', jiangsuMap)
      echarts.registerMap('浙江', zhejiangMap)
      echarts.registerMap('江西', jiangxiMap)
      echarts.registerMap('湖北', hubeiMap)
      echarts.registerMap('广西', guangxiMap)
      echarts.registerMap('甘肃', gansuMap)
      echarts.registerMap('山西', shanxiMap)
      echarts.registerMap('内蒙古', neimengguMap)
      echarts.registerMap('陕西', shanxi1Map)
      echarts.registerMap('吉林', jilinMap)
      echarts.registerMap('福建', fujianMap)
      echarts.registerMap('贵州', guizhouMap)
      echarts.registerMap('广东', guangdongMap)
      echarts.registerMap('青海', qinghaiMap)
      echarts.registerMap('西藏', xizangMap)
      echarts.registerMap('四川', sichuanMap)
      echarts.registerMap('宁夏', ningxiaMap)
      echarts.registerMap('海南', hainanMap)
      echarts.registerMap('台湾', taiwanMap)
      echarts.registerMap('香港', xianggangMap)
      echarts.registerMap('澳门', aomenMap)
      // Register more province maps as needed
      this.updateChartOption();
    },
    updateChartOption() {
      let data  = this.projectMapData
      console.log('updateChartOption', data)
      let option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            if (params.componentType === 'series' && params.componentSubType === 'effectScatter' && params.seriesType === 'effectScatter') {
              console.log(params);
              return this.getTooltipContent(params);
            }
            return '';
          },
          axisPointer: {
            type: 'line',
            label: { show: true },
            lineStyle: { color: '#c91d1d', width: 1, type: 'solid' },
            snap: true,
            z: 99999
          },
          position: (point) => [point[0], point[1] - 180]
        },
        geo: {
          map: this.currentMap,
          aspectScale: 0.90,
          layoutCenter: ['50%', '50%'],
          layoutSize: '118%',
          itemStyle: {
            normal: { shadowColor: '#276fce', shadowOffsetX: 0, shadowOffsetY: 15, opacity: 0.5 },
            emphasis: { areaColor: '#276fce' }
          },
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)',
                normal: { opacity: 0, label: { show: false } }
              },
              label: { show: false, color: '#FFFFFF', fontSize: 12 }
            }
          ],
          roam: true,
          scaleLimit: { min: 0.5, max: 2 }
        },
        series: [
          {
            type: 'map',
            mapType: this.currentMap,
            aspectScale: 0.90,
            layoutCenter: ['50%', '50%'],
            layoutSize: '118%',
            zoom: 1,
            roam: true,
            scaleLimit: { min: 0.5, max: 2 },
            itemStyle: {
              normal: { areaColor: '#0c274b', borderColor: '#1cccff', borderWidth: 1.5 },
              emphasis: { areaColor: '#02102b', label: { color: '#fff' } }
            }
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { brushType: 'stroke' },
            label: { normal: { show: true, position: 'right', formatter: '{b}' } },
            itemStyle: { normal: { color: '#ffa022' } },
            data: data.map(item => ({
              proId: item.proId,
              name: item.name,
              address: item.address,
              leader: item.leader,
              supervisionUnit: item.supervisionUnit,
              constructionUnit: item.constructionUnit,
              startDate: item.startDate,
              value: [item.lon, item.lat].concat(item.value)
            })),
            emphasis: { itemStyle: { borderColor: '#fff', borderWidth: 2 } }
          }
        ]
      };
      //双击切换地图
      this.chart.on('dblclick', this.handleMapClick);
      this.chart.on('click', this.openDialog);
      this.chart.on('georoam', (params) => {
        let option = this.chart.getOption() //获得option对象
        if (params.zoom !== undefined) {
          //捕捉到缩放时
          option.geo[0].zoom = option.series[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
          option.geo[0].center = option.series[0].center //下层的geo的中心位置随着上层geo一起改变
        } else {
          //捕捉到拖曳时
          option.geo[0].center = option.series[0].center //下层的geo的中心位置随着上层geo一起改变
        }
        this.chart.setOption(option) //设置option
      })
      this.chart.setOption(option);
    },
    getTooltipContent(params) {
      return '<span style="color: rgb(6, 178, 251);font-size: 1.2em;">&nbsp;&nbsp;</span> ' + params.name + "<br>" +
        '<span style="color: rgb(6, 178, 251);font-size: 1.2em;">•</span> 工程地址：' + params.data.address + "<br>" +
        '<span style="color: rgb(6, 178, 251);font-size: 1.2em;">•</span> 工程负责人：' + params.data.leader + '<br>' +
        '<span style="color: rgb(6, 178, 251);font-size: 1.2em;">•</span> 监理单位：' + params.data.supervisionUnit + '<br>' +
        '<span style="color: rgb(6, 178, 251);font-size: 1.2em;">•</span> 承包商单位：' + params.data.constructionUnit + '<br>' +
        '<span style="color: rgb(6, 178, 251);font-size: 1.2em;">•</span> 开工日期：' + params.data.startDate;
    },

    handleMapClick(params) {
      this.chart = null;
      this.chart = echarts.init(this.$el, 'macarons');
      if (params.componentType === 'series' && params.seriesType === 'map') {
         // 获取点击的区域名
        if (this.currentMap === 'china') {
          this.currentMap = params.name;
          this.selectedProvince = params.name
          const mapCenter = echarts.getMap(params.name).geoJson.features[0].properties.cp;
          this.chart.setOption({
            geo: {
              center: mapCenter // Set center point
            },
            series: [{
              center: mapCenter, // Ensure the series layer follows the geo layer
            }]
          });
        } else {
          this.currentMap = 'china';
          this.selectedProvince = ''
          this.chart.setOption({
            geo: {
              zoom: 1, // Reset zoom level
              center: [104.114129, 37.550339] // Reset center point
            },
            series: [{
              center: [104.114129, 37.550339], // Ensure the series layer follows the geo layer
              zoom: 1 // Reset zoom level for the series layer
            }]
          });
        }
        this.getProjectMapData()
        this.updateChartOption(); // 更新图表
      }
    },
    openDialog(params) {
      if (params.componentType === 'series' && params.seriesType === 'effectScatter') {
        this.$emit('openDialog', params.data);
      }
    },
    getProjectMapData() {
      const params = {
        proId: this.$props.proId,
        selectedProvince: this.selectedProvince
      }
      getProjectMapData(params).then(res => {
        console.log('getProjectMapData', res)
        this.projectMapData = []
        this.projectMapData = res.data
      })
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.chart.on('dblclick', this.handleMapClick);
      this.chart.on('click', this.openDialog);
    });
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
}
</script>
<style scoped lang="scss">
</style>
