<template>
  <div :ref="wrapId" :style="wrapStyle">
    <div class="fviz-tooltip"></div>
  </div>
</template>

<script>
import em from "../../mixins/echarts-mixins";
import { FString } from "../../util/FString";
import "../../../public/map/china.js";
import "../../../public/map/province.min.js";
import MarkPointData from "../../../public/map/MarkPointData"
import $ from "jquery";

export default {
  name: "fviz-map",
  mixins: [em],
  data: function() {
    return {
      geoCoordMap: MarkPointData.getMarkPointData()
    }
  },
  methods: {
    format(formatStr, data, newLineStr) {
      //系列
      let str = FString.replaceAll(formatStr, "{a}", data.seriesName);
      //名称
      str = FString.replaceAll(str, "{b}", data.name);
      //换行
      str = FString.replaceAll(str, /\\n/, newLineStr);
      //数值
      let value = "";
      for(var key in data.value){
        value = value + key + ":" + data.value[key] + "<br>";
      }
      return str.replace(/{c}/g, value.length == 0 ? 0 : value.substr(0, value.lastIndexOf("<br>")));
    },
    getOptions() {
      let opts = {};
      let me = this;

      opts.toolbox = {
        feature: {},
      };
      if (this.objVal.saveAsImage && eval(this.objVal.saveAsImage)) {
        opts.toolbox.feature.saveAsImage = {};
      }

      //标题对齐
      opts.title = {};
      if (this.objVal.titleTextAlign) {
        opts.title.x = this.objVal.titleTextAlign;
      }
      opts.title.show = eval(this.objVal.titleShow);
      opts.title.text = this.objVal.titleText;
      opts.title.link = this.objVal.titleLink;
      opts.title.subtext = this.objVal.subTitleText;
      opts.title.sublink = this.objVal.subTitleLink;

      //主标题样式
      opts.title.textStyle = {};
      opts.title.textStyle.color = this.objVal.titleColor;
      opts.title.textStyle.fontWeight = this.objVal.titleFontWeight;
      opts.title.textStyle.fontSize = this.objVal.titleFontSize;

      //副标题样式
      opts.title.subtextStyle = {};
      opts.title.subtextStyle.color = this.objVal.subTitleColor;
      opts.title.subtextStyle.fontWeight = this.objVal.subTitleFontWeight;
      opts.title.subtextStyle.fontSize = this.objVal.subTitleFontSize;

      opts.legend = {
        show: false,
        orient: "vertical",
        x: "center",
        data: ["数据名称"],
      };
      //tooltip配置
      opts.tooltip = {};
      opts.tooltip.show = eval(this.objVal.tooltipShow);
      opts.tooltip.textStyle = {};
      opts.tooltip.textStyle.fontSize = this.objVal.tooltipFontSize;
      opts.tooltip.trigger = 'item';
      if (this.objVal.tooltipFormatter) {
        opts.tooltip.formatter = function (data) {
          return me.format(me.objVal.tooltipFormatter, data.data, "<br>");
        };
      }

      this.buildOptions(opts);

      return opts;
    },
    buildOptions(opts) {
      let me = this;
      let obj = {};
      obj.type = "map";
      obj.mapType = this.objVal.mapType;
      obj.name = obj.mapType;
      obj.selectedMode = "single";
      obj.showLegendSymbol = false; //是否显示区域小圆点

      obj.roam = eval(this.objVal.roam);
      obj.label = {};
      obj.label.normal = {};
      obj.zoom = eval(this.objVal.zoom);
      obj.label.normal.show = eval(this.objVal.labelShow);
      if (this.objVal.labelFontSize) {
        obj.label.normal.fontSize = this.objVal.labelFontSize;
      }
      if (this.objVal.lableFontWeight) {
        obj.label.normal.fontWeight = this.objVal.lableFontWeight;
      }
      if (this.objVal.labelFontColor) {
        obj.label.normal.color = this.objVal.labelFontColor;
      }
      if (this.objVal.labelFormatter) {
        obj.label.normal.formatter = function (data) {
          return me.format(me.objVal.labelFormatter, data, "\n");
        };
      }
      if (this.objVal.labelPosition) {
        obj.label.normal.position = this.objVal.labelPosition;
      }

      obj.itemStyle = {};
      obj.itemStyle.normal = {
        label: {
          show: false,
        },
        areaColor: this.objVal.mapAreaColor,
        borderWidth: this.objVal.mapBorderWidth,
        borderColor: this.objVal.mapBorderColor,
      };

      obj.itemStyle.emphasis = {
        label: {
          show: true,
        },
      };

      obj.data = this.dataObj;
      var markPointMap = this.geoCoordMap;
      var markPoint = [];
      (this.dataObj || []).forEach(function(item){
        for(var i = 0; i < markPointMap.length; i++){
          if(markPointMap[i]['name'] == item.name){
            markPoint.push({
              name: item.name,
              value: item.value,
              coord: [markPointMap[i]['log'], markPointMap[i]['lat']]
            });
            continue;
          }
        }
      });

      obj.markPoint = {
        symbol: 'pin',
        symbolSize: 30,
        label: {
          show: false
        },
        data: markPoint
      };

      opts.series = [];
      opts.series.push(obj);
    },
    //绑定事件
    bindEvent() {
      if (this.chart) {
        let me = this;
        this.chart.on("click", function (params) {
          // if(params.componentType == 'markPoint'){
          //  if($('.fviz-tooltip').css("display") == 'block'){
          //    $('.fviz-tooltip').css("display", "none");
          //  } else {
          //    $('.fviz-tooltip').css("display", "block");
          //    $('.fviz-tooltip').css("top", (params.event.event.clientY - 40) + "px");
          //    $('.fviz-tooltip').css("left", (params.event.event.clientX - 310) + "px");
          //    $('.fviz-tooltip').html(params.data.name + "<br/>" + params.data.value)
          //  }
          // }else{
            //类目名称
            let name = params.name;
            //系列名称
            let seriesName = params.seriesName;

            //组件id
            let comId = me.objVal.id;

            //控件模板中配置变量赋值
            if (eval(comId).hasOwnProperty("fvizId")) {
              for (let i = 0; i < me.dataObj.length; i++) {
                if (me.dataObj[i].name == name) {
                  if (me.dataObj[i]["id"]) {
                    eval(comId)["fvizId"] = me.dataObj[i]["id"];
                  }
                  break;
                }
              }
            }

            //名称
            if (eval(comId).hasOwnProperty("fvizName")) {
              eval(comId)["fvizName"] = name;
            }

            //联动
            if (eval(comId).chain) {
              eval(comId).chain();
            }

            //下钻
            if (eval(me.objVal.drillOpen) && eval(comId).drill) {
              eval(comId).drill();
            }
          // }
        });
      }
    },
  },
};
</script>
<style scoped>
.fviz-tooltip {
    position: absolute;
    z-index: 2;
    width: auto;
    height: auto;
    border-radius: 5px;
    padding: 3px;
    background-color: #000000;
    color: white;
    text-align: left;
    display: none;
    opacity: 0.8;
  }
</style>
