<template>
<div class="map-wrapper">
  <BorderBox class="sum">
    <p>采集点数量</p>
    <h2><m-count class="count" :value="6884785" :decimal="0"/> 个</h2>
  </BorderBox>
  <div class="map" ref="map"/>
  <div class="visual-range">
    <p>
      采集点数量<br/>
      <span>（单位：个）</span>
    </p>
    <div class="slider-wrapper">
      <Slider class="slider" v-model="range" :step="100" range :max="6884785"/>
      <m-count class="count" :value="0" :decimal="0"/>
      <m-count class="count" :value="6884785" :decimal="0"/>
    </div>
  </div>
</div>
</template>

<script>
import china from 'echarts/map/json/china.json'
import BorderBox from './border-box'
const mapData = [
  {name: '海门', value: [121.15, 31.89, 90], visualMap: false},
  {name: '鄂尔多斯', value: [109.781327, 39.608266, 120], visualMap: false},
  {name: '招远', value: [120.38, 37.35, 142], visualMap: false},
  {name: '舟山', value: [122.207216, 29.985295, 123], visualMap: false},
]
const provinceData = [
  { name: '北京', value: 177 },
  { name: '天津', value: 42 },
  { name: '河北', value: 102 },
  { name: '山西', value: 81 },
  { name: '内蒙古', value: 17 },
  { name: '辽宁', value: 67 },
  { name: '吉林', value: 182 },
  { name: '黑龙江', value: 100 },
  { name: '上海', value: 24 },
  { name: '江苏', value: 299 },
  { name: '浙江', value: 114 },
  { name: '安徽', value: 29 },
  { name: '福建', value: 316 },
  { name: '江西', value: 91 },
  { name: '山东', value: 19 },
  { name: '河南', value: 137 },
  { name: '湖北', value: 26 },
  { name: '湖南', value: 114 },
  { name: '重庆', value: 91 },
  { name: '四川', value: 25 },
  { name: '贵州', value: 62 },
  { name: '云南', value: 83 },
  { name: '西藏', value: 9 },
  { name: '陕西', value: 80 },
  { name: '甘肃', value: 256 },
  { name: '青海', value: 10 },
  { name: '宁夏', value: 18 },
  { name: '新疆', value: 67 },
  { name: '广东', value: 123 },
  { name: '广西', value: 59 },
  { name: '海南', value: 14 }

]
export default {
  name: 'FishingPriceMap',
  components: {
    BorderBox,
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    visualLabel: {
      type: Array,
      default() {
        return ['高', '低']
      }
    },
    visualFormatter: {
      type: [String, Function],
      default() {
        return () => {
          return `
          <div class="disease-map-tooltip-info">
            <h3>采集点名称</h3>
            <p><span>地址：</span>苏州市吴中区金庭镇</p>
            <p><span>最新采集时间：</span>2020-08-23 15:57:00</p>
          </div>
          `
        }
      }
    },
    visualConfig: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      range: [0, 6884785],
      map: null,
      mapName: 'china',
      config: {
        geo: {
          map: 'china',
          left: '1%',
          right: '1%',
          // top: 'auto',
          // bottom: '10%',
          zoom: 1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          // scaleLimit: { //滚轮缩放的极限控制
          //   min: 0.8,
          //   max: 2,
          // },
          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)
  },
  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)
      // this.addEvent()
      this.config.series.push({
        type: 'map',
        map: this.mapName,
        geoIndex: 0,
        data: provinceData,
      })
      this.config.series.push({
        type: 'scatter', // series图表类型
        coordinateSystem: 'geo', // series坐标系类型
        data: mapData,
        itemStyle: {
          color: 'gold'
        },
        symbolSize: 20 * this.sizeRate,
        symbol: 'pin',
        geoIndex: 0,
      })
      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
        console.log(name)
        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)
    },
  },
  // watch: {
  //   data(cur, past) {
  //     if (cur && cur !== past && cur.length > 0) {
  //       this.config.series.push({
  //         type: 'scatter',
  //         coordinateSystem: 'geo',
  //         // map: this.mapName,
  //         // geoIndex: 0,
  //         data: cur,
  //       })
  //       this.config.tooltip = {
  //         trigger: 'item',
  //         formatter: this.visualFormatter,
  //       }
  //       // this.config.visualMap = Object.assign({
  //       //   show: false,
  //       //   inRange: {
  //       //     opacity: 0.5,
  //       //     color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
  //       //   }
  //       // }, this.visualConfig)
  //       this.map.setOption(this.config)
  //     }
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
.map-wrapper
  width 100%
  height 100%
  position relative
  >.map
    position absolute
    width 45%
    height 250%
    z-index 99
  >.sum
    width 40%
    margin 2rem auto 0
    text-align center
    font-weight bold
    h2,.count
      color $edgeColor !important
      font-family $font-pang !important
      font-size 1.5rem !important
  .visual-range
    display flex
    z-index 9999
    width 100%
    align-items center
    justify-content center
    position absolute
    bottom 2rem
    p
      text-align center
      margin-right 1rem
      span
        font-size .8rem
    .slider-wrapper
      position relative
      width 60%
      .slider
        width 100%
      .count
        position absolute
        &:first-child
          left 0
        &:last-child
          right 0
</style>
<style lang="stylus">
.disease-map-tooltip-info
  color $edgeColor
  padding 1rem
  border .1rem solid $edgeColor
  span
    color #fff
</style>
