<template>
<m-grid
  area="grid"
  :template="[
    'left . right',
    'left . right',
    'left bottom right',
  ]"
  columns="1fr 2fr 1fr"
  rows="1fr 1fr 1fr"
  gap="0.5rem">
    <m-animate enter="fadeInDown" leave="fadeOutUp">
      <SeedlingMap v-if="!showCompany" ref="map" @select="handleMapSelect" @choice="handleMapChoice"/>
    </m-animate>
    <m-animate enter="fadeInDown" leave="fadeOutUp">
      <MigrateMap v-if="showCompany" />
    </m-animate>
    <div v-if="showProvince || showCompany" class="back-btn" @click="handleBack">
      <Icon type="md-arrow-round-back" /> 返回
    </div>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <div v-show="!showProvince && !showCompany" area="left" class="content part-left">
        <m-card title="近5年面积与数量对比">
          <AreaCount />
        </m-card>
        <m-card title="产销数据信息">
          <SalesData />
        </m-card>
      </div>
    </m-animate>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <div v-show="showProvince" area="left" class="content part-left">
        <m-card title="近5年面积与数量对比">
          <AreaCount v-if="showProvince"/>
        </m-card>
        <m-card title="良种场列表">
          <PlaceList v-if="showProvince" />
        </m-card>
      </div>
    </m-animate>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <div v-show="showCompany" area="left" class="content part-left2">
        <m-card title="企业简介">
          <Select class="custom-select" value="宣传图片" transfer>
            <Option v-for="item in ['宣传图片']" :key="item" :value="item">{{item}}</Option>
          </Select>
          <img style="width:100%;height:92%;" src="@/assets/images/img4.png"/>
        </m-card>
        <m-card title="水质监测">
          <WaterTest />
        </m-card>
        <m-card title="尾水监测">
          <TailWater />
        </m-card>
      </div>
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <div v-show="!showProvince && !showCompany" area="right" class="content part-right">
        <m-card title="良种场性质分析">
          <PropertyAnalysis />
        </m-card>
        <m-card title="良种场经营情况">
          <OperateSituation />
        </m-card>
      </div>
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <div v-show="showProvince" area="right" class="content part-right">
        <m-card title="产量和面积">
          <ProductArea v-if="showProvince"/>
        </m-card>
        <m-card title="良种价格和产量趋势">
          <Trend v-if="showProvince"/>
        </m-card>
      </div>
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <div v-show="showCompany" area="right" class="content part-right2">
        <m-card title="视频监控">
          <Select class="custom-select" value="线路1" transfer>
            <Option v-for="item in ['线路1']" :key="item" :value="item">{{item}}</Option>
          </Select>
          <img style="width:100%;height:92%;" src="@/assets/images/img5.png"/>
        </m-card>
        <m-card title="气象监测">
          <Weather />
        </m-card>
        <m-card title="智能控制">
          <SmartControl />
        </m-card>
      </div>
    </m-animate>
    <m-animate enter="fadeInUp" leave="fadeOutDown">
      <m-card v-show="showCompany" area="bottom" title="会诊信息">
        <ConsultInfo />
      </m-card>
    </m-animate>
  </m-grid>
</template>

<script>
import AreaCount from './components/seedling/area-count'
import SalesData from './components/seedling/sales-data'
import PropertyAnalysis from './components/seedling/property-analysis'
import OperateSituation from './components/seedling/operate-situation'
import SeedlingMap from './components/seedling/seedling-map'
import MigrateMap from './components/seedling/migrate-map'
import PlaceList from './components/seedling/place-list'
import ProductArea from './components/seedling/product-area'
import Trend from './components/seedling/trend'
import WaterTest from './components/seedling/water-test'
import TailWater from './components/seedling/tail-water'
import Weather from './components/seedling/weather'
import SmartControl from './components/seedling/smart-control'
import ConsultInfo from './components/seedling/consult-info'
export default {
  name: 'Seedling',
  components: {
    AreaCount,
    SalesData,
    PropertyAnalysis,
    OperateSituation,
    SeedlingMap,
    MigrateMap,
    PlaceList,
    ProductArea,
    Trend,
    WaterTest,
    TailWater,
    Weather,
    SmartControl,
    ConsultInfo,
  },
  data() {
    return {
      showProvince: false,
      showCompany: false,
    }
  },
  methods: {
    handleMapSelect() {
      this.showProvince = true
    },
    handleBack() {
      this.$refs.map && this.$refs.map.loadNationMap()
      this.showProvince = false
      this.showCompany = false
    },
    handleMapChoice() {
      this.showCompany = true
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  display flex
  flex-direction column
  width 100%
  height 100%
  overflow hidden
  >div
    margin-top .5rem
  &.part-left,
  &.part-right
    >div
      &:nth-child(1)
        flex 1
      &:nth-child(2)
        flex 2
  &.part-left2,
  &.part-right2
    >div
      flex 1
</style>
