<template>
<div class="map-wrapper">
  <BorderBox class="sum">
    <div>
      <p>查询量</p>
      <h2><m-count class="count" :value="103425935" :decimal="0"/>次</h2>
    </div>
    <div>
      <p>追溯码打印量</p>
      <h2><m-count class="count" :value="230065651" :decimal="0"/>张</h2>
    </div>
  </BorderBox>
  <div class="map" ref="map"/>
</div>
</template>

<script>
import china from 'echarts/map/json/china.json'
import BorderBox from '../border-box'
const provinceData = [
  { name: '北京', value: 69 },
  { name: '天津', value: 47 },
  { name: '河北', value: 206 },
  { name: '山西', value: 4 },
  { name: '内蒙古', value: 84 },
  { name: '辽宁', value: 170 },
  { name: '吉林', value: 128 },
  { name: '黑龙江', value: 220 },
  { name: '上海', value: 80 },
  { name: '江苏', value: 448 },
  { name: '浙江', value: 405 },
  { name: '安徽', value: 271 },
  { name: '福建', value: 182 },
  { name: '江西', value: 93 },
  { name: '山东', value: 491 },
  { name: '河南', value: 171 },
  { name: '湖北', value: 154 },
  { name: '湖南', value: 172 },
  { name: '广东', value: 340 },
  { name: '广西', value: 302 },
  { name: '海南', value: 51 },
  { name: '重庆', value: 82 },
  { name: '四川', value: 116 },
  { name: '贵州', value: 100 },
  { name: '云南', value: 37 },
  { name: '陕西', value: 120 },
  { name: '甘肃', value: 80 },
  { name: '青海', value: 29 },
  { name: '宁夏', value: 48 },
  { name: '新疆', value: 125 },
  { name: '西藏', value: 0 },
]
export default {
  name: 'QualityMap',
  components: {
    BorderBox,
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    visualLabel: {
      type: Array,
      default() {
        return ['高', '低']
      }
    },
    visualFormatter: {
      type: [String, Function],
      default() {
        return ({data}) => {
          return `
            <div class="map-tooltip-info">
              <h3>${data.name}</h3>
              <p><span>追溯企业数量：</span>${data.value} 个</p>
            </div>
          `
        }
      }
    },
    visualConfig: {
      type: Object,
      default() {
        return {
          min: 0,
          max: 500,
        }
      }
    },
  },
  data() {
    return {
      range: [0, 80],
      map: null,
      mapName: 'china',
      config: {
        geo: {
          map: 'china',
          layoutCenter: ['50%', '40%'],
          layoutSize: '100%',
          zoom: 1, //当前视角的缩放比例
          label: {
            normal: {
              show: true,
              color: '#fff',
              fontSize: 12 * this.sizeRate,
            },
            emphasis: {
              color: '#fff',
              fontSize: 15 * this.sizeRate,
              // fontFamily: 'Pangmenzhengdao',
            }
          },
          itemStyle: {
            normal: {
              // areaColor: 'rgba(91, 213, 255, 0.2)',
              borderColor: 'rgba(91, 213, 255, 0.9)',
              borderWidth: 0.5,
            },
            emphasis: {
              areaColor: '#069ae1',
            }
          },
          regions: [],
        },
        series: []
      },
      curProvince: null,
    }
  },
  mounted() {
    this.$nextTick(this.initMap)
  },
  beforeDestroy() {
    this.map && window.removeEventListener('resize', () => this.map.resize())
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
  },
  methods: {
    initMap() {
      // 初始化echarts
      this.$echarts.registerMap(this.mapName, china)
      this.map = this.$echarts.init(this.$refs.map)
      window.addEventListener('resize', () => this.map.resize())
      // this.addEvent()
      this.config.series.push({
        type: 'map',
        map: this.mapName,
        geoIndex: 0,
        data: provinceData,
      })
      this.config.tooltip = {
        trigger: 'item',
        formatter: this.visualFormatter,
        // extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
      }
      this.config.visualMap = Object.assign({
        show: false,
        inRange: {
          // opacity: 1,
          color: ['rgba(140,228,252,0.1)', '#0ed7e1', '#069ae1']
          // color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
        }
      }, this.visualConfig)
      this.map.setOption(this.config)
    },
    // addEvent() {
    //   // 监听地图点击事件
    //   this.map.on('click', (ev) => {
    //     const {name} = ev.data
    //     this.setRegions(name)
    //     this.curProvince = name
    //     this.$emit('select', name)
    //   })
    //   // 点击空白处则取消选中状态
    //   this.map.getZr().on('click', e => {
    //     if (!e.target && this.curProvince) {
    //       const name = this.curProvince
    //       this.setRegions(null)
    //       this.$emit('select', name)
    //     }
    //   })
    // },
    // setRegions(name) {
    //   this.curProvince = name
    //   if (!name) {
    //     this.config.geo.regions = []
    //     this.map.setOption(this.config)
    //     return
    //   }
    //   let regions = [{
    //     name,
    //     selected: true,
    //     itemStyle: {
    //       areaColor: '#5ad4ff',
    //       shadowColor: 'rgba(0, 0, 0, 1)',
    //       shadowBlur: 10,
    //       shadowOffsetY: 10,
    //       shadowOffsetX: -5,
    //     }
    //   }]
    //   if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
    //     regions = []
    //   }
    //   this.config.geo.regions = regions
    //   this.map.setOption(this.config)
    // },
  },
}
</script>

<style lang="stylus" scoped>
.map-wrapper
  width 46%
  height 70%
  position absolute
  left 27.27%
  >.map
    width 100%
    height 100%
    z-index 99
  >.sum
    display flex
    width 60%
    margin 1rem auto 0
    justify-content space-between
    >div
      text-align center
      font-weight bold
      h2,.count
        color $edgeColor !important
        font-family $font-pang !important
        font-size 1.5rem !important
</style>
<style lang="stylus">
.map-tooltip-info
  color $edgeColor
  padding 1rem
  border .1rem solid $edgeColor
  span
    color #fff
</style>
