<template>
  <div class="mode-rate">
    <Select class="custom-select" v-model="type" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
    <div class="legend">
      <p v-for="(item, i) in data" :key="item.name"><span :style="`background:${config.colors[i]}`"/> {{item.name}}</p>
    </div>
    <div class="chart-wrapper" v-if="showChart">
      <div>
        <p class="title"><span/>面积</p>
        <m-chart :config="config" :data="data"/>
      </div>
      <div>
        <div>
          <p class="title"><span/>水稻产量</p>
          <m-chart style="z-index:99;" :config="config2" :data="data2"/>
          <div class="border" />
        </div>
        <div>
          <p class="title"><span/>水稻产值</p>
          <m-chart style="z-index:99;" :config="config3" :data="data3"/>
          <div class="border" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModeRate',
  data() {
    return {
      showChart: false,
      type: '水稻',
      options: ['水稻'],
      config: {
        colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb', 'transparent'],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'pie', startAngle: 0, clockWise: false, radius: [10 * Number((screen.height / 800).toFixed(1)), 700 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['40%', '80%']}
        ]
      },
      data: [
        {name: '稻小龙虾', value: 900},
        {name: '稻青虾', value: 800},
        {name: '稻蟹', value: 700},
        {name: '稻鲤', value: 600},
        {name: '稻鳅', value: 500},
        {name: '稻鳖', value: 400},
        {name: '稻蛙', value: 300},
        {name: '稻螺', value: 200},
        {name: '其他', value: 100},
        {value: 4500}
      ],
      config2: {
        colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data2: [
        {name: '稻小龙虾', value: 900},
        {name: '稻青虾', value: 800},
        {name: '稻蟹', value: 700},
        {name: '稻鲤', value: 600},
        {name: '稻鳅', value: 500},
        {name: '稻鳖', value: 400},
        {name: '稻蛙', value: 300},
        {name: '稻螺', value: 200},
        {name: '其他', value: 100},
      ],
      config3: {
        colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data3: [
        {name: '稻小龙虾', value: 900},
        {name: '稻青虾', value: 800},
        {name: '稻蟹', value: 700},
        {name: '稻鲤', value: 600},
        {name: '稻鳅', value: 500},
        {name: '稻鳖', value: 400},
        {name: '稻蛙', value: 300},
        {name: '稻螺', value: 200},
        {name: '其他', value: 100},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true)
  },
}
</script>

<style lang="stylus" scoped>
.mode-rate
  width 100%
  height 100%
  overflow hidden
  .legend
    display flex
    align-items center
    justify-content space-around
    width 80%
    margin 0 auto .5rem
    span
      display inline-block
      width .8rem
      height @width
      border-radius 50%
      margin-right .4rem
  .chart-wrapper
    width inherit
    height inherit
    display flex
    div
      position relative
    >div
      width 49%
      height calc(100% - 1rem)
      &:last-child
        display flex
        border-left .1rem solid $color-map()
        >div
          flex 1
          .border
            width 8rem
            height @width
            border 0.2rem solid #00f2ff
            position absolute
            top 50%
            left 50%
            transform translate(-50%, -50%)
            border-radius 50%
            box-shadow 0 0 1rem 0.2rem rgba(255,255,255,0.3), inset 0 0 1rem 0.2rem rgba(255,255,255,0.3)
            opacity .9
    .title
      position absolute
      left 1rem
      top 0
      display flex
      align-items center
      font-weight bold
      font-size 1rem
      >span
        display block
        width .3rem
        height 1.2rem
        background $edgeColor
        margin-right .6rem
</style>
