<template>
  <div class="head_citylevel">
    <waybillCard :listData="listData" :currentCity="city" @goback="goBackil"></waybillCard>
    <div :id="id" class="cityCharts"></div>
  </div>
</template>

<script>
  import {
    cityMap
  } from '@/utils/city/china-main-city-map.js'
  import waybillCard from './waybillCard.vue'
  export default {
    components: {
      waybillCard
    },
    name: 'city',
    props: {
      listData: {
        type: Object,
        default: () => {},
      },
      city: {
        type: String,
        default: () => '贵阳市',
      },
    },
    data() {
      return {
        id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
        echartObj: null,
        option: {
          tooltip: {
            padding: 0,
            // 数据格式化
            formatter: function(params, callback) {
              return params.name + '：' + (params.value || 0)
            }
          },
          // visualMap: {
          //   min: 0,
          //   max: 500,
          //   left: 'left',
          //   top: 'bottom',
          //   text: ['高', '低'], // 取值范围的文字
          //   inRange: {
          //     color: ['#e0ffff', 'blue'] // 取值范围的颜色
          //   },
          //   show: true // 图注
          // },
          geo: [{
            map: "",
            aspectScale: 0.8,
            zoom: 0.65,
            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: "",
            zlevel: -1,
            aspectScale: 0.8,
            zoom: 0.65,
            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: "",
            zlevel: -2,
            aspectScale: 0.8,
            zoom: 0.65,
            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: "",
            zlevel: -3,
            aspectScale: 0.8,
            zoom: 0.65,
            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: "",
            zlevel: -4,
            aspectScale: 0.8,
            zoom: 0.65,
            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, // 不可缺少，否则无tooltip 指示效果
            data: []
          }],
          cityJSON: {},
        }
      }
    },
    mounted() {
      this.initDate();
      this.resizeListener();
    },
    methods: {
      initDate() {
        const city = this.city
        const cityId = cityMap[city];
        this.cityJSON = require('../../utils/city/' + cityId + '.json')
        this.option.geo.forEach(item => {
          item.map = city
        })
        this.echartObj = this.$echarts.init(document.getElementById(this.id))
        this.$echarts.registerMap(city, this.cityJSON)
        this.echartObj.setOption(this.option);
      },
      resizeListener() {
        window.addEventListener('resize', () => {
          if (this.echartObj && this.echartObj.resize) {
            this.echartObj.resize()
          }
        })
      },
      goBackil() {
        this.$emit('goBack')
      },
    }
  }
</script>
<style lang="scss">
  .head_citylevel {
    position: relative;
    width: 100%;
    height: 100%;
  }

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