import React, { useEffect } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { useRef } from 'react';
import "./index.scss";
var MapChartProvince = function MapChartProvince(props) {
  var _curRef$current5;
  var curRef = useRef(null);
  // let qiz = 'http://101.43.113.86/sysfile/lowcode/platform1a73f7f0cfa24f5d9a28b58304d34505.png'
  // let qiz = require('../../assets/qiz.png')
  var options = {
    backgroundColor: props.backgroundColor,
    //画布背景颜色
    // 设置上下左右边距
    grid: {
      top: '3%',
      left: '1%',
      right: '1%',
      bottom: '1%',
      containLabel: true
    },
    geo: {
      // show: true,
      map: 'yourMap',
      //注册地图的名称
      label: {
        show: true // 显示省市名称
      },

      roam: false,
      tooltip: {
        show: false
      },
      itemStyle: {
        normal: {
          borderWidth: props.nomalborderWidth,
          //设置外层边框
          borderColor: props.normalborderColor
        },
        emphasis: {
          show: true,
          areaColor: '#82b8fd'
        }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function formatter(params) {
        if (params['data'] != null) {
          var medal = ''; // 设置固定宽度
          var array = props.tooltip;
          for (var index = 0; index < array.length; index++) {
            var element = array[index];
            medal += "<div style=\"display: inline-block; margin-top:" + element.lineTopMargin + "px;margin-bottom:" + element.lineBottomMargin + "px\">\n                        <span style=\"display: inline-block;width:" + element.tooltipIconWidth + "px;height:" + element.tooltipIconHeight + "px; background:" + element.tooltipIconBac + "\"></span>\n                        <span style=\"font-size: " + element.agoSize + "px;font-weight:" + element.agoWeight + "; color:" + element.agoColor + "; margin-left:" + element.agoLeftMargin + "px; margin-right:" + element.agoRightMargin + "px\">" + element.title + "</span>" + ("<span style=\"font-size: " + element.rearSize + "px; font-weight:" + element.rearWeight + " color:" + element.rearColor + ";margin-left:" + element.rearLeftMargin + "px; margin-rigit:" + element.rearRightMargin + "px\">") + params['data'][element.dataIndex] + '</span></div><br/>';
          }
          if (props.selectwh === '自适应') {
            return "<div style=\"display: inline-block; background: url(" + props.tooltipBackgroundImage + ") no-repeat  100%;box-shadow: 0 0 0 transparent;\">" + medal + "</div>";
          } else {
            return "<div style=\"width:" + props.tooltipWidth + "px;height:" + props.tooltipHeight + "px;display: inline-block; background: url(" + props.tooltipBackgroundImage + ") no-repeat  100%;box-shadow: 0 0 0 transparent;\">" + medal + "</div>";
          }
        }
      },
      borderWidth: props.tooltipBorderWidth,
      // 设置提示框边框宽度
      borderColor: props.tooltipBorderColor,
      // 设置提示框边框颜色
      backgroundColor: props.tooltipBackgroundColor // 设置提示框背景颜色
    },

    // dataRange: {    //热地图
    //     show: false,//是否展示左下角图标
    //     min: 0,
    //     max: 1000,
    //     text: ['High', 'Low'],
    //     realtime: true,
    //     calculable: true,
    //     color: ['orangered', 'yellow', 'lightskyblue']//渐变颜色
    //   },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center'
    },
    series: [{
      name: '湖北地图',
      type: 'map',
      map: 'yourMap',
      selectedMode: false,
      tooltip: {
        show: props.ifMapTooltip
      },
      // scaleLinit: {
      //     // 滚轮缩放的极限控制
      //     min: 0.5,//缩放最小大小
      //     max: 10, //缩放最大大小
      // },
      label: {
        //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
        show: true,
        //显示省市名称
        positiob: [1, 100],
        //相对百分比
        fontsize: 12,
        color: props.sizeColor,
        // 标签文字颜色
        offSize: [2, 0],
        // 是对文字进行便宜 ，默认是不偏移，例如：`[30, 40]` 表示文字在横向上偏移 `30`，纵向上偏移 `40`。
        align: 'left' //文字水平对齐方式，默认自动
      },

      data: props.mapDataTip,
      itemStyle: {
        //地图区域的多边形，图形样式
        normal: {
          borderWidth: 1,
          //边际线大小
          borderColor: props.borderColor,
          //边界线颜色
          areaColor: props.areaColor,
          //默认区域颜色

          shadowColor: 'rgba(0,0,0,0.1)',
          //设置阴影颜色
          shadowBlur: 10,
          //阴影大小
          shadowOffsetX: -10,
          shadowOffsetY: 5
        },
        emphasis: {
          show: true,
          areaColor: props.empareaColor,
          //鼠标滑过区域颜色
          label: {
            show: true,
            textStyle: {
              color: props.empareaSizeColor //鼠标滑过区域文字颜色
            }
          }
        }
      },

      roam: false //是否开启鼠标缩放平移漫游
      // zoom: 1.25, //当前视角的缩放比例 
    },
    // {
    //     type: 'effectScatter',   //  指明图表类型：带涟漪效果的散点图
    //     coordinateSystem: 'geo', //  指明绘制在geo坐标系上
    //     symbol:  `image://${qiz}`, //自定义的展示图标
    //     symbolSize:50,
    //     //定以一个空数组后期点击的时候往里面添加新数据
    //     data:[]
    // }
    {
      name: '点',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: "image://" + props.signUrl,
      symbolSize: [props.signWidth, props.signHeight],
      // 图标大小
      show: false,
      tooltip: {
        show: props.ifSignTooltip
      },
      // label: {
      //     normal: {
      //         show: false,
      //         textStyle: {
      //             color: '#fff',
      //             fontSize: 9,
      //         }
      //     },
      // },
      // itemStyle: {
      //     normal: {
      //         color: '#F62157', //标志颜色
      //     },
      //     emphasis: {
      //         show: false,
      //         areaColor: "#63d4ff", //鼠标滑过区域颜色
      //     },
      // },
      zlevel: 6,
      data: props.mapDataSign
    }]
  };
  useEffect(function () {
    if (props.province !== '' && props.ctiys === '') {
      import("../../assets/mapjson/province/420000.json").then(function (mapData) {
        var _curRef$current;
        echarts.registerMap('yourMap', mapData["default"]);
        // 更新地图数据之后刷新echarts实例
        (_curRef$current = curRef.current) === null || _curRef$current === void 0 ? void 0 : _curRef$current.getEchartsInstance().setOption(options);
      });
    }
    if (props.province !== '' && props.ctiys !== '') {
      import("../../assets/mapjson/ctiys/" + props.ctiys + ".json").then(function (mapData) {
        var _curRef$current2;
        echarts.registerMap('yourMap', mapData["default"]);
        (_curRef$current2 = curRef.current) === null || _curRef$current2 === void 0 ? void 0 : _curRef$current2.getEchartsInstance().setOption(options);
      });
    }
    // if (props.province !== '' && props.ctiys !== '' && props.county !== '') {
    //     import(`../../assets/mapjson/county/${props.county}.json`).then((mapData) => {
    //         echarts.registerMap('yourMap', mapData.default);
    //         curRef.current?.getEchartsInstance().setOption(options);
    //     });
    // }
  }, [props.province, props.ctiys]);
  useEffect(function () {
    if (props.province !== '' && props.ctiys === '') {
      import("../../assets/mapjson/province/420000.json").then(function (mapData) {
        var _curRef$current3;
        echarts.registerMap('yourMap', mapData["default"]);
        // 更新地图数据之后刷新echarts实例
        (_curRef$current3 = curRef.current) === null || _curRef$current3 === void 0 ? void 0 : _curRef$current3.getEchartsInstance().setOption(options);
      });
    }
    if (props.province !== '' && props.ctiys !== '') {
      import("../../assets/mapjson/ctiys/" + props.ctiys + ".json").then(function (mapData) {
        var _curRef$current4;
        echarts.registerMap('yourMap', mapData["default"]);
        (_curRef$current4 = curRef.current) === null || _curRef$current4 === void 0 ? void 0 : _curRef$current4.getEchartsInstance().setOption(options);
      });
    }
    // if (props.province !== '' && props.ctiys !== '' && props.county !== '') {
    //     import(`../../assets/mapjson/county/${props.county}.json`).then((mapData) => {
    //         echarts.registerMap('yourMap', mapData.default);
    //         curRef.current?.getEchartsInstance().setOption(options);
    //     });
    // }
  }, []);
  (_curRef$current5 = curRef.current) === null || _curRef$current5 === void 0 ? void 0 : _curRef$current5.getEchartsInstance().setOption(options);
  return /*#__PURE__*/React.createElement(ReactECharts, {
    option: {},
    ref: curRef,
    style: {
      height: props.height,
      width: props.width,
      zIndex: 222
    }
  });
};
export default MapChartProvince;