<template>
  <div style="padding: 0.5% 0.5%">
    <!--内容区-->
    <el-row style="margin-top: 0.5%">
      <el-col :span="12">
        <div
          id="eventmap"
          :style="'width:100%;height:' + eheight + ';zoom:' + device"
        ></div>
      </el-col>
      <el-col :span="12">
        <el-table
          stripe
          stripe
          :data="tableData"
          border
          :height="height"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="name"
            label="区域"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="value"
            label="监测点个数"
          ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
//import '../../../../node_modules/echarts/map/js/china.js'
import operation from "@/api/device/operation";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  data() {
    return {
      height: "",
      eheight: "",
      statisticalType: null,
      device: 1,
      tableData: [],
      dataList: [],
    };
  },
  created() {
    this.getClassificationData();

   // console.log();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    this.height = tableheight() + "px";
    if (this.device == 1) {
      this.eheight = this.height;
    } else if (this.device == 1.25) {
      this.eheight = tableheight() - 150 + "px";
    }
    this.$nextTick(() => {
      this.initData();
    });
  },
  methods: {
    initData() {
      let that = this;
      let info = window.sessionStorage.getItem("Info");
      info = eval("(" + info + ")");

      let data = {
        statisticalType: this.statisticalType,
        deptIndex: info.deptId,
      };
      operation.getList(data).then((response) => {
        if (response.code === "A0000") {
          that.dataList = response.data;
          that.tableData = response.data;
          const echarts = require("echarts");
          let myChartes = echarts.init(document.getElementById("eventmap"));
          let white = "#000";
          let option = {
            title: {
              text: this.title,
              x: "center",
            },
            tooltip: {
              trigger: "item",
              formatter: function (e, t, n) {
                let tips = "";
                if (e.value === 0) {
                  tips =
                    "<font style='color:" + white + "'>暂无数据</font><br/>";
                } else {
                  tips +=
                    "<font style='color:" +
                    white +
                    "'>" +
                    e.name +
                    "省</font><br/>监测点数量" +
                    "<font style='color:" +
                    white +
                    "'>：" +
                    e.value +
                    "个</font><br/>";
                }
                return tips;
              },
            },
            visualMap: {
              min: 0,
              max: 1000,
              left: 26,
              bottom: 40,
              showLabel: !0,
              text: ["高", "低"],
              show: !0,
            },
            geo: {
              map: "china",
              roam: true,
              zoom: 1.23,
              top: 120,
              label: {
                normal: {
                  show: true,
                  fontSize: "14",
                  color: "rgba(0,0,0,0.7)",
                },
              },
              itemStyle: {
                normal: {
                  //shadowBlur: 50,
                  //shadowColor: 'rgba(0, 0, 0, 0.2)',
                  borderColor: "rgba(0, 0, 0, 0.2)",
                },
                emphasis: {
                  areaColor: "#f2d5ad",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  borderWidth: 0,
                },
              },
            },
            series: [
              {
                name: "综合评估为",
                type: "map",
                geoIndex: 0,
                data: this.dataList,
              },
            ],
          };
          myChartes.setOption(option)
window.echartsArr.push(myChartes);
        }
      });
    },

    //获取统计类型
    getClassificationData() {
      let code = "Statistical_Type";
      let tem = dicData(code, ["Report_Type"]);
      this.statisticalType = tem[0];
    },
  },
};
</script>
