<template>
  <base-chart :option="chartOption" chartType="map" />
</template>
<script>
import chartsMixins from "../../chartsMixins.js";
export default {
  name: "china-map-chart",
  mixins: [chartsMixins],
  props: {
    customTooltip: {
      tyep: Function,
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    visualMap: {
      type: Object,
      default: () => ({}),
    },
    geo: {
      type: Object,
      default: () => ({}),
    },
    showList: { type: Array },
    decimals: {
      default: 2,
      type: [Number, String],
    },
  },
  data() {
    return {};
  },
  methods: {
    domItem(label, value, other) {
      return `<div style="${
        this.defaultStyle
      };width:100%;display:flex;justify-content:space-between;font-size:12px;margin-top:4px;line-height:18px"><span style="margin-right:32px;color:#606266;">${label}</span><span style="font-size:12px;color: #303133;">${
        value || ""
      } ${other ? `（${other}）` : ""}</span></div>`;
    },
  },
  computed: {
    chartOption() {
      const max = Array.isArray(this.dataSource)
        ? Math.max.apply(
            null,
            (this.dataSource || []).map((cur) => cur.value || 0)
          )
        : 10000;
      return {
        tooltip: {
          triggerOn: "mousemove",
          borderColor: "transparent",
          formatter: (params) => {
            if (this.customTooltip) {
              return this.customTooltip(params);
            } else {
              const { name, data, value } = params;
              return this.showList
                ? `<div><div style="margin-bottom: 8px;font-size:12PX; line-height:14px;color: #303133;">${name}</div>` +
                    this.showList
                      .map((cur) => {
                        return this.domItem(
                          cur.label,
                          this.toFormatMoney(
                            data && data[cur.value],
                            this.decimals
                          ),
                          this.toFormatMoney(data && data[cur.per], 2) + "%"
                        );
                      })
                      .join("") +
                    "</div>"
                : this.domItem(name, this.toFormatMoney(value, this.decimals));
            }
          },
          backgroundColor: "rgba(255,255,255,0.95)",
        },
        visualMap: [
          {
            min: 0,
            max,
            show: false,
            inRange: {
              color: ["#dddddd", "#5058FF"],
            },
            seriesIndex: 0,
            ...this.visualMap,
          },
          {
            show: true,
            seriesIndex: 1,
            inRange: {
              color: ["#dddddd", "#5058FF"],
            },
            left: 0,
            top: 0,
            itemHeight: 10,
            hoverLink: false,
            selectedMode: false,
            splitNumber: 2,
            text: ["高", "低"],
            type: "piecewise",
            orient: "horizontal",
            ...this.visualMap,
          },
        ],
        geo: [
          {
            map: "china",
            roam: false,
            right: 20,
            top: 0,
            bottom: 0,
            left: 20,
            label: {
              normal: {
                show: false,
                fontSize: "10",
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgb(255,255,255)",
              },
            },
            emphasis: {
              label: {
                color: "#333",
                show: false,
              },
              itemStyle: {
                areaColor: "inherit",
                opacity: 0.8,
              },
            },
            ...this.geo,
          },
        ],
        series: [
          {
            name: "china",
            type: "map",
            geoIndex: 0,
            selectedMode: "flase",
            data: this.dataSource.map((cur) => ({
              ...cur,
              name: (cur.name || "").replace("省", ""),
            })),
          },
          {
            name: "",
            geoIndex: 1,
            silent: true,
          },
        ],
      };
    },
  },
};
</script>
