<style lang="scss">
	.analog-switcher {
		.active {
			font-weight: bold;
		}
	}
</style>

<template>
	<span class="ship-select-van-popup">
		<span @click.stop="show=true">
			<slot>
				<span>{{curAnalog.iboatName||'未命名'}}</span>
				<span class="margin-lr-xs">-</span>
				<span v-if="isOnline(curAnalog)&&curAnalog.isSail=='1'">在航</span>
				<span v-else-if="isOnline(curAnalog)&&curAnalog.isSail!='1'">停航</span>
				<span v-else>离线</span>
			</slot>
		</span>
		<van-popup v-model:show="show" teleport="#app" position="bottom" :style="{ width: '100%',height:'100%' }"
			class="analog-switcher" @click.stop="stopPoup">
			<van-sticky :offset-top="0">
				<div class="flex padding-tb padding-left padding-right-xs solid-bottom bg-el-color">
					<el-input autofocus placeholder="请输入船名" @focus="show==true" v-model="iboatName">
					</el-input>
					<div class="flex-sub flex align-center justify-between" style="height: 36px;">
						<div class="padding-sm" @click.stop="handleHide">
							<van-icon name="cross" />
						</div>
					</div>
				</div>
			</van-sticky>

			<van-cell-group>
				<template v-for="item in $store.state.data.analogList">
					<van-cell :class="{active:$store.state.data.curAnalogSn==item.sn}" icon="guide-o"
						:title="item.iboatName" is-link :key="item.sn" @click.stop="handleMapMoveTo(item)"
						v-if="item.iboatName.indexOf(iboatName)!=-1&&isOnline(item)&&item.isSail=='1'">
						<template #icon>
							<div class="padding-right-xs text-theme">
								<van-icon name="guide-o" />
							</div>
						</template>
						<template #title>
							<div class="flex align-center text-theme">
								{{ item.iboatName }}
								<span class="padding-lr-xs">-</span>
								<span class="">在航</span>
							</div>
						</template>
					</van-cell>
				</template>
				<template v-for="item in $store.state.data.analogList">
					<van-cell :class="{active:$store.state.data.curAnalogSn==item.sn}" icon="guide-o"
						:title="item.iboatName" is-link :key="item.sn" @click.stop="handleMapMoveTo(item)"
						v-if="item.iboatName.indexOf(iboatName)!=-1&&isOnline(item)&&item.isSail!='1'">
						<template #icon>
							<div class="padding-right-xs">
								<van-icon name="guide-o" />
							</div>
						</template>
						<template #title>
							<div class="flex align-center">
								{{ item.iboatName }}
								<span class="padding-lr-xs">-</span>
								<span>停航</span>
							</div>
						</template>
					</van-cell>
				</template>
				<template v-for="item in $store.state.data.analogList">
					<van-cell :class="{active:$store.state.data.curAnalogSn==item.sn}" icon="guide-o"
						:title="item.iboatName" is-link :key="item.sn" @click.stop="handleMapMoveTo(item)"
						v-if="item.iboatName.indexOf(iboatName)!=-1&&isOffline(item)">
						<template #icon>
							<div class="padding-right-xs text-grey">
								<van-icon name="guide-o" />
							</div>
						</template>
						<template #title>
							<div class="flex align-center text-grey">
								{{ item.iboatName }}
								<span class="padding-lr-xs">-</span>
								<span class="">离线</span>
							</div>
						</template>
					</van-cell>
				</template>
			</van-cell-group>
		</van-popup>
	</span>
</template>

<script setup name="ShipSelectVanPopup">
	import {
		isOffline,
		isOnline,
	} from '@/utils/analog'
	const {
		proxy
	} = getCurrentInstance();

	const iboatName = ref("");
	const show = ref(false);

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

	// 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;

	function handleMapMoveTo(analog) {
		proxy.$store.state.data.curAnalogSn = analog.sn;
		handleHide();
	}

	function handleHide() {
		show.value = false;
	}

	function stopPoup() {}
</script>