<style lang="scss">

</style>

<template>
	<div class="ShipFeet flex"
		:style="$store.state.app.device == 'desktop'? 'height: calc(100vh - 84px);' : 'height: var(--mobile-hight-with-navbar)'">
		<div class="padding-top-xs" style="width: var(--page-sidebar-width)"
			v-if="$store.state.app.device == 'desktop'">
			<div class="padding-lr-xs padding-bottom-xs">
				<el-input placeholder="请输入船舶名称" clearable prefix-icon="Search" v-model="iboatName" />
			</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-left-xs padding-tb-xs pointer"
						v-if="item.iboatName.indexOf(iboatName)!=-1&&isOnline(item)&&item.isSail=='1'">
						<div class="text-el-primary">
							<svg-icon icon-class="ship" />
							<span class="margin-left-xs">
								<span>{{ item.iboatName }}<span class="padding-lr-xs">-</span>在航</span>(测试)
							</span>
						</div>
					</div>
				</div>
				<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-left-xs padding-tb-xs pointer"
						v-if="item.iboatName.indexOf(iboatName)!=-1&&isOnline(item)&&item.isSail!='1'">
						<div class="text-el-regular">
							<svg-icon icon-class="ship" />
							<span class="margin-left-xs">
								<span>{{ item.iboatName }}<span class="padding-lr-xs">-</span>停航</span>(测试)
							</span>
						</div>
					</div>
				</div>
				<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-left-xs padding-tb-xs pointer"
						v-if="item.iboatName.indexOf(iboatName)!=-1&&isOffline(item)">
						<div class="text-el-secondary">
							<svg-icon icon-class="ship" />
							<span class="margin-left-xs">
								<span>{{ item.iboatName }}<span class="padding-lr-xs">-</span>离线</span>(测试)
							</span>
						</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
		<MapIndex ref="mapIndex" class="flex-sub" v-if="$store.state.data.analogList.length>0" />
	</div>
</template>

<script setup name="ShipFeet">
	import MapIndex from "@/components/Map/index";
	const {
		proxy
	} = getCurrentInstance();

	const iboatName = ref("");




	const isOffline = (analog) =>
		new Date().getTime() - new Date(proxy.parseTime(analog.time)).getTime() >
		proxy.$store.state.data.timeout;

	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["mapIndex"].$refs["mapShipList"].$refs["mapShipListMap"].$refs["mapMap"].moveToShipBySn(analog.sn);
	};
</script>