<template>
<m-grid
  area="grid"
  :template="[
    'left . right',
  ]"
  columns="1fr 2fr 1fr"
  rows="1fr"
  gap="0.5rem">
  <div id="oceanMap"/>
  <div v-if="showDetail" class="back-btn" @click="handleBack">
    <Icon type="md-arrow-round-back" /> 返回
  </div>
  <div v-if="!showDetail" class="sum-wrapper">
    <BorderBox class="sum">
      <p>海洋牧场数量</p>
      <h2><m-count class="count" :value="348745" :decimal="0"/> 个</h2>
    </BorderBox>
    <BorderBox class="sum">
      <p>人工鱼礁数量</p>
      <h2><m-count class="count" :value="5448745" :decimal="0"/> 个</h2>
    </BorderBox>
  </div>
  <m-animate enter="fadeInLeft" leave="fadeOutLeft">
    <div v-show="!showDetail" area="left" class="content part-left">
      <m-card title="近5年面积与数量对比">
        <AreaCount />
      </m-card>
      <m-card title="各地区海洋牧场建设情况">
        <FarmBuild />
      </m-card>
    </div>
  </m-animate>
  <m-animate enter="fadeInRight" leave="fadeOutRight">
    <div v-show="!showDetail" area="right" class="content part-right">
      <m-card title="各类海洋牧场占比">
        <FarmRate />
      </m-card>
      <m-card title="各地区人工鱼礁建设情况">
        <FarmBuild />
      </m-card>
    </div>
  </m-animate>
  <m-animate enter="fadeInLeft" leave="fadeOutLeft">
    <div v-show="showDetail" area="left" class="content part-left2">
      <m-card title="文字介绍">
        <p style="text-indent:2rem;line-height:1.5;">采用规模化渔业设施和系统化管理体制，利用自然的海洋生态环境，将人工放流的经济海洋生物聚集起来，像在陆地放牛羊一样，对鱼、虾、蟹、贝、藻等海洋资源进行有计划和有目的的海上放养。</p>
        <p style="text-indent:2rem;line-height:1.5;">采用规模化渔业设施和系统化管理体制，利用自然的海洋生态环境，将人工放流的经济海洋生物聚集起来，像在陆地放牛羊一样，对鱼、虾、蟹、贝、藻等海洋资源进行有计划和有目的的海上放养。</p>
      </m-card>
      <m-card title="图片介绍">
        <img style="width:100%;height:92%;" src="@/assets/images/img1.png"/>
      </m-card>
      <m-card title="视频介绍">
        <img style="width:100%;height:92%;" src="@/assets/images/img2.png"/>
      </m-card>
    </div>
  </m-animate>
  <m-animate enter="fadeInRight" leave="fadeOutRight">
    <div v-show="showDetail" area="right" class="content part-right">
      <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/img3.png"/>
      </m-card>
      <m-card title="数据识别">
        <DataIdentify v-if="showDetail"/>
      </m-card>
    </div>
  </m-animate>
</m-grid>
</template>

<script>
const {AMap} = window
import AreaCount from './components/ocean-farm/area-count'
import FarmRate from './components/ocean-farm/farm-rate'
import FarmBuild from './components/ocean-farm/farm-build'
import BorderBox from './components/border-box'
import DataIdentify from './components/ocean-farm/data-identify'
export default {
  name: 'OceanFarm',
  components: {
    AreaCount,
    FarmRate,
    FarmBuild,
    BorderBox,
    DataIdentify,
  },
  data() {
    return {
      map: null,
      showDetail: false,
      mapConfig: {
        zoom: 7,
        zooms: [6, 8],
        center: [121.973849, 28.142576], // 钓鱼岛附近
        mapStyle: 'amap://styles/blue',
        features: ['bg', 'road', 'point'],
      },
      mapPolygon: null,
      mapMarker: null,
      infoWindow: null,
    }
  },
  mounted() {
    this.$nextTick(this.initMap)
  },
  beforeDestroy() {
    this.map && this.map.destroy()
    this.map = null
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('oceanMap', this.mapConfig)
      this.mapPolygon = new AMap.Polygon({ // 上色小区的底板颜色
        fillColor: 'gold',
        fillOpacity: 0.1,
        strokeWeight: 1,
        strokeColor: 'gold',
        cursor: 'pointer',
        path: [
          [122.767281, 29.920257],
          [123.767281, 29.920257],
          [124.767281, 28.920257],
          [123.767281, 27.920257],
          [122.767281, 27.920257],
          [122.267281, 28.920257],
        ]
      }).on('click', e => {
        this.showDetail = true
        const location = [e.lnglat.getLng(), e.lnglat.getLat()]
        this.map.setZoomAndCenter(8, location)
        if (!this.mapMarker) {
          this.mapMarker = new AMap.Marker({
            position: [123.424044, 29.028291],
            zIndex: 99,
            icon: new AMap.Icon({
              // size: [30, 10],
              image: require('@/assets/images/title-arrow.png'),
            }),
            // extData: {
            //   community: item.name,
            //   buildingNo: item.buildingNo,
            //   intention: item.intention,
            //   lon: item.lon,
            //   lat: item.lat,
            //   color: item.color,
            //   ...curObj
            // },
          }).on('click', e => {
            const location = [e.lnglat.getLng(), e.lnglat.getLat()]
            new AMap.InfoWindow({
              content: `
                <div class="map-tooltip-info">
                  <h3>人工鱼礁名称</h3>
                  <p><span>申请年份：</span>2015年</p>
                  <p><span>建设类型：</span>养护型、休闲型</p>
                </div>
              `
            }).open(this.map, location)
          })
          this.map.add([this.mapMarker])
          this.mapPolygon.off('mouseover', this.polygonListener)
        }
      }).on('mouseover', this.polygonListener).on('mouseout', () => {
        this.infoWindow.close()
      })
      this.map.add([this.mapPolygon])
    },
    handleBack() {
      this.showDetail = false
      const {zoom, center} = this.mapConfig
      this.map.setZoomAndCenter(zoom, center)
      this.map.remove(this.mapMarker)
      this.mapPolygon.on('mouseover', this.polygonListener)
    },
    polygonListener(e) {
      const location = [e.lnglat.getLng(), e.lnglat.getLat()]
      this.infoWindow = new AMap.InfoWindow({
        content: `
          <div class="map-tooltip-info">
            <h3>苏州市大有乡鑫富洋海参养殖场</h3>
            <p><span>地址：</span>海洋牧场1号</p>
            <p><span>申请年份：</span>2015年</p>
            <p><span>建设类型：</span>养护型、休闲型</p>
          </div>
        `
      })
      this.infoWindow.open(this.map, location)
    },
  }
}
</script>

<style lang="stylus" scoped>
#oceanMap
  z-index 9
  width 100%
  height 100%
  position absolute
.monitor-card
  z-index 10
.sum-wrapper
  z-index 99
  position absolute
  left 0
  right 0
  width 35%
  margin 2rem auto 0
  display flex
  justify-content space-around
  .sum
    width 45%
    text-align center
    font-weight bold
    h2,.count
      color $edgeColor !important
      font-family $font-pang !important
      font-size 1.5rem !important
.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
    >div
      flex 1
</style>
<style lang="stylus">
.amap-logo
.amap-copyright
  display none !important
.amap-icon
  img
    width 100%
    height 100%
.menu
  .ivu-collapse-content
    max-height 80vh
    overflow-y auto
    overflow-x hidden
    padding 0 1rem
    .ivu-collapse-content-box
      padding 1rem 0
      button
        text-align left
        font-size 1rem
.tab-menu
  .ivu-tabs-bar
    margin-bottom 0
  .ivu-tabs-nav
    .ivu-tabs-tab
      &:last-child
        margin-right 0
.amap-info-content.amap-info-outer
  background rgba(0,0,0,0.5)
  padding 0 !important
.map-tooltip-info
  color $edgeColor
  padding 1rem
  border .1rem solid $edgeColor
  span
    color #fff
</style>
