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

<script>
const mock = [
  {type: '青鱼', year: '2016', value: 102},
  {type: '青鱼', year: '2017', value: 80},
  {type: '青鱼', year: '2018', value: 66},
  {type: '青鱼', year: '2019', value: 56},
  {type: '青鱼', year: '2020', value: 31},
  {type: '草鱼', year: '2016', value: 3377},
  {type: '草鱼', year: '2017', value: 2902},
  {type: '草鱼', year: '2018', value: 2676},
  {type: '草鱼', year: '2019', value: 2400},
  {type: '草鱼', year: '2020', value: 1442},
  {type: '鲢', year: '2016', value: 1019},
  {type: '鲢', year: '2017', value: 837},
  {type: '鲢', year: '2018', value: 702},
  {type: '鲢', year: '2019', value: 618},
  {type: '鲢', year: '2020', value: 416},
  {type: '鳙', year: '2016', value: 567},
  {type: '鳙', year: '2017', value: 454},
  {type: '鳙', year: '2018', value: 402},
  {type: '鳙', year: '2019', value: 391},
  {type: '鳙', year: '2020', value: 258},
  {type: '鲤', year: '2016', value: 1130},
  {type: '鲤', year: '2017', value: 969},
  {type: '鲤', year: '2018', value: 771},
  {type: '鲤', year: '2019', value: 638},
  {type: '鲤', year: '2020', value: 412},
  {type: '黄颡鱼', year: '2016', value: 123},
  {type: '黄颡鱼', year: '2017', value: 130},
  {type: '黄颡鱼', year: '2018', value: 139},
  {type: '黄颡鱼', year: '2019', value: 104},
  {type: '黄颡鱼', year: '2020', value: 74},
  {type: '乌鳢', year: '2016', value: 129},
  {type: '乌鳢', year: '2017', value: 120},
  {type: '乌鳢', year: '2018', value: 83},
  {type: '乌鳢', year: '2019', value: 121},
  {type: '乌鳢', year: '2020', value: 68},
  {type: '克氏原螯虾', year: '2016', value: 60},
  {type: '克氏原螯虾', year: '2017', value: 42},
  {type: '克氏原螯虾', year: '2018', value: 78},
  {type: '克氏原螯虾', year: '2019', value: 78},
  {type: '克氏原螯虾', year: '2020', value: 76},
  {type: '南美白对虾', year: '2016', value: 0},
  {type: '南美白对虾', year: '2017', value: 5},
  {type: '南美白对虾', year: '2018', value: 4},
  {type: '南美白对虾', year: '2019', value: 2},
  {type: '南美白对虾', year: '2020', value: 0},
]
import echarts from 'echarts'
export default {
  name: 'DiseaseForecast',
  data() {
    return {
      type: '青鱼',
      options: [
        '青鱼',
        '草鱼',
        '鲢',
        '鳙',
        '鲤',
        '黄颡鱼',
        '乌鳢',
        '克氏原螯虾',
        '南美白对虾',
      ],
      chart: null,
      option: {
        tooltip: {
          confine: true,
          trigger: 'axis',
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          width: 'auto',
          height: 'auto',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(91,213,255,0.1)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#ccc',
            },
            fontSize: this.fontSize,
          },
          data: ['2016', '2017', '2018', '2019', '2020'],
        },
        yAxis: {
          type: 'value',
          // name: '单位：个',
          max: 500,
          min: 0,
          // interval: 100,
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
            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)
  },
  beforeDestroy() {
    this.chart && window.removeEventListener('resize', () => this.chart.resize())
  },
  computed: {
    fontSize() {
      return Math.floor(screen.height * 1.48 / 100)
    },
  },
  methods: {
    init() {
      this.chart = this.$echarts.init(this.$refs.chart)
      window.addEventListener('resize', () => this.chart.resize())
      this.setChartData(this.type)
    },
    setChartData(type) {
      const list = mock.filter(item => item.type === type).map(item => item.value)
      this.option.series = [
        {
          itemStyle: {color: 'gold'}, areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: 'rgba(255,215,0,0.8)'},
              {offset: 1, color: 'rgba(255,215,0,0.1)'}
            ])},
          smooth: true, type: 'line', data: list
        },
      ]
      this.option.yAxis = Object.assign(this.option.yAxis, {max: Math.max(...list)})
      this.chart.setOption(this.option)
    },
  }
}
</script>

<style lang="stylus" scoped>
.disease-forecast
  width 100%
  height 100%
  overflow hidden
  >.chart
    width 100%
    height 95%
</style>
