<template>
  <m-grid
    :template="[
      'map select select',
      'map box1 box1',
      'map box2 box3',
      'map box2 box4',
    ]"
    columns="1fr 0.6fr 0.6fr"
    rows="2rem 1fr 1fr 1fr"
    gap="0.5rem"
  >
    <FishingPriceMap area="map"/>
    <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="价格指数走势图">
      <PriceTrend />
    </m-card>
    <m-card area="box2" title="水产交易情况">
      <TradeSituation />
    </m-card>
    <m-card area="box3" title="价格趋势分析">
      <PriceAnalysis />
    </m-card>
    <m-card area="box4" title="最新行情">
      <NewQuotation />
    </m-card>
  </m-grid>
</template>

<script>
import FishingPriceMap from './components/fishing-price/fishing-price-map'
import PriceTrend from './components/fishing-price/price-trend'
import TradeSituation from './components/fishing-price/trade-situation'
import PriceAnalysis from './components/fishing-price/price-analysis'
import NewQuotation from './components/fishing-price/new-quotation'
export default {
  name: 'FishingPrice',
  components: {
    FishingPriceMap,
    PriceTrend,
    TradeSituation,
    PriceAnalysis,
    NewQuotation,
  },
  data() {
    return {
      disease: '2019',
      options: ['2019', '2018', '2017'],
    }
  },
}
</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>
