<template>
  <div class="trade-situation">
    <div v-if="showChart">
      <p><span/>成交量占比</p>
      <m-chart class="chart" :config="config" :data="data"/>
    </div>
    <div v-if="showChart">
      <p><span/>销售额</p>
      <span class="unit">单位：万元</span>
      <m-chart class="chart" :config="config2" :data="data2"/>
    </div>
  </div>
</template>

<script>
const mock = [
  {year: '2019', name: '鱼类', value: 821.45},
  {year: '2019', name: '虾类', value: 273.82},
  {year: '2019', name: '蟹类', value: 136.91},
  {year: '2019', name: '贝类', value: 68.45},
  {year: '2019', name: '藻类', value: 41.07},
  {year: '2019', name: '其他类', value: 27.38},
  {year: '2018', name: '鱼类', value: 700.97},
  {year: '2018', name: '虾类', value: 233.66},
  {year: '2018', name: '蟹类', value: 116.83},
  {year: '2018', name: '贝类', value: 58.41},
  {year: '2018', name: '藻类', value: 35.05},
  {year: '2018', name: '其他类', value: 23.37},
  {year: '2017', name: '鱼类', value: 651.47},
  {year: '2017', name: '虾类', value: 217.16},
  {year: '2017', name: '蟹类', value: 108.58},
  {year: '2017', name: '贝类', value: 54.29},
  {year: '2017', name: '藻类', value: 32.57},
  {year: '2017', name: '其他类', value: 21.72},
]
const mock2 = [
  {year: '2019', name: '鱼类', value: 1687.55},
  {year: '2019', name: '虾类', value: 562.51},
  {year: '2019', name: '蟹类', value: 281.26},
  {year: '2019', name: '贝类', value: 140.63},
  {year: '2019', name: '藻类', value: 84.38},
  {year: '2019', name: '其他类', value: 56.25},
  {year: '2018', name: '鱼类', value: 1443.7},
  {year: '2018', name: '虾类', value: 481.23},
  {year: '2018', name: '蟹类', value: 240.62},
  {year: '2018', name: '贝类', value: 120.31},
  {year: '2018', name: '藻类', value: 72.18},
  {year: '2018', name: '其他类', value: 48.12},
  {year: '2017', name: '鱼类', value: 1330.71},
  {year: '2017', name: '虾类', value: 443.57},
  {year: '2017', name: '蟹类', value: 221.79},
  {year: '2017', name: '贝类', value: 110.89},
  {year: '2017', name: '藻类', value: 66.54},
  {year: '2017', name: '其他类', value: 44.36},
]
export default {
  name: 'TradeSituation',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#38fd8d', '#8c7eee', '#f3ff33', '#ffb529', '#ff4747', '#47B3FF'],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'pie', radius: [0, 60 * Number((screen.height / 800).toFixed(1))], startAngle: 0, roseType: 'radius', label: {show: true, formatter: '{b}: {c}万吨'}}
        ]
      },
      data: [],
      config2: {
        colors: [['#18a6ee', '#6f63ed']],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'bar', barWidth: '20%', key: 'value', borderRadius: [10, 10, 10, 10]},
        ],
        xAxis: {
          key: 'name',
        },
      },
      data2: [],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  },
  // computed: {
  //   sizeRate() {
  //     return Number((screen.height / 800).toFixed(1))
  //   },
  // },
  methods: {
    setChartData(year) {
      this.data = mock.filter(item => item.year === year)
      this.data2 = mock2.filter(item => item.year === year)
    },
  },
  watch: {
    '$store.state.mainYear': {
      handler(cur) {
        this.setChartData(cur)
      },
      immediate: true,
    }
  },
}
</script>

<style lang="stylus" scoped>
.trade-situation
  width 100%
  height 100%
  >div
    width 100%
    height 50%
    position relative
    .unit
      position absolute
      right 1rem
      top 1rem
    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
    >.chart
      height calc(100% - 2rem)
</style>
