<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-blue text-sm" style="position: absolute;left: 0.5em;top: 0.5em;min-width: 200px;">
      <div class="bg-el-color-primary padding-sm padding-tb-xs text-df flex justify-between align-center text-white">
        <div class="text-bold pointer" @click="hanldeMoveToCurAnalog">
          {{analog["iboatName"]}}
        </div>
        <div class="pointer">
          <el-icon @click="showShipInfo = true" v-show="!showShipInfo">
            <FullScreen />
          </el-icon>
          <el-icon @click="showShipInfo = false" v-show="showShipInfo">
            <Minus />
          </el-icon>
        </div>
      </div>
      <div class="padding-sm bg-white" v-show="showShipInfo">
        <div class=""><span class="text-el-primary">经度：</span>{{duToGpsDM(analog["0a4"],'E')}}</div>
        <div class=""><span class="text-el-primary">纬度：</span>{{duToGpsDM(analog["0a5"],'N')}}</div>
        <div class=""><span class="text-el-primary">航速：</span>{{analog["0a9"]}} kn</div>
        <!-- <div class=""><span class="text-el-primary">吃水：</span>{{analog.draught}} m</div> -->
        <div class=""><span class="text-el-primary">时间：</span>{{analog["time"]}}</div>
        <!-- <div class=""><el-link class="text-el-primary pointer" @click="handleOpenShipHistoricalTrack">历史轨迹>></el-link></div> -->
      </div>
    </div>
  </div>
</template>

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

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

const showShipInfo = ref(true);
const analog = computed(() => {
  return {
    "0a4": getCurrencyConfigByMid("0a4"), // 经度
    "0a5": getCurrencyConfigByMid("0a5"), // 纬度
    "0a9": getCurrencyConfigByMid("0a9"), // 对地航速
	"iboatName":  getCurrencyConfigByMid("iboatName"),
	"time": getCurrencyConfigByMid("time"),
  };
});

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

const hanldeMoveToCurAnalog = () => {
  console.log(proxy.$refs["mapShipListMap"].$refs["mapMap"])
  proxy.$refs["mapShipListMap"].$refs["mapMap"].moveToShipBySn(
    proxy.$store.state.data.curAnalogSn
  );
};
</script>