<template>
  <div class="mode-rate">
    <Select class="custom-select" v-model="type" transfer @on-change="handleChange">
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
    <div class="legend">
      <p v-for="(item, i) in data2" :key="item.name"><span :style="`background:${config2.colors[i]}`"/> {{item.name}}</p>
    </div>
    <div class="chart-wrapper" v-if="showChart">
      <div>
        <p class="title"><span/>面积</p>
        <div>
          <m-chart :config="{...config, colors: ['#02efd7', 'gray']}" :data="data[0]"/>
          <m-chart :config="{...config, colors: ['#00c6c7', '#f59946', '#45dbf6', '#44b0f2', '#4777f5', '#4f45f7', '#af43f7', '#fb43f2'],}" :data="data[1]"/>
          <span class="pointer"/>
          <span class="pointer"/>
        </div>
      </div>
      <div>
        <div>
          <p class="title"><span/>{{type}}产量</p>
          <m-chart style="z-index:99;" :config="config2" :data="data2"/>
          <div class="border" />
        </div>
        <div>
          <p class="title"><span/>{{type}}产值</p>
          <m-chart style="z-index:99;" :config="config3" :data="data3"/>
          <div class="border" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const mock = [
  {
    key: '水稻',
    data1: [
      [
        {name: '稻小龙虾', value: 232816.3},
        {name: '剩余', value: 54575},
      ],
      [
        {name: '稻青虾', value: 520},
        {name: '稻蟹', value: 7590},
        {name: '稻鲤', value: 9073},
        {name: '稻鳅', value: 3200},
        {name: '稻鳖', value: 4920},
        {name: '稻蛙', value: 600},
        {name: '稻螺', value: 0},
        {name: '其他', value: 28672},
      ]
    ],
    data2: [
      {name: '稻小龙虾', value: 124596.413},
      {name: '稻青虾', value: 208},
      {name: '稻蟹', value: 2762.88},
      {name: '稻鲤', value: 4252.1},
      {name: '稻鳅', value: 1920},
      {name: '稻鳖', value: 1643.77},
      {name: '稻蛙', value: 252},
      {name: '稻螺', value: 0},
      {name: '其他', value: 12527.46},
    ],
    data3: [
      {name: '稻小龙虾', value: 38766.932},
      {name: '稻青虾', value: 124},
      {name: '稻蟹', value: 968.4},
      {name: '稻鲤', value: 1468.468},
      {name: '稻鳅', value: 2400},
      {name: '稻鳖', value: 2243.599},
      {name: '稻蛙', value: 101},
      {name: '稻螺', value: 0},
      {name: '其他', value: 4292.7},
    ],
  },
  {
    key: '水产品',
    data1: [
      {name: '稻小龙虾', value: 232816.3},
      {name: '稻青虾', value: 520},
      {name: '稻蟹', value: 7590},
      {name: '稻鲤', value: 9073},
      {name: '稻鳅', value: 3200},
      {name: '稻鳖', value: 4920},
      {name: '稻蛙', value: 600},
      {name: '稻螺', value: 0},
      {name: '其他', value: 28672},
      // {value: 287391.3}
    ],
    data2: [
      {name: '稻小龙虾', value: 38155.739},
      {name: '稻青虾', value: 41.6},
      {name: '稻蟹', value: 271.046},
      {name: '稻鲤', value: 752.5},
      {name: '稻鳅', value: 416},
      {name: '稻鳖', value: 915.78},
      {name: '稻蛙', value: 45},
      {name: '稻螺', value: 0},
      {name: '其他', value: 3419.95},
    ],
    data3: [
      {name: '稻小龙虾', value: 108933.004},
      {name: '稻青虾', value: 375},
      {name: '稻蟹', value: 1565.2},
      {name: '稻鲤', value: 1972.2},
      {name: '稻鳅', value: 3500},
      {name: '稻鳖', value: 10794.928},
      {name: '稻蛙', value: 135},
      {name: '稻螺', value: 0},
      {name: '其他', value: 33780.3},
    ],
  },
]
export default {
  name: 'ModeRate',
  data() {
    return {
      showChart: false,
      type: '水稻',
      options: ['水稻', '水产品'],
      config: {
        // colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
        colors: ['#02efd7', '#00c6c7', '#f59946', '#45dbf6', '#44b0f2', '#4777f5', '#4f45f7', '#af43f7', '#fb43f2'],
        legend: {
          hide: true,
        },
        tooltip: {
          formatter: '{b}<br/>{c}亩 ({d}%)',
          confine: true,
        },
        shape: [
          {type: 'pie', startAngle: -30, radius: [35 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data: mock[0].data1,
      config2: {
        // colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
        colors: ['#02efd7', '#00c6c7', '#f59946', '#45dbf6', '#44b0f2', '#4777f5', '#4f45f7', '#af43f7', '#fb43f2'],
        legend: {
          hide: true,
        },
        tooltip: {
          formatter: '{b}<br/>{c}吨 ({d}%)',
          confine: true,
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data2: mock[0].data2,
      config3: {
        // colors: ['#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#5CA3E6', '#F04864', '#D598D9'],
        colors: ['#02efd7', '#00c6c7', '#f59946', '#45dbf6', '#44b0f2', '#4777f5', '#4f45f7', '#af43f7', '#fb43f2'],
        legend: {
          hide: true,
        },
        tooltip: {
          formatter: '{b}<br/>{c}万元 ({d}%)',
          confine: true,
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
        ]
      },
      data3: mock[0].data3,
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true)
  },
  methods: {
    handleChange(name) {
      const dataSource = mock.find(item => item.key === name)
      this.data = dataSource.data1
      this.data2 = dataSource.data2
      this.data3 = dataSource.data3
    }
  }
}
</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)
      &:first-child
        >div
          width 100%
          height 100%
          display flex
          position relative
          .pointer
            position absolute
            background gray
            left 35%
            width 10rem
            height 0.1rem
            transform rotate(-15deg)
            top 26%
            &:last-child
              transform rotate(15deg)
              top 70%
          >div
            flex 1
      &: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>
