<template>
  <div class="trend">
    <Select class="select" value="南美白对虾" transfer>
      <Option v-for="item in ['南美白对虾']" :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"/>
      </div>
    </div>
    <div class="chart" v-if="showChart">
      <p><span/>产量趋势</p>
      <div class="unit">单位：吨</div>
      <div class="inner">
        <m-chart :config="config2" :data="data2"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Trend',
  data() {
    return {
      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: [
        {name: '1月', value: 30},
        {name: '2月', value: 25},
        {name: '3月', value: 30},
        {name: '4月', value: 35},
        {name: '5月', value: 40},
        {name: '6月', value: 45},
        {name: '7月', value: 50},
        {name: '8月', value: 40},
        {name: '9月', value: 35},
        {name: '10月', value: 30},
        {name: '11月', value: 35},
        {name: '12月', value: 40},
      ],
      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: [
        {name: '1月', value: 300000},
        {name: '2月', value: 250000},
        {name: '3月', value: 300000},
        {name: '4月', value: 350000},
        {name: '5月', value: 400000},
        {name: '6月', value: 450000},
        {name: '7月', value: 500000},
        {name: '8月', value: 400000},
        {name: '9月', value: 350000},
        {name: '10月', value: 300000},
        {name: '11月', value: 350000},
        {name: '12月', value: 400000},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  }
}
</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>
