<template>
  <div class="trend">
    <Select class="select" v-model="type" @on-change="setChart" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
    <div class="chart" v-if="showChart">
      <p><span/>价格趋势</p>
      <div class="unit">单位：元</div>
      <div class="inner">
        <m-chart :config="config" :data="data" :options="{xAxis}"/>
      </div>
    </div>
    <div class="chart" v-if="showChart">
      <p><span/>产量趋势</p>
      <div class="unit">单位：吨</div>
      <div class="inner">
        <m-chart :config="config2" :data="data2" :options="{xAxis}"/>
      </div>
    </div>
  </div>
</template>

<script>
const mockPrice = [
  {type: '青鱼', name: '2019.12', value: 16},
  {type: '罗氏沼虾', name: '2019.12', value: 56},
  {type: '中华绒螯蟹', name: '2019.12', value: 74},
  {type: '克氏原螯虾', name: '2019.12', value: 40},
  {type: '青鱼', name: '2020.01', value: 15},
  {type: '罗氏沼虾', name: '2020.01', value: 52},
  {type: '中华绒螯蟹', name: '2020.01', value: 76},
  {type: '克氏原螯虾', name: '2020.01', value: 50},
  {type: '青鱼', name: '2020.02', value: 14},
  {type: '罗氏沼虾', name: '2020.02', value: 50.5},
  {type: '中华绒螯蟹', name: '2020.02', value: 75},
  {type: '克氏原螯虾', name: '2020.02', value: 55},
  {type: '青鱼', name: '2020.03', value: 15},
  {type: '罗氏沼虾', name: '2020.03', value: 48},
  {type: '中华绒螯蟹', name: '2020.03', value: 61},
  {type: '克氏原螯虾', name: '2020.03', value: 58},
  {type: '青鱼', name: '2020.04', value: 16},
  {type: '罗氏沼虾', name: '2020.04', value: 47},
  {type: '中华绒螯蟹', name: '2020.04', value: 59},
  {type: '克氏原螯虾', name: '2020.04', value: 50},
  {type: '青鱼', name: '2020.05', value: 15},
  {type: '罗氏沼虾', name: '2020.05', value: 48},
  {type: '中华绒螯蟹', name: '2020.05', value: 61},
  {type: '克氏原螯虾', name: '2020.05', value: 38},
  {type: '青鱼', name: '2020.06', value: 15},
  {type: '罗氏沼虾', name: '2020.06', value: 45.5},
  {type: '中华绒螯蟹', name: '2020.06', value: 63},
  {type: '克氏原螯虾', name: '2020.06', value: 35},
  {type: '青鱼', name: '2020.07', value: 14},
  {type: '罗氏沼虾', name: '2020.07', value: 45.5},
  {type: '中华绒螯蟹', name: '2020.07', value: 63},
  {type: '克氏原螯虾', name: '2020.07', value: 35},
  {type: '青鱼', name: '2020.08', value: 15},
  {type: '罗氏沼虾', name: '2020.08', value: 45},
  {type: '中华绒螯蟹', name: '2020.08', value: 63},
  {type: '克氏原螯虾', name: '2020.08', value: 35},
  {type: '青鱼', name: '2020.09', value: 16},
  {type: '罗氏沼虾', name: '2020.09', value: 45.5},
  {type: '中华绒螯蟹', name: '2020.09', value: 63},
  {type: '克氏原螯虾', name: '2020.09', value: 35},
  {type: '青鱼', name: '2020.10', value: 14},
  {type: '罗氏沼虾', name: '2020.10', value: 46},
  {type: '中华绒螯蟹', name: '2020.10', value: 65},
  {type: '克氏原螯虾', name: '2020.10', value: 36},
  {type: '青鱼', name: '2020.11', value: 15},
  {type: '罗氏沼虾', name: '2020.11', value: 45},
  {type: '中华绒螯蟹', name: '2020.11', value: 68},
  {type: '克氏原螯虾', name: '2020.11', value: 38},
]
const mockProduct = [
  {type: '青鱼', name: '2019.12', value: 16.8},
  {type: '罗氏沼虾', name: '2019.12', value: 15.7},
  {type: '中华绒螯蟹', name: '2019.12', value: 15.2},
  {type: '克氏原螯虾', name: '2019.12', value: 23.9},
  {type: '青鱼', name: '2020.01', value: 15.7},
  {type: '罗氏沼虾', name: '2020.01', value: 19.8},
  {type: '中华绒螯蟹', name: '2020.01', value: 14.8},
  {type: '克氏原螯虾', name: '2020.01', value: 16.3},
  {type: '青鱼', name: '2020.02', value: 15.9},
  {type: '罗氏沼虾', name: '2020.02', value: 19.3},
  {type: '中华绒螯蟹', name: '2020.02', value: 12.8},
  {type: '克氏原螯虾', name: '2020.02', value: 20.5},
  {type: '青鱼', name: '2020.03', value: 38.7},
  {type: '罗氏沼虾', name: '2020.03', value: 30.1},
  {type: '中华绒螯蟹', name: '2020.03', value: 15.7},
  {type: '克氏原螯虾', name: '2020.03', value: 35.4},
  {type: '青鱼', name: '2020.04', value: 39.6},
  {type: '罗氏沼虾', name: '2020.04', value: 48.9},
  {type: '中华绒螯蟹', name: '2020.04', value: 17.2},
  {type: '克氏原螯虾', name: '2020.04', value: 49.3},
  {type: '青鱼', name: '2020.05', value: 55.9},
  {type: '罗氏沼虾', name: '2020.05', value: 50.4},
  {type: '中华绒螯蟹', name: '2020.05', value: 2.2},
  {type: '克氏原螯虾', name: '2020.05', value: 86.2},
  {type: '青鱼', name: '2020.06', value: 57.8},
  {type: '罗氏沼虾', name: '2020.06', value: 52.9},
  {type: '中华绒螯蟹', name: '2020.06', value: 2.1},
  {type: '克氏原螯虾', name: '2020.06', value: 79.8},
  {type: '青鱼', name: '2020.07', value: 61.2},
  {type: '罗氏沼虾', name: '2020.07', value: 60.1},
  {type: '中华绒螯蟹', name: '2020.07', value: 2.3},
  {type: '克氏原螯虾', name: '2020.07', value: 67.6},
  {type: '青鱼', name: '2020.08', value: 68.8},
  {type: '罗氏沼虾', name: '2020.08', value: 68.9},
  {type: '中华绒螯蟹', name: '2020.08', value: 1.9},
  {type: '克氏原螯虾', name: '2020.08', value: 62.1},
  {type: '青鱼', name: '2020.09', value: 70.7},
  {type: '罗氏沼虾', name: '2020.09', value: 60.2},
  {type: '中华绒螯蟹', name: '2020.09', value: 6.5},
  {type: '克氏原螯虾', name: '2020.09', value: 59.6},
  {type: '青鱼', name: '2020.10', value: 68.5},
  {type: '罗氏沼虾', name: '2020.10', value: 59.8},
  {type: '中华绒螯蟹', name: '2020.10', value: 12.8},
  {type: '克氏原螯虾', name: '2020.10', value: 40.2},
  {type: '青鱼', name: '2020.11', value: 71.7},
  {type: '罗氏沼虾', name: '2020.11', value: 59.5},
  {type: '中华绒螯蟹', name: '2020.11', value: 16.3},
  {type: '克氏原螯虾', name: '2020.11', value: 27.6},
]
export default {
  name: 'Trend',
  data() {
    return {
      type: '青鱼',
      options: ['青鱼', '罗氏沼虾', '中华绒螯蟹', '克氏原螯虾'],
      showChart: false,
      config: {
        colors: [['rgba(248,199,22,1)', 'rgba(248,199,22,0.2)']],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'line', areaStyle: {}, key: 'value'},
        ],
        xAxis: {
          key: 'name',
        },
      },
      data: [],
      config2: {
        colors: [['rgba(220,66,69,1)', 'rgba(220,66,69,0.2)']],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'line', areaStyle: {}, key: 'value'},
        ],
        xAxis: {
          key: 'name',
        },
      },
      data2: [],
      xAxis: {
        axisLabel: {
          rotate: 45,
          interval: 0,
          fontSize: 12 * Number((screen.height / 800).toFixed(1)),
          textStyle: {
            color: '#fff',
          },
        }
      }
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
    this.$nextTick(() => this.setChart(this.type))
  },
  methods: {
    setChart(type) {
      this.data = mockPrice.filter(item => item.type === type)
      this.data2 = mockProduct.filter(item => item.type === type)
    }
  }
}
</script>

<style lang="stylus" scoped>
.trend
  width 100%
  height 100%
  overflow hidden
  >.select
    display block
    width 50%
    margin 0 auto
  >.chart
    width 100%
    height 48%
    position relative
    display flex
    flex-direction column
    .unit
      color $edgeColor
      margin .5rem 0
    .inner
      flex 1
    span
      display block
      text-align center
      color $edgeColor
    p
      display flex
      font-size 1.2rem
      font-weight bold
      align-items center
      span
        display inline-block
        width .3rem
        height 1.2rem
        background $edgeColor
        margin-right .5rem
</style>
