<template>
  <div class="head_china">
    <waybillCard :listData="listData"></waybillCard>
    <div id="main" class="main_map"></div>
  </div>
</template>

<script>
  import waybillCard from './waybillCard.vue'
  const chinaJson = require('../../utils/china.json');
  export default {
    components: {
      waybillCard
    },
    props: {
      listData: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        dataList: [{
            name: "南海诸岛"
          },
          {
            ename: "beijing",
            name: "北京"
          },
          {
            ename: "tianjin",
            name: "天津"
          },
          {
            ename: "shanghai",
            name: "上海"
          },
          {
            ename: "chongqing",
            name: "重庆"
          },
          {
            ename: "hebei",
            name: "河北"
          },
          {
            ename: "henan",
            name: "河南"
          },
          {
            ename: "yunnan",
            name: "云南"
          },
          {
            ename: "liaoning",
            name: "辽宁"
          },
          {
            ename: "heilongjiang",
            name: "黑龙江"
          },
          {
            ename: "hunan",
            name: "湖南"
          },
          {
            ename: "anhui",
            name: "安徽"
          },
          {
            ename: "shandong",
            name: "山东"
          },
          {
            ename: "xinjiang",
            name: "新疆"
          },
          {
            ename: "jiangsu",
            name: "江苏"
          },
          {
            ename: "zhejiang",
            name: "浙江"
          },
          {
            ename: "jiangxi",
            name: "江西"
          },
          {
            ename: "hubei",
            name: "湖北"
          },
          {
            ename: "guangxi",
            name: "广西"
          },
          {
            ename: "gansu",
            name: "甘肃"
          },
          {
            ename: "shanxi",
            name: "山西"
          },
          {
            ename: "neimenggu",
            name: "内蒙古"
          },
          {
            ename: "shanxi1",
            name: "陕西"
          },
          {
            ename: "jilin",
            name: "吉林"
          },
          {
            ename: "fujian",
            name: "福建"
          },
          {
            ename: "guizhou",
            name: "贵州"
          },
          {
            ename: "guangdong",
            name: "广东"
          },
          {
            ename: "qinghai",
            name: "青海"
          },
          {
            ename: "xizang",
            name: "西藏"
          },
          {
            ename: "sichuan",
            name: "四川"
          },
          {
            ename: "ningxia",
            name: "宁夏"
          },
          {
            ename: "hainan",
            name: "海南"
          },
          {
            name: "台湾"
          },
          {
            ename: "xianggang",
            name: "香港"
          },
          {
            ename: "aomen",
            name: "澳门"
          },
        ],
        myChartChina:null,
      };
    },
    methods: {
      initEchart() {
        let dataList = this.dataList;
        for (let i = 0; i < dataList.length; i++) {
          dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
        }
        const _this = this;
        _this.myChartChina = _this.$echarts.init(document.getElementById("main"));
        _this.$echarts.registerMap('china', chinaJson)
        var option = {
          tooltip: {
            //数据格式化
            formatter: function(params, callback) {
              return (
                params.seriesName + "<br />" + params.name + "：" + params.value
              );
            },
          },
          // visualMap: {
          //   min: 0,
          //   max: 1000,
          //   left: "left",
          //   top: "bottom",
          //   text: ["高", "低"], //取值范围的文字
          //   inRange: {
          //     color: ["#e0ffff", "blue"], //取值范围的颜色
          //   },
          //   show: true, //图注
          // },
          geo: [{
            map: "china",
            aspectScale: 0.8,
            zoom: 0.7,
            layoutCenter: ["50%", "46%"],
            layoutSize: "150%",
            show: true,
            roam: false,
            label: {
              show: true,
              color: '#ffffff',
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                      offset: 0,
                      color: "rgba(3,27,78,0.655)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(58,149,253,0.655)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
                borderColor: "#c0f3fb",
                borderWidth: 0.8,
              },
              emphasis: {
                show: false,
                color: "#fff",
                areaColor: "rgba(0,254,233,0.6)",
              },
            }
          }, {
            // 重影
            type: "map",
            map: "china",
            zlevel: -1,
            aspectScale: 0.8,
            zoom: 0.7,
            layoutCenter: ["50%", "47%"],
            layoutSize: "150%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(58,149,253,0.8)",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          }, {
            type: "map",
            map: "china",
            zlevel: -2,
            aspectScale: 0.8,
            zoom: 0.7,
            layoutCenter: ["50%", "48%"],
            layoutSize: "150%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(58,149,253,0.6)",
                shadowColor: "rgba(65, 214, 255,0.6)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          }, {
            type: "map",
            map: "china",
            zlevel: -3,
            aspectScale: 0.8,
            zoom: 0.7,
            layoutCenter: ["50%", "49%"],
            layoutSize: "150%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "rgba(58,149,253,0.4)",
                shadowColor: "rgba(29, 111, 165,1)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          }, {
            type: "map",
            map: "china",
            zlevel: -4,
            aspectScale: 0.8,
            zoom: 0.7,
            layoutCenter: ["50%", "50%"],
            layoutSize: "150%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: "rgba(5,9,57,0.8)",
                shadowColor: "rgba(29, 111, 165,0.8)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          }],
          // 鼠标悬浮提示框
          series: [{
            name: "省份",
            type: "map",
            geoIndex: 0,
            data: _this.dataList,
          }],
        };
        _this.myChartChina.setOption(option);
        _this.myChartChina.on("click", function(params) {
          if (!params.data.ename) {
            _this.$message.error('暂无' + params.name + '地图数据');
            return;
          }
          _this.$emit('cutChina', {
            provinceName: params.data.ename,
            province: params.name
          })
        });
      },
      getResize() {
        this.myChartChina.resize();
      }
    },
    mounted() {
      this.initEchart();
    },
  };
</script>

<style lang="scss">
  .head_china {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .main_map {
    position: absolute;
    bottom: 0;
    height: calc(100% - 100px);
    width: 100%;
    margin: auto;
  }
</style>
