<template>
<div class="ocean-farm">
  <div id="oceanMap"/>
  <div v-if="showDetail" class="back-btn" @click="handleBack">
    <Icon type="md-arrow-round-back" /> 返回
  </div>
  <img @click="isFull = !isFull" :class="`full-btn ${isFull ? 'on' : ''}`" src="@/assets/images/right-btn.png"/>
  <div v-if="!showDetail && !isFull" class="sum-wrapper">
    <BorderBox class="sum">
      <p>海洋牧场数量</p>
      <h2><m-count class="count" :value="42" :decimal="0"/> 个</h2>
    </BorderBox>
    <BorderBox class="sum">
      <p>人工鱼礁数量</p>
      <h2><m-count class="count" :value="586" :decimal="0"/> 个</h2>
    </BorderBox>
  </div>
  <m-animate enter="fadeInLeft" leave="fadeOutLeft">
    <div v-show="!showDetail && !isFull" area="left" class="content part-left">
      <m-card title="近5年面积与数量对比">
        <AreaCount />
      </m-card>
      <m-card title="各地区海洋牧场建设情况">
        <FarmBuild :model="farmList" :sum="farmSum" />
      </m-card>
    </div>
  </m-animate>
  <m-animate enter="fadeInRight" leave="fadeOutRight">
    <div v-show="!showDetail && !isFull" area="right" class="content part-right">
      <m-card title="各类海洋牧场占比">
        <FarmRate />
      </m-card>
      <m-card title="各地区人工鱼礁建设情况">
        <FarmBuild :model="reefList" :sum="reefSum" />
      </m-card>
    </div>
  </m-animate>
  <m-animate enter="fadeInLeft" leave="fadeOutLeft">
    <div v-show="showDetail && !isFull" area="left" class="content part-left2">
      <m-card title="文字介绍">
        <p style="text-indent:2rem;line-height:2;">
          2016年11月15日，随着最后一船构件礁投放入海，辽宁省在锦州近岸海域又建设完成了一座新的人工鱼礁示范区。该人工鱼礁区内共投放“M”型人工构件礁1000座，14.5空立方米/座，合计14500空立方米，建成鱼礁示范区总面积2000亩。
        </p>
      </m-card>
      <m-card title="图片介绍">
        <Carousel v-if="showDetail && !isFull" autoplay loop>
          <CarouselItem>
            <img style="width:100%;height:100%;" src="@/assets/images/intro1.jpg"/>
          </CarouselItem>
          <CarouselItem>
            <img style="width:100%;height:100%;" src="@/assets/images/intro2.jpg"/>
          </CarouselItem>
          <CarouselItem>
            <img style="width:100%;height:100%;" src="@/assets/images/intro3.jpg"/>
          </CarouselItem>
        </Carousel>
      </m-card>
      <m-card title="视频介绍">
        <img @click="showVideo('intro.mp4')" style="width:100%;height:92%;cursor:pointer;" src="@/assets/images/img2.png"/>
      </m-card>
    </div>
  </m-animate>
  <m-modal v-model="videoModal" title="视频">
    <video v-if="videoModal" style="width:100%;height:100%;" controls autoplay>
      <source :src="require(`@/assets/images/${curVideo}`)" type="video/mp4">
      您的浏览器不支持 video 标签。
    </video>
  </m-modal>
  <m-animate enter="fadeInRight" leave="fadeOutRight">
    <div v-show="showDetail && !isFull" 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 @click="showVideo('reef.mp4')" style="width:100%;height:92%;cursor:pointer;" src="@/assets/images/img3.png"/>
      </m-card>
      <m-card title="数据识别">
        <DataIdentify v-if="showDetail && !isFull"/>
      </m-card>
    </div>
  </m-animate>
</div>
</template>

<script>
const mockFarms = [
  {name: '天津市大神堂海域国家级海洋牧场示范区', year: 2018, address: '天津市', type: '养护型', path: [[117.837104, 39.147251], [117.854927, 39.146132], [117.844866, 39.136058], [117.825606, 39.139416]]},
  {name: '河北省山海关海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '增殖型', path: [[119.833562, 39.960252], [119.85081, 39.944323], [119.824363, 39.93016], [119.797917, 39.951403]]},
  {name: '河北省祥云湾海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '养护型', path: [[118.99328, 39.18115], [118.99788, 39.178298], [118.992705, 39.176732], [118.990118, 39.179053]]},
  {name: '河北省新开口海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '休闲型', path: [[119.51464, 39.783741], [119.493368, 39.756234], [119.443925, 39.758009], [119.430702, 39.775313]]},
  {name: '河北省北戴河海域国家级海洋牧场示范区', year: 2019, address: '河北省', type: '增殖型', path: [[119.514809, 39.822785], [119.515941, 39.819141], [119.511647, 39.819072], [119.512096, 39.821995]]},
  {name: '河北省北戴河新区外侧海域国家级海洋牧场示范区', year: 2019, address: '河北省', type: '休闲型', path: [[119.556369, 39.899606], [119.565855, 39.886763], [119.551194, 39.864835], [119.539121, 39.875246]]},
  {name: '河北省乐亭县海域兴乐国家级海洋牧场示范区', year: 2019, address: '河北省', type: '增殖型', path: [[119.064852, 39.22912], [119.058241, 39.21056], [119.047605, 39.199377], [119.030357, 39.205863]]},
  {name: '河北省新开口海域通源国家级海洋牧场示范区', year: 2019, address: '河北省', type: '养护型', path: [[119.411753, 39.757635], [119.431875, 39.750756], [119.413478, 39.742102], [119.395368, 39.744987]]},
  {name: '辽宁省丹东海域国家级海洋牧场示范区', year: 2018, address: '辽宁省', type: '养护型', path: [[124.270658, 39.926747], [124.296241, 39.886011], [124.252835, 39.872722], [124.230988, 39.905054]]},
  {name: '辽宁省盘山县海域国家级海洋牧场示范区', year: 2018, address: '辽宁省', type: '增殖型', path: [[121.827887, 40.906897], [121.83881, 40.876356], [121.785056, 40.88312], [121.794254, 40.909078]]},
  {name: '辽宁省锦州市海域国家级海洋牧场示范区', year: 2019, address: '辽宁省', type: '养护型', path: [[121.11918, 40.877052], [121.151016, 40.865705], [121.134918, 40.840603], [121.107322, 40.847152]]},
  {name: '大连市獐子岛海域国家级海洋牧场示范区', year: 2018, address: '辽宁省大连市', type: '休闲型', path: [[122.746401, 39.005705], [122.717943, 38.984169], [122.680573, 39.009294], [122.71823, 39.024544]]},
  {name: '大连市海洋岛海域国家级海洋牧场示范区', year: 2018, address: '辽宁省大连市', type: '养护型', path: [[121.694959, 38.869911], [121.694527, 38.841814], [121.647528, 38.842039], [121.655146, 38.864405]]},
  {name: '大连市财神岛海域国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '增殖型', path: [[121.504229, 39.156978], [121.574369, 39.090698], [121.454787, 39.040498], [121.385797, 39.127428]]},
  {name: '大连市大长山岛海域金茂国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '养护型', path: [[122.665053, 39.264695], [122.653555, 39.250615], [122.629121, 39.258214], [122.648237, 39.269499]]},
  {name: '大连蚂蚁岛海域国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '休闲型', path: [[122.432074, 39.400661], [122.438254, 39.386608], [122.419569, 39.386274], [122.419569, 39.386274]]},
  {name: '大连市小长山岛海域经典国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '增殖型', path: [[122.726354, 39.275388], [122.726497, 39.254494], [122.688266, 39.256505], [122.697033, 39.274382]]},
  {name: '山东省芙蓉岛西部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '养护型', path: [[120.691928, 36.28805], [120.689269, 36.283308], [120.684957, 36.28581], [120.685892, 36.289534]]},
  {name: '山东省荣成北部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '休闲型', path: [[122.724006, 37.373536], [122.787247, 37.348754], [122.713657, 37.248624], [122.621671, 37.317535]]},
  {name: '山东省牟平北部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '增殖型', path: [[119.916559, 37.660068], [120.013144, 37.488007], [119.718788, 37.379807], [119.629101, 37.559443]]},
  {name: '山东省爱莲湾海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '增殖型', path: [[122.626261, 37.20221], [122.635459, 37.193587], [122.618212, 37.186227], [122.607863, 37.195657]]},
  {name: '山东省岚山东部海域万泽丰国家级海洋牧场示范区', year: 2019, address: '山东省', type: '养护型', path: [[119.3698, 35.087037], [119.376412, 35.060095], [119.319783, 35.047093], [119.305697, 35.075694]]},
  {name: '山东省莱州市太平湾海域明波国家级海洋牧场示范区', year: 2019, address: '山东省莱州市', type: '休闲型', path: [[119.837078, 37.375426], [119.84139, 37.330906], [119.810632, 37.33366], [119.795396, 37.359136]]},
  {name: '山东省荣成市南部海域好当家国家级海洋牧场示范区', year: 2019, address: '山东省荣成市', type: '养护型', path: [[122.626489, 37.283814], [122.698353, 37.262219], [122.674782, 37.214412], [122.621315, 37.236481]]},
  {name: '山东省庙岛群岛北部海域国家级海洋牧场示范区', year: 2019, address: '山东省', type: '养护型', path: [[120.766245, 37.958891], [120.76682, 37.950868], [120.758771, 37.948193], [120.754099, 37.95781]]},
  {name: '山东省荣成市桑沟湾海域国家级海洋牧场示范区', year: 2019, address: '山东省荣成市', type: '增殖型', path: [[122.579934, 37.035138], [122.639725, 37.028685], [122.620753, 36.983497], [122.559812, 37.001022]]},
  {name: '青岛市石雀滩海域国家级海洋牧场示范区', year: 2018, address: '山东省青岛市', type: '养护型', path: [[120.234654, 35.941782], [120.241122, 35.936405], [120.232785, 35.930034], [120.228402, 35.934067]]},
  {name: '青岛市崂山湾海域国家级海洋牧场示范区', year: 2018, address: '山东省青岛市', type: '增殖型', path: [[120.695613, 36.283635], [120.710848, 36.281773], [120.703086, 36.26769], [120.690007, 36.270251]]},
  {name: '青岛市崂山湾海域龙盘国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '休闲型', path: [[120.552854, 36.096153], [120.554579, 36.084487], [120.507436, 36.081687], [120.513185, 36.094287]]},
  {name: '青岛市灵山湾海域灵山国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '增殖型', path: [[120.790143, 36.333611], [120.889028, 36.275906], [120.844185, 36.259145], [120.745299, 36.254488]]},
  {name: '青岛市灵山湾海域西海岸国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '养护型', path: [[120.772895, 36.308487], [120.866032, 36.281492], [120.80624, 36.172488], [120.729202, 36.168759]]},
  {name: '上海市长江口海域国家级海洋牧场示范区', year: 2019, address: '上海市', type: '休闲型', path: [[122.03311, 31.604279], [122.143494, 31.535364], [122.067605, 31.43288], [121.998615, 31.444711]]},
  {name: '江苏省海州湾海域国家级海洋牧场示范区', year: 2018, address: '江苏省', type: '养护型', path: [[120.87638, 30.322077], [120.972966, 30.304119], [120.900527, 30.243237], [120.837286, 30.27518]]},
  {name: '浙江省中街山列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省', type: '增殖型', path: [[122.870732, 30.347152], [123.066203, 30.241379], [122.900628, 30.115499], [122.900628, 30.115499]]},
  {name: '浙江省马鞍列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省', type: '增殖型', path: [[122.234814, 30.792457], [122.40154, 30.712014], [122.360721, 30.65288], [122.328526, 30.706549]]},
  {name: '浙江省南麂列岛海域国家级海洋牧场示范区', year: 2019, address: '浙江省', type: '休闲型', path: [[120.959928, 27.528351], [121.026618, 27.494517], [121.035242, 27.468878], [120.983499, 27.46375]]},
  {name: '宁波市渔山列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省宁波市', type: '养护型', path: [[122.406368, 29.624205], [122.765115, 29.15291], [122.493755, 28.938694], [122.056819, 28.89013]]},
  {name: '广东省万山海域国家级海洋牧场示范区', year: 2018, address: '广东省', type: '增殖型', path: [[114.778017, 22.484846], [114.975788, 22.457059], [114.8907, 22.339439], [114.730874, 22.424991]]},
  {name: '广东省龟龄岛东海域国家级海洋牧场示范区', year: 2018, address: '广东省', type: '增殖型', path: [[108.398497, 21.648597], [108.420631, 21.642684], [108.40827, 21.623869], [108.387861, 21.630858]]},
  {name: '广东省南澳岛海域国家级海洋牧场示范区', year: 2019, address: '广东省', type: '休闲型', path: [[117.081474, 23.393655], [117.147589, 23.383571], [117.126892, 23.367649], [117.078599, 23.381449]]},
  {name: '广东省汕尾遮浪角西海域国家级海洋牧场示范区', year: 2019, address: '广东省', type: '养护型', path: [[115.56757, 22.672755], [115.568415, 22.672363], [115.567499, 22.672459], [115.56753, 22.672418]]},
  {name: '广西壮族自治区防城港市白龙珍珠湾海域国家级海洋牧场示范区', year: 2019, address: '广西壮族自治区', type: '养护型', path: [[108.338204, 21.582065], [108.378448, 21.569696], [108.3681, 21.544955], [108.316932, 21.554637]]},
]
const mockReefs = [
  {year: 2015, type: '建设项目', name: '1号鱼礁', location: [121.123779, 40.870778]},
  {year: 2015, type: '建设项目', name: '2号鱼礁', location: [121.130966, 40.864341]},
  {year: 2015, type: '建设项目', name: '3号鱼礁', location: [121.122486, 40.867396]},
  {year: 2015, type: '建设项目', name: '4号鱼礁', location: [121.13959, 40.86074]},
  {year: 2019, type: '创建项目', name: '5号鱼礁', location: [121.115731, 40.859867]},
  {year: 2019, type: '创建项目', name: '6号鱼礁', location: [121.127085, 40.861067]},
  {year: 2019, type: '创建项目', name: '7号鱼礁', location: [121.117886, 40.855174]},
  {year: 2019, type: '创建项目', name: '8号鱼礁', location: [121.130822, 40.852664]},
  {year: 2019, type: '建设项目', name: '9号鱼礁', location: [121.122773, 40.849499]},
]
const {AMap} = window
import yj1 from '@/assets/images/yj1.png'
import yj2 from '@/assets/images/yj2.png'
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,
      isFull: false,
      showDetail: false,
      curVideo: null,
      videoModal: false,
      mapConfig: {
        zoom: 6,
        zooms: [5, 15],
        center: [121.694959, 38.869911], // 大连附近
        // center: [121.973849, 28.142576], // 钓鱼岛附近
        mapStyle: 'amap://styles/blue',
        features: ['bg', 'road', 'point'],
      },
      mapPolygon: null,
      polygonInfo: null,
      mapMarker: null,
      markerInfo: null,
      farmList: [
        {province: '天津市', number: 1, area: 421.94, invest: 6416.46},
        {province: '河北省', number: 7, area: 2953.59, invest: 44915.37},
        {province: '辽宁省', number: 9, area: 3797.47, invest: 57748.29},
        {province: '山东省', number: 14, area: 5890, invest: 89569},
        {province: '上海市', number: 1, area: 417.25, invest: 6345.139},
        {province: '江苏省', number: 1, area: 467.24, invest: 7105.339},
        {province: '浙江省', number: 4, area: 1687.76, invest: 25665.84},
        {province: '广东省', number: 4, area: 1859.28, invest: 28274.15},
        {province: '广西', number: 1, area: 328.58, invest: 4996.73},
        {province: '天津市', number: 1, area: 421.94, invest: 6416.46},
        {province: '河北省', number: 7, area: 2953.59, invest: 44915.37},
        {province: '辽宁省', number: 9, area: 3797.47, invest: 57748.29},
        {province: '山东省', number: 14, area: 5890, invest: 89569},
        {province: '上海市', number: 1, area: 417.25, invest: 6345.139},
        {province: '江苏省', number: 1, area: 467.24, invest: 7105.339},
        {province: '浙江省', number: 4, area: 1687.76, invest: 25665.84},
        {province: '广东省', number: 4, area: 1859.28, invest: 28274.15},
        {province: '广西', number: 1, area: 328.58, invest: 4996.73},
      ],
      farmSum: [42, 17823.11, 271036.32],
      reefList: [
        {province: '天津市', number: 2512, area: 13878.45, invest: 1957.401},
        {province: '河北省', number: 17289, area: 95519.34, invest: 13471.93},
        {province: '辽宁省', number: 22489, area: 124248.6, invest: 17523.88},
        {province: '山东省', number: 35412, area: 195646.4, invest: 27593.74},
        {province: '上海市', number: 2178, area: 12033.15, invest: 1697.141},
        {province: '江苏省', number: 2614, area: 14441.99, invest: 2036.881},
        {province: '浙江省', number: 9856, area: 54453.04, invest: 7679.992},
        {province: '广东省', number: 8992, area: 49679.56, invest: 7006.746},
        {province: '广西', number: 2213, area: 12226.52, invest: 1724.414},
        {province: '天津市', number: 2512, area: 13878.45, invest: 1957.401},
        {province: '河北省', number: 17289, area: 95519.34, invest: 13471.93},
        {province: '辽宁省', number: 22489, area: 124248.6, invest: 17523.88},
        {province: '山东省', number: 35412, area: 195646.4, invest: 27593.74},
        {province: '上海市', number: 2178, area: 12033.15, invest: 1697.141},
        {province: '江苏省', number: 2614, area: 14441.99, invest: 2036.881},
        {province: '浙江省', number: 9856, area: 54453.04, invest: 7679.992},
        {province: '广东省', number: 8992, area: 49679.56, invest: 7006.746},
        {province: '广西', number: 2213, area: 12226.52, invest: 1724.414},
      ],
      reefSum: [105000, 13912.5, 80692.5],
    }
  },
  mounted() {
    setTimeout(this.initMap, 100)
  },
  beforeDestroy() {
    this.map && this.map.destroy()
    this.map = null
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
    preIcon() {
      return new AMap.Icon({
        size: [20 * this.sizeRate, 20 * this.sizeRate],
        image: yj2,
      })
    },
    clickIcon() {
      return new AMap.Icon({
        size: [40 * this.sizeRate, 40 * this.sizeRate],
        // offset: new AMap.Pixel(-60, -35),
        image: yj1,
      })
    },
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('oceanMap', this.mapConfig)
      this.addPollygon()
      this.addMarker()
    },
    addPollygon() {
      this.mapPolygon = mockFarms.map(item => {
        const polygon = new AMap.Polygon({
          fillColor: 'gold',
          fillOpacity: 0.1,
          strokeWeight: 1,
          strokeColor: 'gold',
          cursor: 'pointer',
          path: item.path,
          extData: {...item},
        })
          .on('click', this.polygonListener)
        // .on('mouseout', () => this.polygonInfo.close())
        return polygon
      })
      this.map.add(this.mapPolygon)
    },
    addMarker() {
      this.mapMarker = mockReefs.map(item => {
        const marker = new AMap.Marker({
          position: item.location,
          zIndex: 99,
          icon: this.preIcon,
          extData: {...item},
        }).on('click', e => {
          if (this.mapMarker.length > 0) {
            this.mapMarker.forEach(marker => {
              marker.setIcon(this.preIcon)
            })
            e.target.setIcon(this.clickIcon)
          }
          this.showDetail = true
          const {name, year, type, location} = e.target.getExtData()
          this.map.setZoomAndCenter(14, location)
          this.markerInfo = new AMap.InfoWindow({
            content: `
              <div class="map-tooltip-info">
                <h3>${name}</h3>
                <p><span>申请年份：</span>${year}年</p>
                <p><span>建设类型：</span>${type}</p>
              </div>
            `
          })
          this.markerInfo.open(this.map, location)
        })
        return marker
      })
      this.map.add(this.mapMarker)
    },
    handleBack() {
      this.markerInfo && this.markerInfo.close()
      this.showDetail = false
      if (this.mapMarker.length > 0) {
        this.mapMarker.forEach(marker => {
          marker.setIcon(this.preIcon)
        })
      }
      const {zoom} = this.mapConfig
      this.map.setZoom(zoom)
    },
    polygonListener(e) {
      const location = [e.lnglat.getLng(), e.lnglat.getLat()]
      const {name, address, year, type} = e.target.getExtData()
      this.polygonInfo = new AMap.InfoWindow({
        content: `
          <div class="map-tooltip-info">
            <h3>${name}</h3>
            <p><span>地址：</span>${address}</p>
            <p><span>申请年份：</span>${year}年</p>
            <p><span>建设类型：</span>${type}</p>
          </div>
        `
      }).open(this.map, location)
    },
    showVideo(src) {
      this.curVideo = src
      this.videoModal = true
    }
  }
}
</script>

<style lang="stylus" scoped>
.ocean-farm
  position relative
#oceanMap
  z-index 9
  width 100%
  height 100%
  position absolute
.full-btn
  position absolute
  right calc(25% + 1rem)
  bottom 1.5rem
  width 2.5rem
  height @width
  cursor pointer
  z-index 9999
  transition all .5s ease-in-out
  transform-origin center
  &.on
    right 1rem
    transform rotate(180deg)
.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
  width 25%
  height auto
  display flex
  flex-direction column
  overflow hidden
  position absolute
  z-index 10
  top .5rem
  bottom 0
  >div
    margin-bottom .5rem
  &.part-left,
  &.part-right
    >div
      &:nth-child(1)
        flex 1
      &:nth-child(2)
        flex 2
  &.part-right
    right .5rem
  &.part-left,
  &.part-left2
    left .5rem
    >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>
