<template>
  <div class="search-port" v-if="funSwitch && loadOk">
    <el-button @click="viewPorts">{{
        viewPort ? $t('message.closeAllPort') : $t('message.allPort')
      }}
    </el-button>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator'
import {allPort} from '@/util/fun-switch'
import storeUtil from "@/util/store";
import ShipFun from "@/util/map/map.js";
import HttpApi from "@/api";

@Component({})
export default class ViewAllPort extends Vue {
  private map: any = storeUtil.getMapInstance()
  private funSwitch = allPort
  private viewPort = true
  private portOptions: any[] = []
  private loadOk = false

  @Watch('$store.state.showPort', {
    deep: true,
    immediate: true
  })
  showChange(data: boolean) {
    this.viewPort = data
  }

  public mounted() {
    if (this.funSwitch) {
      this.getAllPort()
    }
  }

  private viewPorts() {
    this.viewPort = !this.viewPort
    this.$store.commit('setShowPort', this.viewPort);
    (storeUtil.getMapFun() as any).clearallPort();
    (storeUtil.getMapFun() as any).delSelect()
    if (this.viewPort) {
      if (this.portOptions.length > 1000) {
        let one = parseInt(this.portOptions.length / 18 + '')
        let nowZoom = (storeUtil.getMapFun() as any).getZoom()
        this.layoutPort(nowZoom, one)
        ShipFun.addZoomListener(storeUtil.getMapInstance(), (zoom: any) => {
          if (this.viewPort) {
            (storeUtil.getMapFun() as any).clearallPort();
            (storeUtil.getMapFun() as any).delSelect()
            this.layoutPort(zoom, one)
          }
        })
      } else {
        this.portOptions.forEach((port: any) => {
          this.addPortToMap(port, true)
        })
      }
    }
  }

  private addPortToMap(data: any, flag?: boolean) {
    let itemLon = data.cLon / 600000
    let itemLat = data.cLat / 600000
    if (!flag) {
      (storeUtil.getMapFun() as any).setCenter([itemLon, itemLat])
    }
    let itemLonStr = itemLon < 0 ? Math.abs(Math.floor(itemLon * 100) / 100) + 'W' : Math.floor(itemLon * 100) / 100 + 'E'
    let itemLatStr = itemLat < 0 ? Math.abs(Math.floor(itemLat * 100) / 100) + 'S' : Math.floor(itemLat * 100) / 100 + 'N'
    let portInfo: any = {
      id: data.id,
      nameCn: data.nameCn,
      nameEn: data.nameEn,
      code: data.unlocode,
      latLonStr: itemLonStr + ' ' + itemLatStr,
      lon: itemLon,
      lat: itemLat
    };
    (storeUtil.getMapFun() as any).showPort(portInfo)
  }

  private getAllPort() {
    const firstViewPort = [
      "丹东", "大连", "营口", "锦州", "葫芦岛", "秦皇岛", "唐山", "天津", "黄骅", "龙口", "烟台", "威海", "青岛", "日照", "岚山", "连云港", "上海", "宁波", "舟山", "太仓", "常熟", "南通", "张家港", "靖江", "江阴", "常州", "泰州", "扬州", "镇江", "南京", "福州", "厦门", "揭阳", "惠州", "深圳", "盐田", "东莞", "广州", "南沙", "珠海", "茂名", "湛江", "北海", "钦州", "防城港", "海南"
    ]
    const firstViewPortList: any[] = []
    HttpApi.getPortList({}).then((res: any) => {
      if (res) {
        for (let i = 0; i < res.length; i++) {
          firstViewPort.forEach((item: string) => {
            if (res[i].nameCn === item) {
              firstViewPortList.push(res[i])
              res.splice(i, 1);
              i--
            }
          })
        }
        this.portOptions = []
        firstViewPortList.forEach((port: any) => {
          res.unshift(port)
        })
        res.forEach((port: any) => {
          // port.name = this.getName(port)
          this.portOptions.push(port)
        })
        this.loadOk = true
        this.viewPorts()
      }
    })
  }

  private layoutPort(zoom: number, one: number) {
    let endIndex = zoom * one > this.portOptions.length ? this.portOptions.length : zoom * one

    if (zoom >= 16) {
      endIndex = this.portOptions.length
    } else if (zoom < 7) {
      endIndex = this.portOptions.length * 0.02 * zoom
    }
    this.portOptions.slice(0, endIndex).forEach((port: any) => {
      this.addPortToMap(port, true)
    })
  }
}
</script>

<style lang="scss" scoped>
.search-port {
  position: absolute;
  z-index: 2;
  left: 1.25rem;
  top: 1.25rem;
  display: flex;
  align-items: center;

  .el-select {
    margin-right: 1.25rem;
    height: 2.5rem !important;
  }

  .el-button {
    height: 2.5rem !important;
  }
}
</style>
