<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 v-if="!showProvince && !showCompany"/>
        </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" :data="areaData"/>
        </m-card>
        <m-card title="良种场列表">
          <PlaceList @select="handleMapChoice" 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" v-model="companyIntroType" transfer>
            <Option v-for="item in ['宣传图片', '文字描述']" :key="item" :value="item">{{item}}</Option>
          </Select>
          <img v-if="companyIntroType === '宣传图片'" style="width:100%;height:92%;" src="@/assets/images/img4.png"/>
          <div>
            <p style="text-indent:2rem;line-height:2;">
              江苏省渔业技术推广示范基地建设项目得到了江苏省发改委、江苏省财政厅、江苏省海洋与渔业局的高度重视和关心，于2013年9月16日获省发改委批准立项实施（苏发改农经发[2013]1412号）。建设项目占地面积：538亩，建设年限：2013年9月—2016年8月，项目总投资：6125.35万元。
            </p>
            <p style="text-indent:2rem;line-height:2;">
              以建设国内一流、省内领先的省级现代渔业技术推广示范基地为目标，主要分六大功能区：繁培试验区185.3亩、新品种和新技术示范区255.7亩、循环水生态湿地处理区48.5亩、休闲渔业区9亩、工厂化设施渔业区16.6亩、公共服务与综合管理区22.9亩。
            </p>
            <p style="text-indent:2rem;line-height:2;">
              基地建成后，主要开展我省淡水养殖主导品种池塘高效生态渔业技术及工厂化设施渔业养殖技术研发，新品种、新技术、新模式、新装备的集成应用试验、示范与推广，以及长江名贵水生动物增殖放流研究和应用工作，为我省淡水养殖渔业可持续发展和天然渔业资源恢复提供技术支撑。基地实施内容以公益性服务职能建设为主体。
            </p>
            <p style="text-indent:2rem;line-height:2;">
              项目建成后以强化新品种、新技术、新装备集成示范为主攻方向，以长江名贵水产品种开发、利用为主要抓手，以经济效益、社会效益、生态效益三者协调发展为目标，以建立健全为社会提供公益性服务职能为中心任务，建设省内领先、国内一流的现代渔业科技示范园；同时通过增殖放流，加快长江特色水产品自然资源恢复；通过基地内各种生态循环养殖模式的示范和展示，为我省渔业生产从业者提供技术示范和指导，利用窗口示范效应提高我省养殖从业者的生态养殖理念，可以降低养殖过程中环境生态负荷。
            </p>
          </div>
        </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">
        <div class="year-select-wrapper">
          <p>主显示</p>
          <Select class="year-select" value="2019" transfer>
            <Option v-for="item in ['2019']" :key="item" :value="item">{{item}}</Option>
          </Select>
        </div>
        <m-card title="良种场性质分析">
          <PropertyAnalysis v-if="!showProvince && !showCompany"/>
        </m-card>
        <m-card title="良种场经营情况">
          <OperateSituation v-if="!showProvince && !showCompany"/>
        </m-card>
      </div>
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <div v-show="showProvince" area="right" class="content part-right">
        <div class="year-select-wrapper">
          <p>主显示</p>
          <Select class="year-select" value="2019" transfer>
            <Option v-for="item in ['2019']" :key="item" :value="item">{{item}}</Option>
          </Select>
        </div>
        <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', '线路2']" :key="item" :value="item">{{item}}</Option>
          </Select>
          <img @click="videoModal = true" style="width:100%;height:92%;cursor:pointer;" 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-modal v-model="videoModal" title="视频">
      <video v-if="videoModal" style="width:100%;height:100%;" controls autoplay>
        <source src="@/assets/images/monitor.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
      </video>
    </m-modal>
  </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 {
      videoModal: false,
      showProvince: false,
      showCompany: false,
      companyIntroType: '宣传图片',
      areaData: [
        {year: '2015', area: 701, count: 1},
        {year: '2016', area: 701, count: 1},
        {year: '2017', area: 943, count: 2},
        {year: '2018', area: 943, count: 2},
        {year: '2019', area: 1320.5, count: 3},
      ],
    }
  },
  methods: {
    handleMapSelect() {
      this.showProvince = true
    },
    handleBack() {
      this.$refs.map && this.$refs.map.loadNationMap()
      this.showProvince = false
      this.showCompany = false
    },
    handleMapChoice() {
      this.showCompany = true
      this.showProvince = false
    }
  }
}
</script>

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