<template>
  <el-menu-item :index="menu.index" @click="openMenu(menu)">
    <template slot="title">
      <div class="menu-item-box-c flex-column-center">
        <div
          v-if="menu.title !== '预计到港' && menu.title !== '到港查询' && menu.title !== '离港查询' && menu.title !== '在泊统计' "
          class="menu-icon-c">
          <img :src="pgName + menu.icon" alt="">
        </div>
        <div v-else style="width: 4px;height: 4px;background: #FFFFFF; border-radius: 50%;margin-right: 10px"></div>
        <div class="menu-title-c" slot="title">
          <span>{{ language === 'zh' ? menu.title : menu.nameEn || menu.title }}</span>
        </div>
      </div>
    </template>
  </el-menu-item>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import storeUtil from '@/util/store'
import DialogUtil from "@/util/new-dialog";
import {DialogType} from "@/util/temp-interface";
import SearchListTemp from "@/views/new-dialog/SearchListTemp.vue";
import TrackRecordLogTemp from "@/views/new-dialog/TrackRecordLogTemp.vue";
import DataAnalysisTemp from "@/views/new-dialog/DataAnalysisTemp.vue";
import MapToolTemp from "@/views/new-dialog/MapToolTemp.vue";
import ShipRanksTemp from "@/views/new-dialog/ShipRanksTemp.vue";
import WeatherTemp from "@/views/new-dialog/WeatherTemp.vue";
import RouteQueryTemp from "@/views/new-dialog/RouteQueryTemp.vue";
import ContainerQueryTemp from "@/views/new-dialog/ContainerQueryTemp.vue";
import ArriveLeaveQueryTemp from "@/views/new-dialog/ArriveLeaveQueryTemp.vue";
import DepartureInquiryTemp from "@/views/new-dialog/DepartureInquiryTemp.vue";
import ExpectedArrivalTemp from "@/views/new-dialog/ExpectedArrivalTemp.vue";
import AreaListTemp from '@/views/new-dialog/AreaListTemp.vue';
import NumberOfBerthsTemp from "@/views/new-dialog/NumberOfBerthsTemp.vue";
import NotanTemp from "@/views/new-dialog/NotanTemp.vue";

@Component({
  props: {
    menu: {
      type: Object,
      required: true
    }
  }
})
export default class MenuItem extends Vue {
  private pgName = window.localStorage.getItem('pgName') ? '/' + window.localStorage.getItem('pgName') : location.origin
  private language = window.localStorage.getItem('language')

  private openMenu(menu: any) {
    const param: any = {
      dialogData: {
        title: '',
        vueName: menu.type
      },
      infoData: {},
      show: true
    }
    if (menu.type !== DialogType.AREA_LIST) {
      // (storeUtil.getMapFun() as any).clearallship();
      // (storeUtil.getMapFun() as any).clearArea()
    }
    let template: any
    switch (menu.type) {
      case DialogType.SEARCH_LIST: {
        template = SearchListTemp
        param.infoData = {}
        break
      }
      case DialogType.TRACK_RECORD_LOG: {
        template = TrackRecordLogTemp
        param.infoData = {
          isHistory: true
        }
        break
      }
      case DialogType.DATA_ANALYSIS: {
        template = DataAnalysisTemp
        param.infoData = {}
        break
      }
      case DialogType.MAP_TOOL: {
        template = MapToolTemp
        param.infoData = {}
        break
      }
      case DialogType.SHIP_RANKS: {
        template = ShipRanksTemp
        param.infoData = {}
        break
      }
      case DialogType.WEATHER: {
        template = WeatherTemp
        param.infoData = {}
        break
      }
      case DialogType.ROUTE_QUERY: {
        template = RouteQueryTemp
        param.infoData = {}
        break
      }
      case DialogType.CONTAINER_QUERY: {
        template = ContainerQueryTemp
        param.infoData = {}
        break
      }
      case DialogType.ARRIVE_LEAVE_QUERY: {
        template = ArriveLeaveQueryTemp
        param.infoData = {
          type: 'arrive'
        }
        break
      }
      case DialogType.DEPARTURE_INQUIRY: {
        template = DepartureInquiryTemp
        param.infoData = {
          type: 'leave'
        }
        break
      }
      case DialogType.EXPECTED_ARRIVAL: {
        template = ExpectedArrivalTemp
        param.infoData = {
          type: 'yj'
        }
        break
      }
      case DialogType.AREA_LIST: {
        template = AreaListTemp
        param.infoData = {
          data: menu
        }
        break
      }
      case DialogType.NUMBER_OF_BERTHS: {
        template = NumberOfBerthsTemp
        param.infoData = {
          data: ''
        }
        break
      }
      case DialogType.NOTAN: {
        template = NotanTemp
        param.infoData = {
          data: ''
        }
        break
      }
    }
    DialogUtil.showDialog(template, menu.type, param)
  }

  public mounted() {
    window.addEventListener("setItemEvent", (e: any) => {
      if (e.key === 'language') {
        this.language = e.newValue
      }
    });
  }
}
</script>

<style scoped lang="scss">
.el-menu .is-active {
  background: red !important;
  color: #FFFFFF;
}

</style>
