<template>
  <div :elid="wrapId" :ref="wrapId" :style="wrapStyle"></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";

export default {
  name: "fviz-map",
  mixins: [em],
  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);
      //数值
      if (isNaN(data.value)) {
        str = FString.replaceAll(str, "{c}", 0);
      } else {
        str = FString.replaceAll(str, "{c}", data.value);
      }
      return str;
    },
    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.backgroundColor = this.objVal.tooltipBackgroudColor || '#000000',
      opts.tooltip.borderColor = this.objVal.tooltipBackgroudColor || '#000000',
      opts.tooltip.textStyle = {};
      opts.tooltip.textStyle.fontSize = this.objVal.tooltipFontSize;
      opts.tooltip.textStyle.fontWeight = this.objVal.tooltipFontWeight;
      opts.tooltip.textStyle.color = this.objVal.tooltipFontColor;
      if (this.objVal.tooltipFormatter) {
        opts.tooltip.formatter = function (data) {
          return me.format(me.objVal.tooltipFormatter, data, "<br>");
        };
      }

      let rsArray = [];
      (this.dataObj || []).forEach(function (item) {
        let itemObj = {};
        itemObj.name = item[me.fieldBindObj["nameField"]];
        itemObj.value = item[me.fieldBindObj["valueField"]];

        if (item[me.fieldBindObj["colorField"] || ""]) {
          itemObj.itemStyle = {
            normal: {
              areaColor: item[me.fieldBindObj["colorField"]],
            },
          };
        }
        rsArray.push(itemObj);
      });

      if(eval(this.objVal.visualMapShow)){
        opts.visualMap = {};
        opts.visualMap = {
          min: this.objVal.visualMapMin,
          max: this.objVal.visualMapMax,
          left: this.objVal.visualMapLeft,
          top: this.objVal.visualMapTop,
          text: [this.objVal.visualMapMaxText, this.objVal.visualMapMinText],
          realtime: false,
          calculable: true,
          orient: this.objVal.visualMapAlign,
          align: this.objVal.visualMapLabelPosition,
          inRange: {
              color: eval(this.objVal.visualMapInRange)
          },
          outOfRange: {
              color: eval(this.objVal.visualMapOutRange)
          },
          textStyle: {
              color: this.objVal.visualMapFontColor,
              fontSize: this.objVal.visualMapFontSize,
              fontWeight: this.objVal.visualMapFontWeight
          },
          formatter: this.objVal.visualMapFormatter,
          indicatorIcon: this.objVal.visualMapIndicatorIcon,
          indicatorSize: this.objVal.visualMapIndicatorSize,
        }
      }

      let seriesObj = this.buildOptions(rsArray);
      opts.series = [];
      opts.series.push(seriesObj);
      return opts;
    },
    buildOptions(rsArray) {
      let me = this;
      let object = {
        name: this.objVal.mapType,
        type: "map",
        mapType: this.objVal.mapType, // 自定义扩展图表类型
        showLegendSymbol: false,
        selectedMode: "single",
        roam: eval(this.objVal.roam),
        zoom: eval(this.objVal.zoom),
        itemStyle: {
          normal: {
            label: {
              show: eval(this.objVal.labelShow),
              fontSize: this.objVal.labelFontSize,
              fontWeight: this.objVal.lableFontWeight,
              color: this.objVal.labelFontColor,
              position: this.objVal.labelPosition,
              formatter: function (data) {
                return me.format(me.objVal.labelFormatter, data, "\n");
              },
            },
            areaColor: this.objVal.mapAreaColor,
            borderWidth: this.objVal.mapBorderWidth,
            borderColor: this.objVal.mapBorderColor,
          },
          emphasis: {
            label: {
              color: this.objVal.emphasisLabelColor,
              fontWeight: this.objVal.emphasisLabelFontWeight,
              fontSize: this.objVal.emphasisLabelFontSize,
            },
            areaColor: this.objVal.emphasisAreaColor,
            borderWidth: this.objVal.emphasisBorderWidth,
            borderColor: this.objVal.emphasisBorderColor,
            shadowColor: this.objVal.emphasisShadowColor,
            shadowBlur: this.objVal.emphasisShadowWidth,
          },
        },
        data: rsArray,
      };
      return object;
    },
    //绑定事件
    bindEvent() {
      if (this.chart) {
        let me = this;
        this.chart.on("click", function (params) {
          //类目名称
          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>
