<template>
  <div class="mobile-index flex flex-direction" style="height:calc(100vh - 50px)" v-loading="loading">
    <van-nav-bar fixed :title="curAnalog.iboatName||'首页'">
      <template #title>
        <ShipSelectVanPopup />
      </template>
      <template #left>
        <ShipSelectVanPopup>
          <van-icon name="search" size="18" />
        </ShipSelectVanPopup>
      </template>
      <template #right>
        <van-icon name="replay" size="18" @click="handleReload" />
      </template>
    </van-nav-bar>
    <div style="height:46px"></div>
    <MapIndex ref="mapIndex" />
  </div>
</template>


<script setup name="tab1">
import MapIndex from "@/components/Map/index";
import ShipSelectVanPopup from "@/views/mobile/components/popup/shipSelect";
import { getAnalog } from "@/api/ship/ship";
const { proxy } = getCurrentInstance();
const loading = ref(true);

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

clearInterval(proxy.$store.state.data.analogIntervalTimer);

handleGetAnalog();
proxy.$store.state.data.analogIntervalTimer = setInterval(() => {
  handleGetAnalog();
}, proxy.$store.state.data.duration);

function handleGetAnalog() {
  getAnalog().then((response) => {
    proxy.$store.state.data.analogList = response.data;
    if (response.data.length == 0) {
      proxy.$modal.error("当前账号未分配船只");
      return;
    }
    if (proxy.$store.state.data.curAnalogSn == null) {
      proxy.$store.state.data.curAnalogSn =
        proxy.$store.state.data.analogList[0].sn;
    }
    loading.value = false;
  });
}

onUnmounted(() => {
  clearInterval(proxy.$store.state.data.analogIntervalTimer);
  proxy.$store.state.data.analogIntervalTimer = null;
});

function handleReload() {
  loading.value = true;
  proxy.$store.state.data.analogList = [];
  handleGetAnalog();
}
</script>
