<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: 'qualityWarning',
  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',
          confine: true,
          formatter: ({data}) => {
            if (data && data.value) {
              return `<div>${data.name}：${data.value}</div>`
            }
            return null
          }
        },
        toolbox: {
          show: false,
        },
        visualMap: {
          min: 0,
          max: 40,
          itemWidth: 10,
          itemHeight: '100%',
          left: 'auto',
          right: 0,
          realtime: false,
          calculable: true,
          textStyle: {
            color: '#fff',
          },
          inRange: {
            color: ['#46e016', 'gold', '#ff2424']
          }
        },
        series: [],
      },
      options: [
        '小龙虾',
        '加州鲈',
        '南美白对虾',
      ],
      type: '小龙虾',
    }
  },
  mounted() {
    // this.$nextTick(this.init)
    setTimeout(this.init, 0)
  },
  beforeDestroy() {
    this.map && window.removeEventListener('resize', () => this.map.resize())
  },
  computed: {
    qualityWarning() {
      return [
        {province: '北京市', type: '小龙虾', value: 4},
        {province: '北京市', type: '加州鲈', value: 0},
        {province: '北京市', type: '南美白对虾', value: 0},
        {province: '天津市', type: '小龙虾', value: 5},
        {province: '天津市', type: '加州鲈', value: 2},
        {province: '天津市', type: '南美白对虾', value: 0},
        {province: '河北省', type: '小龙虾', value: 0},
        {province: '河北省', type: '加州鲈', value: 0},
        {province: '河北省', type: '南美白对虾', value: 0},
        {province: '山西省', type: '小龙虾', value: 0},
        {province: '山西省', type: '加州鲈', value: 0},
        {province: '山西省', type: '南美白对虾', value: 0},
        {province: '内蒙古自治区', type: '小龙虾', value: 0},
        {province: '内蒙古自治区', type: '加州鲈', value: 0},
        {province: '内蒙古自治区', type: '南美白对虾', value: 0},
        {province: '辽宁省', type: '小龙虾', value: 0},
        {province: '辽宁省', type: '加州鲈', value: 0},
        {province: '辽宁省', type: '南美白对虾', value: 0},
        {province: '吉林省', type: '小龙虾', value: 0},
        {province: '吉林省', type: '加州鲈', value: 0},
        {province: '吉林省', type: '南美白对虾', value: 0},
        {province: '黑龙江省', type: '小龙虾', value: 0},
        {province: '黑龙江省', type: '加州鲈', value: 0},
        {province: '黑龙江省', type: '南美白对虾', value: 0},
        {province: '上海市', type: '小龙虾', value: 1},
        {province: '上海市', type: '加州鲈', value: 2},
        {province: '上海市', type: '南美白对虾', value: 0},
        {province: '江苏省', type: '小龙虾', value: 18},
        {province: '江苏省', type: '加州鲈', value: 8},
        {province: '江苏省', type: '南美白对虾', value: 7},
        {province: '浙江省', type: '小龙虾', value: 8},
        {province: '浙江省', type: '加州鲈', value: 15},
        {province: '浙江省', type: '南美白对虾', value: 21},
        {province: '安徽省', type: '小龙虾', value: 0},
        {province: '安徽省', type: '加州鲈', value: 0},
        {province: '安徽省', type: '南美白对虾', value: 2},
        {province: '福建省', type: '小龙虾', value: 2},
        {province: '福建省', type: '加州鲈', value: 8},
        {province: '福建省', type: '南美白对虾', value: 13},
        {province: '江西省', type: '小龙虾', value: 2},
        {province: '江西省', type: '加州鲈', value: 2},
        {province: '江西省', type: '南美白对虾', value: 0},
        {province: '山东省', type: '小龙虾', value: 3},
        {province: '山东省', type: '加州鲈', value: 3},
        {province: '山东省', type: '南美白对虾', value: 12},
        {province: '河南省', type: '小龙虾', value: 2},
        {province: '河南省', type: '加州鲈', value: 0},
        {province: '河南省', type: '南美白对虾', value: 0},
        {province: '湖北省', type: '小龙虾', value: 39},
        {province: '湖北省', type: '加州鲈', value: 3},
        {province: '湖北省', type: '南美白对虾', value: 0},
        {province: '湖南省', type: '小龙虾', value: 4},
        {province: '湖南省', type: '加州鲈', value: 0},
        {province: '湖南省', type: '南美白对虾', value: 0},
        {province: '广东省', type: '小龙虾', value: 4},
        {province: '广东省', type: '加州鲈', value: 21},
        {province: '广东省', type: '南美白对虾', value: 14},
        {province: '广西壮族自治区', type: '小龙虾', value: 2},
        {province: '广西壮族自治区', type: '加州鲈', value: 13},
        {province: '广西壮族自治区', type: '南美白对虾', value: 12},
        {province: '海南省', type: '小龙虾', value: 0},
        {province: '海南省', type: '加州鲈', value: 14},
        {province: '海南省', type: '南美白对虾', value: 15},
        {province: '重庆市', type: '小龙虾', value: 0},
        {province: '重庆市', type: '加州鲈', value: 0},
        {province: '重庆市', type: '南美白对虾', value: 0},
        {province: '四川省', type: '小龙虾', value: 0},
        {province: '四川省', type: '加州鲈', value: 0},
        {province: '四川省', type: '南美白对虾', value: 0},
        {province: '贵州省', type: '小龙虾', value: 0},
        {province: '贵州省', type: '加州鲈', value: 0},
        {province: '贵州省', type: '南美白对虾', value: 0},
        {province: '云南省', type: '小龙虾', value: 0},
        {province: '云南省', type: '加州鲈', value: 1},
        {province: '云南省', type: '南美白对虾', value: 0},
        {province: '陕西省', type: '小龙虾', value: 0},
        {province: '陕西省', type: '加州鲈', value: 0},
        {province: '陕西省', type: '南美白对虾', value: 0},
        {province: '甘肃省', type: '小龙虾', value: 0},
        {province: '甘肃省', type: '加州鲈', value: 0},
        {province: '甘肃省', type: '南美白对虾', value: 0},
        {province: '青海省', type: '小龙虾', value: 0},
        {province: '青海省', type: '加州鲈', value: 0},
        {province: '青海省', type: '南美白对虾', value: 0},
        {province: '宁夏回族自治区', type: '小龙虾', value: 0},
        {province: '宁夏回族自治区', type: '加州鲈', value: 0},
        {province: '宁夏回族自治区', type: '南美白对虾', value: 0},
        {province: '新疆维吾尔自治区', type: '小龙虾', value: 0},
        {province: '新疆维吾尔自治区', type: '加州鲈', value: 0},
        {province: '新疆维吾尔自治区', type: '南美白对虾', value: 0},
      ]
    },
  },
  methods: {
    init() {
      this.$echarts.registerMap(this.mapName, china)
      this.map = this.$echarts.init(this.$refs.map)
      window.addEventListener('resize', () => this.map.resize())
      this.map.setOption(this.config)
    },
    setMapData(type) {
      const list = this.qualityWarning.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: {
    qualityWarning: {
      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>
