<template>
<m-grid
  area="grid"
  :template="[
    'select select',
    'box1 box1',
    'box2 box3',
    'box4 box4',
  ]"
  columns="1fr 1.3fr"
  rows="2rem 1fr 1fr 1fr"
  gap="0.5rem">
  <div class="year-select-wrapper" area="select">
    <p>主显示</p>
    <Select class="year-select" @on-change="$store.commit('SET_MAIN_YEAR', $event)" v-model="disease" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
  </div>
  <m-card area="box1" title="养殖模式数据占比">
    <ModeRate2 />
  </m-card>
  <m-card area="box2" title="各面积占比">
    <AreaRate :data="areaData"/>
  </m-card>
  <m-card area="box3" title="稻小龙虾数据对比">
    <DataComparison :data="dataComparison"/>
  </m-card>
  <m-card area="box4" title="稻虾加工情况统计">
    <ProcessSituation2 />
  </m-card>
</m-grid>
</template>

<script>
import ModeRate2 from './mode-rate2'
import AreaRate from './area-rate'
import DataComparison from './data-comparison'
import ProcessSituation2 from './process-situation2'
export default {
  name: 'ProvinceRiceFish',
  components: {
    ModeRate2,
    AreaRate,
    DataComparison,
    ProcessSituation2,
  },
  data() {
    return {
      disease: '2019',
      options: ['2019', '2018', '2017'],
      dataComparison: [
        {year: '2013', area: 1089, product: 711.765},
        {year: '2014', area: 3215, product: 2101.307},
        {year: '2015', area: 7412, product: 4844.444},
        {year: '2016', area: 9856, product: 6441.83},
        {year: '2017', area: 12745, product: 8330.065},
        {year: '2018', area: 16547, product: 10815.03},
        {year: '2019', area: 19824, product: 12955.124},
      ],
      areaData: [
        {name: '3000亩以上', value: 19824},
        {name: '1000-3000亩', value: 0},
        {name: '500-1000亩', value: 780},
        {name: '100-500亩', value: 0},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.year-select-wrapper
  display flex
  align-items center
  justify-content flex-end
  p
    font-size 1.2rem
    font-weight bold
    margin-right 1rem
  .year-select
    width 15%
</style>
