<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 />
  </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: 100000, product: 200000},
        {year: '2014', area: 150000, product: 280000},
        {year: '2015', area: 200000, product: 300000},
        {year: '2016', area: 300000, product: 450000},
        {year: '2017', area: 400000, product: 500000},
        {year: '2018', area: 500000, product: 650000},
        {year: '2019', area: 600000, product: 750000},
      ]
    }
  },
}
</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>
