<template>
<m-grid
  area="grid"
  :template="[
    'select select',
    'box1 box1',
    'box2 box3',
    'box4 box4',
  ]"
  columns="1fr 1fr"
  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="养殖模式数据占比">
    <ModeRate />
  </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="稻虾加工情况统计">
    <ProcessSituation />
  </m-card>
</m-grid>
</template>

<script>
import ModeRate from './mode-rate'
import AreaRate from './area-rate'
import DataComparison from './data-comparison'
import ProcessSituation from './process-situation'
export default {
  name: 'NationRiceFish',
  components: {
    ModeRate,
    AreaRate,
    DataComparison,
    ProcessSituation,
  },
  data() {
    return {
      disease: '2019',
      options: ['2019', '2018', '2017'],
      dataComparison: [
        {year: '2015', area: 125478.9, product: 83652.6},
        {year: '2016', area: 162541.2, product: 108360.8},
        {year: '2017', area: 204785.6, product: 136523.7},
        {year: '2018', area: 248459.2, product: 165639.5},
        {year: '2019', area: 287391, product: 192180.2},
      ]
    }
  },
}
</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>
