<script lang="ts">
export default {
  name: "mapindex", // 地图
};
</script>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import router from '@/router';
import * as echarts from 'echarts';
import "echarts/map/js/china.js";
import JSON from "./henan.json"
import { useUserStore } from '@/store/modules/user';
import {  getAllSubstationList } from "@/api/areaboard";
import donghua  from "@/assets/002000.gif";
import guangquan  from "@/assets/cheng.gif";

import Cookies from 'js-cookie';
const userStore = useUserStore();
let myChart:any = null
let option:any = ref({
    title: {
      left: "center",
      textStyle: {
        fontSize: 16,
      },
    },
    series:[]
  })

function getInit(){
  // let params ={userStore.stationData != undefined
  //   flag:""
  // }
  // getAllSubstationList(params).then((res: any) => {
    let mapData:any = JSON
    let chartData:any = []
    let chartData2:any = []
   for (var i = 0; i < userStore.stationData.length; i++) {
    let name = userStore.stationData[i].stationName;
    let code = userStore.stationData[i].stationCode;
    let cp = [];
    
    if(userStore.stationData[i].coordinate != undefined &&userStore.stationData[i].coordinate != ''){
      cp = userStore.stationData[i].coordinate.split(",")
    }else{
      cp =['','']
    }
    if(i==0){
      chartData2.push({
        name: name,
        value: cp.concat(5),
        code: code,
        stationName:userStore.stationData[i].stationName,
        stationCode:userStore.stationData[i].stationCode,
        stationId:userStore.stationData[i].stationId,
        
      })
    }else{
      chartData.push({
        name: name,
        value: cp.concat(5),
        code: code,
        stationName:userStore.stationData[i].stationName,
        stationCode:userStore.stationData[i].stationCode,
        stationId:userStore.stationData[i].stationId,
        
      })
    }
  }
  echarts.registerMap("henan", mapData);
  renderMap("henan", chartData,chartData2)
  // })
}
function mouseleave(){
  myChart.setOption(option.value,true)
	}
onMounted(() => {

  myChart = echarts.init(document.getElementById("chart1") as HTMLDivElement, null as any, {
      renderer: "svg"
    });
    getInit()



})

  function renderMap(map:any, data:any, data2:any) {
    //绘制地图
    option.value.title.subtext = "";

    //地理坐标系组件
    option.value.geo = {
      top: '1%',
      //引入地图 ，渲染地图凹凸显示
      map: map,
      label: {
        show: true,
        color: "#00f9a2",
        emphasis: {
          show: true,
          color: "#00f9a2",
        },
      },
      roam: true, //禁止缩放
      zoom: 1,
      itemStyle: {
        borderColor: "#00f9a2", //地图边界线的颜色
        areaColor: "rgb(11,113,96)", //地图整体区域的颜色
        shadowColor: "#00f9a2",
        shadowBlur: 2,
        shadowOffsetX: 1,
        emphasis: {
          areaColor: "rgb(11,113,96)", //鼠标滑过的颜色
        },
      },
    }
      // 地图标点
      option.value.series = [
      {
          name: "点",
          type: "scatter",
          // type: "effectScatter",
          coordinateSystem: "geo",
          // symbol: "image://http://localhost:3000/dev-api/avatar/1.gif?imageView2/1/w/80/h/80",
          // symbol: "image://data:image/png;base64,[encoded data, 6360 characters]",
          symbol: "image://"+guangquan,
          symbolSize: [100, 100],
          symbolOffset: [0, 0], //关系图节点标记相对于原本位置的偏移。[0, '50%']
          large: true,
          
          label: {
                formatter: '{b}',
                fontSize: 16,
                position: 'top',
                color:'#ffffff',
                show: false
            },
          
          emphasis: {
              itemStyle: {
                  color: 'purple'
              },
              label: {
                  show: true
              },
              lineStyle: {
            //==========关系边的公用线条样式。
              color: "rgba(255,0,255,0.4)",
              width: "3",
              type: "dotted", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
              curveness: 1, //线条的曲线程度，从0到1
              opacity: 1,
              // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              emphasis: {
                //高亮状态
              },
            },
          },
          zlevel: 12,
          data: data.map(function (itemOpt:any){
            return {
              name: itemOpt.name,
              value: [
                parseFloat(itemOpt.value[0]),//经度
                parseFloat(itemOpt.value[1])//维度
              ],
              stationId:itemOpt.stationId,
              stationCode:itemOpt.stationCode,
              stationName:itemOpt.stationName,
            }
          }),
        },{
          name: "点",
          type: "scatter",
          // type: "effectScatter",
          coordinateSystem: "geo",
         // symbol: "image://data:image/png;base64,[encoded data, 7652 characters]",
         symbol: "image://"+donghua,
         symbolSize: [100, 100],
          symbolOffset: [0, 0], //关系图节点标记相对于原本位置的偏移。[0, '50%']
          large: true,
          
          label: {
                formatter: '{b}',
                fontSize: 16,
                position: 'top',
                color:'#ffffff',
                show: false
            },
   
            emphasis: {
              itemStyle: {
                color: 'purple'
              },
              label: {
                  show: true
              },
              lineStyle: {
              //==========关系边的公用线条样式。
              color: "rgba(255,0,255,0.4)",
              width: "3",
              type: "dotted", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
              curveness: 1, //线条的曲线程度，从0到1
              opacity: 1,
              // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              emphasis: {
                //高亮状态
              },
            },
          },
          zlevel: 12,
          data: data2.map(function (itemOpt:any){
            return {
              name: itemOpt.name,
              stationId:itemOpt.stationId,
              stationCode:itemOpt.stationCode,
              stationName:itemOpt.stationName,
              value: [
              parseFloat(itemOpt.value[0]),//经度
              parseFloat(itemOpt.value[1])//维度
          ]
            }
          }),
        },
      ]
    //渲染地图
      myChart.on('click', (params:any) => {
        if (params.data != undefined) {
          Cookies.set('stationIds', params.data.stationId);
          userStore.stationCode = params.data.stationCode
          userStore.stationName= params.data.stationName
          userStore.stationId = params.data.stationId
          router.push({ path: '/stationboard' });
        }
      })
    myChart.setOption(option.value);
  }
  function setEcharts(){
    myChart.resize();
  }
  defineExpose({
    setEcharts
})
</script>
<template>
  <div id="chart1" style="width: 100%;height:100%;" class="map-box" @mouseleave="mouseleave">
  </div>
</template>
<style scoped lang="scss"></style>

