<template>
  <div class="disease-warning">
    <p>预警指标：预报，问诊，用药，天气情况</p>
    <Select v-model="type" class="custom-select" @on-change="setMapData" size="small" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
    <div class="map" ref="map" />
  </div>
</template>

<script>
import china from 'echarts/map/json/china.json'
// const mapData = [
//   { 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: 'DiseaseWarning',
  data() {
    return {
      mapName: 'china',
      map: null,
      config: {
        geo: {
          map: 'china',
          left: 0,
          top: 0,
          bottom: 0,
          right: '15%',
          zoom: 1,
          itemStyle: {
            areaColor: 'rgba(0, 191, 255, 0.1)',
            borderColor: 'rgba(0, 191, 255, 0.9)',
            // borderWidth: 0.1,
          }
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{b}：{c}'
          formatter: ({data}) => {
            if (data && data.value) {
              return `<div>${data.name}：${data.value}</div>`
            }
            return null
          }
        },
        toolbox: {
          show: false,
        },
        visualMap: {
          min: 0,
          max: 200,
          itemWidth: 10,
          left: 'auto',
          right: 0,
          realtime: false,
          calculable: true,
          textStyle: {
            color: '#fff',
          },
          inRange: {
            color: ['green', 'yellow', 'red']
          }
        },
        series: [],
      },
      options: [
        '草鱼',
        '黄颡鱼',
        '克氏原螯虾',
        '鲤',
        '鲢',
        '南美白对虾',
        '青鱼',
        '乌鳢',
        '鳙',
      ],
      type: '草鱼',
    }
  },
  mounted() {
    // this.$nextTick(this.init)
    setTimeout(this.init, 0)
  },
  computed: {
    diseaseWarning() {
      return this.$store.state.diseaseWarning
    },
  },
  methods: {
    init() {
      this.$echarts.registerMap(this.mapName, china)
      this.map = this.$echarts.init(this.$refs.map)
      this.map.setOption(this.config)
    },
    setMapData(type) {
      const list = this.diseaseWarning.filter(item => item.type === type).map(item => {
        return {
          name: item.province.replace('省', '').replace('市', ''),
          value: item.value,
        }
      })
      this.config.series = [{
        type: 'map',
        geoIndex: 0,
        map: this.mapName,
        data: list,
      }]
      this.config.visualMap = Object.assign(this.config.visualMap, {max: Math.max(...list.map(item => item.value))})
      this.map && this.map.setOption(this.config)
    },
  },
  watch: {
    diseaseWarning: {
      handler(cur, past) {
        if (cur && cur !== past && cur.length > 0) {
          this.setMapData(this.type)
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
.disease-warning
  width 100%
  height 100%
  .map
    width 100%
    height 90%
  p
    text-align center
</style>
