<template>
  <div class="medicine-flow" v-if="showChart">
    <m-chart :data="data" :config="config" :options="{legend: {top: '10%'}}"/>
    <Select v-model="type" @on-change="setChartData" class="custom-select" size="small" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
  </div>
</template>

<script>
const mock = [
  {name: '江苏省', type: '杀虫药', value: 20.4},
  {name: '江苏省', type: '消毒药', value: 17.5},
  {name: '江苏省', type: '抗菌类药', value: 12.3},
  {name: '江苏省', type: '环境改良剂', value: 18.8},
  {name: '四川省', type: '杀虫药', value: 7.3},
  {name: '四川省', type: '消毒药', value: 9.5},
  {name: '四川省', type: '抗菌类药', value: 7.3},
  {name: '四川省', type: '环境改良剂', value: 5.1},
  {name: '贵州省', type: '杀虫药', value: 7.6},
  {name: '贵州省', type: '消毒药', value: 6.5},
  {name: '贵州省', type: '抗菌类药', value: 7.2},
  {name: '贵州省', type: '环境改良剂', value: 7.3},
  {name: '山东省', type: '杀虫药', value: 15.4},
  {name: '山东省', type: '消毒药', value: 15.6},
  {name: '山东省', type: '抗菌类药', value: 14.2},
  {name: '山东省', type: '环境改良剂', value: 17.2},
  {name: '安徽省', type: '杀虫药', value: 14.5},
  {name: '安徽省', type: '消毒药', value: 13.3},
  {name: '安徽省', type: '抗菌类药', value: 21},
  {name: '安徽省', type: '环境改良剂', value: 15.5},
  {name: '浙江省', type: '杀虫药', value: 17.5},
  {name: '浙江省', type: '消毒药', value: 13.6},
  {name: '浙江省', type: '抗菌类药', value: 14.5},
  {name: '浙江省', type: '环境改良剂', value: 16.5},
  {name: '陕西省', type: '杀虫药', value: 6.3},
  {name: '陕西省', type: '消毒药', value: 14},
  {name: '陕西省', type: '抗菌类药', value: 9.6},
  {name: '陕西省', type: '环境改良剂', value: 4.3},
  {name: '辽宁省', type: '杀虫药', value: 11},
  {name: '辽宁省', type: '消毒药', value: 10},
  {name: '辽宁省', type: '抗菌类药', value: 13.9},
  {name: '辽宁省', type: '环境改良剂', value: 15.3},
]
export default {
  name: 'MedicineFlow',
  data() {
    return {
      showChart: false,
      type: '杀虫药',
      options: ['杀虫药', '消毒药', '抗菌类药', '环境改良剂'],
      config: {
        tooltip: {
          formatter: '{b}：{c}%'
        },
        colors: ['#8c7eee', '#57e8ed', '#feb301', '#f49a8f', '#fda4bd', '#f3729b', '#f87be2', '#e95dc1'],
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [40 * Number((screen.height / 800).toFixed(1)), 70 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
        ]
      },
      data: [],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
    this.$nextTick(() => this.setChartData(this.type))
  },
  methods: {
    setChartData(type) {
      this.data = mock.filter(item => item.type === type)
    }
  }
}
</script>

<style lang="stylus" scoped>
.medicine-flow
  width 100%
  height 100%
</style>
