<template>
    <div class="content">
        请选择航线:<br>
        <div class="item" v-for="(item, index) in city" :key="index">
            {{ index + 1 }}.<Abutton @click="UserRunMap(item.cityId)">{{ item.cityName }}({{ item.distance }}海里)</Abutton>
        </div>
        <span v-if="city.length == 0">
            暂无海图.
        </span>
    </div>
    <div class="content">
        【
        <span v-for="item in area">
            <Acheak @click="ChangeCity(item.cityId)" :on-value="cityId.toString()" :on-cheak="item.cityId.toString()">
                {{ item.cityName }}</Acheak>
        </span>
        】
    </div>
</template>
<script setup lang="ts">

definePageMeta({
    layout: layout.default,
    middleware: 'page-loading'
})
const area = ref<Array<any>>([]);
const city = ref<Array<any>>([]);;
const cityId = ref(0);
onMounted(async () => {
    try {
        await BindData();
    }
    finally {
        PageLoading.Close();
    }
})



const BindData = async (): Promise<void> => {
    let npc = LocalStorageHelper.GetOnNpc();
    let result = await MapService.GetCityData(Number(npc), cityId.value);
    if (result.code == 0) {
        area.value = result.data.area;
        city.value = result.data.city;
        if (cityId.value == 0) {
            cityId.value = result.data.cityId;
        }        
    }
    else {
        MessageExtend.ShowDialogEvent("提示", result.msg, () => {
            PageExtend.Redirect("/map");
        });
    }
};

const ChangeCity = async (_cityId: number) => {
    cityId.value = _cityId;
    await BindData();
}

const UserRunMap = async (_cityId: number) => {
    MessageExtend.LoadingToast("航行准备中...");
    let npc = LocalStorageHelper.GetOnNpc();
    let result = await MapService.UserRunMap(Number(npc), _cityId);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        PageExtend.RedirectTo("/map/runing");
    }
    else {
        MessageExtend.ShowToast(result.msg);
    }

}
</script>