<template>
  <div class="special-monitoring">
    <div class="chart" ref="chart" />
    <Select class="custom-select" v-model="disease" @on-change="setMapData" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
  </div>
</template>

<script>
const mock = [
  {disease: '鲤春病毒血症', year: '2019', data1: 32, data2: 55},
  {disease: '鲤春病毒血症', year: '2018', data1: 21, data2: 75},
  {disease: '鲤春病毒血症', year: '2017', data1: 27, data2: 28},
  {disease: '白斑综合征', year: '2019', data1: 85, data2: 175},
  {disease: '白斑综合征', year: '2018', data1: 117, data2: 329},
  {disease: '白斑综合征', year: '2017', data1: 128, data2: 136},
  {disease: '草鱼出血病', year: '2019', data1: 14, data2: 39},
  {disease: '草鱼出血病', year: '2018', data1: 30, data2: 42},
  {disease: '草鱼出血病', year: '2017', data1: 14, data2: 14},
  {disease: '锦鲤疱疹病毒病', year: '2019', data1: 4, data2: 45},
  {disease: '锦鲤疱疹病毒病', year: '2018', data1: 12, data2: 104},
  {disease: '锦鲤疱疹病毒病', year: '2017', data1: 11, data2: 13},
]
export default {
  name: 'SpecialMonitoring',
  data() {
    return {
      disease: '鲤春病毒血症',
      options: ['鲤春病毒血症', '白斑综合征', '草鱼出血病', '锦鲤疱疹病毒病'],
      chart: null,
      option: {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          width: '100%',
          textStyle: {
            color: '#ccc',
            fontSize: this.fontSize,
          },
          data: ['阳性监测点数量', '阳性样品数量'],
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          width: 'auto',
          height: '70%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(91,213,255,0.1)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#ccc',
            },
            fontSize: this.fontSize,
          },
          data: ['2017', '2018', '2019'],
        },
        yAxis: [
          {
            type: 'value',
            // name: '单位：个',
            max: 150,
            min: 0,
            // interval: 30,
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: 'gold',
              },
              fontSize: this.fontSize,
            },
            nameTextStyle: {
              color: '#ccc',
              fontSize: this.fontSize,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(91,213,255,0.1)'
              }
            },
          },
          {
            type: 'value',
            // name: '单位：个',
            max: 350,
            min: 0,
            // interval: 70,
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: 'red',
              },
              fontSize: this.fontSize,
            },
            nameTextStyle: {
              color: '#ccc',
              fontSize: this.fontSize,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(91,213,255,0.1)'
              }
            },
          }
        ],
        series: [],
        dataZoom: [{
          start: 0,
          end: 100,
          backgroundColor: '#105179',
          fillerColor: '#46b9ef',
          borderColor: 'transparent',
          bottom: '2%',
          height: 10,
          borderRadius: 10,
          handleSize: '200%',
          handleStyle: {
            color: '#fff',
          },
          textStyle: {
            color: '#fff',
          },
        }],
      }
    }
  },
  mounted() {
    // this.$nextTick(this.init)
    setTimeout(this.init, 0)
  },
  computed: {
    fontSize() {
      return Math.floor(screen.height * 1.48 / 100)
    },
  },
  methods: {
    init() {
      this.chart = this.$echarts.init(this.$refs.chart)
      this.setMapData(this.disease)
    },
    setMapData(disease) {
      const list = mock.filter(item => item.disease === disease).reverse()
      this.option.series = [
        {name: '阳性监测点数量', itemStyle: {color: 'gold'}, type: 'line', data: list.map(item => item.data1)},
        {name: '阳性样品数量', itemStyle: {color: 'red'}, yAxisIndex: 1, type: 'line', data: list.map(item => item.data2)},
      ]
      const max = Math.max(...list.map(item => item.data1), ...list.map(item => item.data2))
      this.option.yAxis[0].max = max
      this.option.yAxis[1].max = max
      this.chart.setOption(this.option)
    },
  }
}
</script>

<style lang="stylus" scoped>
.special-monitoring
  width 100%
  height 100%
  >.chart
    width 100%
    height 95%
</style>
