<template>
  <div class="bg-el-color" style="position: relative;height: 100%;width: 100%;">
	<MapShipListMap ref="mapShipListMap" :style="$store.state.settings.sideTheme == 'theme-dark'? 'opacity: .8;' : ''" />
	<div class="bg-el-color text-xs" style="position: absolute;left: 0.1em;top: 0.1em;" v-if="data == 'showNew'">
	  <div class="bg-el-color-primary padding-lr-sm padding-tb-xs text-white text-sm text-bold text-center">船舶列表</div>
	  <el-scrollbar>
	  	<div class="list-item" :class="{active:$store.state.data.curAnalogSn==item.sn}"
	  		v-for="(item) in $store.state.data.analogList" :key="item.sn" @click="handleAnalogCilck(item)">
	  		<div class="flex align-center padding-lr-sm padding-xs pointer">
	  			<div>
	  				<!-- <svg-icon icon-class="ship" /> -->
	  				<span class="margin-left-xs">
	  					<span>{{ item.iboatName }}<span class="padding-lr-xs">-</span>
						<span v-if="item.isSail == '1'" style="color: #837afa;">在航</span>
						<span v-else-if="item.isSail == '2'" style="color: #54C78D;">停泊</span>
						<span v-else-if="item.isSail == '3'" style="color: #C3C754;">滞留</span>
						<span v-else style="color: #C75454;">维修</span>
	  				</span></span>
	  			</div>
	  		</div>
	  	</div>
	  </el-scrollbar>
	</div>
	<div class="bg-el-color text-xs" style="position: absolute;right: 0.1em;top: 0.1em;max-width: 300px;">
	  <div class="bg-el-color-primary padding-lr-sm padding-tb-xs text-white text-sm">
	    <div class="text-bold pointer" @click="hanldeMoveToCurAnalog">
	      {{curAnalog["iboatName"]}}
	    </div>
	  </div>
	  <div class="grid col-2 padding-lr-sm padding-tb-xs">
	    <div><span class="text-bold">{{analog["0a4"]['name']}}：</span>{{duToGpsDM(analog["0a4"].value,'E')}}</div>
		<div><span class="text-bold margin-left-sm">出发地：</span>福州</div>
	    <div><span class="text-bold">{{analog["0a5"]['name']}}：</span>{{duToGpsDM(analog["0a5"].value,'N')}}</div>
		<div><span class="text-bold margin-left-sm">目的地：</span>广州</div>
		<div><span class="text-bold">航速：</span>{{analog["0a9"].value}} kn</div>
	    <div><span class="text-bold margin-left-sm">历史轨迹：</span><el-link class="text-blue pointer" @click="handleOpenShipHistoricalTrack">查看</el-link></div>
		<div><span class="text-bold">航向：</span>{{analog["0aA"].value}} °</div>
	    <!-- <div><span class="text-bold">{{analog["0a9"]['name']}}：</span>{{analog["0a9"].value}} kn</div>
	    <div><span class="text-bold">{{analog["0aA"]['name']}}：</span>{{analog["0aA"].value}} °</div> -->
	    <div><span class="text-bold margin-left-sm">时间：</span><span>{{curAnalog["time"]}}</span></div>
	  </div>
	</div>
  </div>
</template>

<script setup>
import MapShipListMap from "@/components/Map/ShipList/map";
import { duToGpsDM } from "@/utils/gpsToDu";
import { getCurrencyConfigByMid } from "@/utils/index";

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
	data: {
		type: String,
		default: ""
	}
});
const { data } = toRefs(props);

const showShipInfo = ref(true);
const curAnalog = computed(
  () =>
    proxy.$store.state.data.analogList.find(
      (item) => item.sn == proxy.$store.state.data.curAnalogSn
    ) || {}
);

const analog = computed(() => {
  return {
    "0a4": getCurrencyConfigByMid("0a4"), // 经度
    "0a5": getCurrencyConfigByMid("0a5"), // 纬度
    "0a9": getCurrencyConfigByMid("0a9"), // 对地航速
    "0aA": getCurrencyConfigByMid("0aA"), // 对地航向/船艏相
  };
});

const handleOpenShipHistoricalTrack = () => {
  emit("handleOpenShipHistoricalTrack");
};

const hanldeMoveToCurAnalog = () => {
  // console.log(proxy.$refs["mapShipListMap"].$refs["mapMap"])
  proxy.$refs["mapShipListMap"].$refs["mapMap"].moveToShipBySn(
    proxy.$store.state.data.curAnalogSn
  );
};
const isOnline = (analog) =>
		new Date().getTime() - new Date(proxy.parseTime(analog.time)).getTime() <=
		proxy.$store.state.data.timeout;
const handleAnalogCilck = (analog) => {
		proxy.$store.state.data.curAnalogSn = analog.sn;
		proxy.$refs["mapShipListMap"].$refs["mapMap"].moveToShipBySn(analog.sn);
	};
</script>