<template>
  <div class="quality-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'
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 [
        {'type': '草鱼', 'province': '北京市', 'value': 10},
        {'type': '草鱼', 'province': '天津市', 'value': 70},
        {'type': '草鱼', 'province': '河北省', 'value': 16},
        {'type': '草鱼', 'province': '辽宁省', 'value': 30},
        {'type': '草鱼', 'province': '吉林省', 'value': 9},
        {'type': '草鱼', 'province': '黑龙江省', 'value': 10},
        {'type': '草鱼', 'province': '上海市', 'value': 19},
        {'type': '草鱼', 'province': '江苏省', 'value': 318},
        {'type': '草鱼', 'province': '浙江省', 'value': 33},
        {'type': '草鱼', 'province': '安徽省', 'value': 140},
        {'type': '草鱼', 'province': '福建省', 'value': 242},
        {'type': '草鱼', 'province': '江西省', 'value': 212},
        {'type': '草鱼', 'province': '山东省', 'value': 84},
        {'type': '草鱼', 'province': '河南省', 'value': 141},
        {'type': '草鱼', 'province': '湖北省', 'value': 165},
        {'type': '草鱼', 'province': '湖南省', 'value': 240},
        {'type': '草鱼', 'province': '广东省', 'value': 294},
        {'type': '草鱼', 'province': '广西', 'value': 280},
        {'type': '草鱼', 'province': '重庆市', 'value': 59},
        {'type': '草鱼', 'province': '四川省', 'value': 125},
        {'type': '草鱼', 'province': '贵州省', 'value': 7},
        {'type': '草鱼', 'province': '云南省', 'value': 17},
        {'type': '草鱼', 'province': '陕西省', 'value': 72},
        {'type': '草鱼', 'province': '甘肃省', 'value': 7},
        {'type': '草鱼', 'province': '宁夏', 'value': 72},
        {'type': '草鱼', 'province': '新疆', 'value': 4},
        {'type': '黄颡鱼', 'province': '河北省', 'value': 1},
        {'type': '黄颡鱼', 'province': '江苏省', 'value': 3},
        {'type': '黄颡鱼', 'province': '浙江省', 'value': 11},
        {'type': '黄颡鱼', 'province': '安徽省', 'value': 2},
        {'type': '黄颡鱼', 'province': '江西省', 'value': 8},
        {'type': '黄颡鱼', 'province': '湖北省', 'value': 11},
        {'type': '黄颡鱼', 'province': '湖南省', 'value': 4},
        {'type': '黄颡鱼', 'province': '广东省', 'value': 48},
        {'type': '黄颡鱼', 'province': '广西', 'value': 33},
        {'type': '黄颡鱼', 'province': '重庆市', 'value': 2},
        {'type': '黄颡鱼', 'province': '四川省', 'value': 16},
        {'type': '克氏原螯虾', 'province': '江苏省', 'value': 41},
        {'type': '克氏原螯虾', 'province': '安徽省', 'value': 18},
        {'type': '克氏原螯虾', 'province': '湖北省', 'value': 15},
        {'type': '克氏原螯虾', 'province': '四川省', 'value': 1},
        {'type': '克氏原螯虾', 'province': '贵州省', 'value': 3},
        {'type': '鲤', 'province': '北京市', 'value': 12},
        {'type': '鲤', 'province': '天津市', 'value': 72},
        {'type': '鲤', 'province': '河北省', 'value': 15},
        {'type': '鲤', 'province': '内蒙古', 'value': 13},
        {'type': '鲤', 'province': '辽宁省', 'value': 38},
        {'type': '鲤', 'province': '吉林省', 'value': 26},
        {'type': '鲤', 'province': '黑龙江省', 'value': 60},
        {'type': '鲤', 'province': '江苏省', 'value': 38},
        {'type': '鲤', 'province': '浙江省', 'value': 28},
        {'type': '鲤', 'province': '安徽省', 'value': 3},
        {'type': '鲤', 'province': '山东省', 'value': 39},
        {'type': '鲤', 'province': '河南省', 'value': 193},
        {'type': '鲤', 'province': '湖南省', 'value': 8},
        {'type': '鲤', 'province': '广东省', 'value': 9},
        {'type': '鲤', 'province': '广西', 'value': 56},
        {'type': '鲤', 'province': '重庆市', 'value': 2},
        {'type': '鲤', 'province': '四川省', 'value': 44},
        {'type': '鲤', 'province': '贵州省', 'value': 6},
        {'type': '鲤', 'province': '云南省', 'value': 5},
        {'type': '鲤', 'province': '陕西省', 'value': 47},
        {'type': '鲤', 'province': '甘肃省', 'value': 7},
        {'type': '鲤', 'province': '宁夏', 'value': 49},
        {'type': '鲤', 'province': '新疆', 'value': 1},
        {'type': '鲢', 'province': '天津市', 'value': 51},
        {'type': '鲢', 'province': '河北省', 'value': 2},
        {'type': '鲢', 'province': '辽宁省', 'value': 1},
        {'type': '鲢', 'province': '吉林省', 'value': 22},
        {'type': '鲢', 'province': '黑龙江省', 'value': 20},
        {'type': '鲢', 'province': '上海市', 'value': 8},
        {'type': '鲢', 'province': '江苏省', 'value': 128},
        {'type': '鲢', 'province': '安徽省', 'value': 94},
        {'type': '鲢', 'province': '江西省', 'value': 13},
        {'type': '鲢', 'province': '山东省', 'value': 7},
        {'type': '鲢', 'province': '河南省', 'value': 54},
        {'type': '鲢', 'province': '湖北省', 'value': 89},
        {'type': '鲢', 'province': '湖南省', 'value': 90},
        {'type': '鲢', 'province': '广东省', 'value': 21},
        {'type': '鲢', 'province': '广西', 'value': 28},
        {'type': '鲢', 'province': '重庆市', 'value': 23},
        {'type': '鲢', 'province': '四川省', 'value': 23},
        {'type': '鲢', 'province': '贵州省', 'value': 1},
        {'type': '鲢', 'province': '云南省', 'value': 4},
        {'type': '鲢', 'province': '陕西省', 'value': 7},
        {'type': '鲢', 'province': '甘肃省', 'value': 1},
        {'type': '鲢', 'province': '宁夏', 'value': 15},
        {'type': '南美白对虾', 'province': '广东省', 'value': 5},
        {'type': '南美白对虾', 'province': '海南省', 'value': 4},
        {'type': '青鱼', 'province': '江苏省', 'value': 15},
        {'type': '青鱼', 'province': '浙江省', 'value': 18},
        {'type': '青鱼', 'province': '安徽省', 'value': 5},
        {'type': '青鱼', 'province': '湖北省', 'value': 1},
        {'type': '青鱼', 'province': '湖南省', 'value': 15},
        {'type': '青鱼', 'province': '广东省', 'value': 5},
        {'type': '青鱼', 'province': '广西', 'value': 7},
        {'type': '乌鳢', 'province': '江苏省', 'value': 7},
        {'type': '乌鳢', 'province': '湖北省', 'value': 1},
        {'type': '乌鳢', 'province': '湖南省', 'value': 8},
        {'type': '乌鳢', 'province': '广东省', 'value': 66},
        {'type': '乌鳢', 'province': '广西', 'value': 1},
        {'type': '鳙', 'province': '天津市', 'value': 42},
        {'type': '鳙', 'province': '河北省', 'value': 1},
        {'type': '鳙', 'province': '吉林省', 'value': 12},
        {'type': '鳙', 'province': '黑龙江省', 'value': 13},
        {'type': '鳙', 'province': '上海市', 'value': 4},
        {'type': '鳙', 'province': '江苏省', 'value': 74},
        {'type': '鳙', 'province': '安徽省', 'value': 25},
        {'type': '鳙', 'province': '江西省', 'value': 19},
        {'type': '鳙', 'province': '山东省', 'value': 2},
        {'type': '鳙', 'province': '河南省', 'value': 23},
        {'type': '鳙', 'province': '湖北省', 'value': 54},
        {'type': '鳙', 'province': '湖南省', 'value': 79},
        {'type': '鳙', 'province': '广东省', 'value': 11},
        {'type': '鳙', 'province': '广西', 'value': 15},
        {'type': '鳙', 'province': '重庆市', 'value': 10},
        {'type': '鳙', 'province': '四川省', 'value': 4},
        {'type': '鳙', 'province': '贵州省', 'value': 2},
        {'type': '鳙', 'province': '云南省', 'value': 1},
        {'type': '鳙', 'province': '陕西省', 'value': 3},
        {'type': '鳙', 'province': '宁夏', 'value': 8}
      ]
    },
  },
  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>
.quality-warning
  width 100%
  height 100%
  .map
    width 100%
    height 90%
  p
    text-align center
</style>
