<template>
    <view class="globalDetailsModel detailsBasicInfo">
        <view class="title">{{ getDetailsCurrentMsg.flightNo }}</view>
        <view class="basicInfoDep flex flex-between">
            <text>{{ baseStore.getTerminalObject[getDetailsCurrentMsg.depStn] }}</text>
            <text>{{ baseStore.getTerminalObject[getDetailsCurrentMsg.arrStn] }}</text>
        </view>

        <view class="basicInfoTime flex flex-between">
            <text>{{ atdChnValue }}</text>
            <image class="timeFlightIcon" :src="FlightImage" />
            <text>{{ ataChnValue }}</text>
        </view>

        <view class="basicInfoTimePlan flex flex-between">
            <view>
                <text>计划</text>
                <text class="MM">{{ timeStampFormat(getDetailsCurrentMsg.stdChn, {format: 'MM/DD'}) }}</text>
                <text>{{ timeStampFormat(getDetailsCurrentMsg.stdChn, {format: 'HH:mm'}) }}</text>
            </view>
            <view>
                <text>{{ timeStampFormat(getDetailsCurrentMsg.staChn, {format: 'MM/DD'}) }}</text>
                <text class="MM">{{ timeStampFormat(getDetailsCurrentMsg.staChn, {format: 'HH:mm'}) }}</text>
                <text>计划</text>
            </view>
        </view>
    </view>

    <DetailsFollowCrewItem title="跟机人员" :list="getDetailsCurrentMsg.mfollowAcLists" />
</template>

<script setup>
import { computed, ref } from 'vue'
import { timeStampFormat } from 'mocp/utils/tool'
import FlightImage from 'mocpStatic/image/monitor/flight-pane.png'
import DetailsFollowCrewItem from './DetailsFollowCrewItem.vue'
import useFlightSupportStore from 'mocp/store/flight-support'
import { storeToRefs } from 'pinia'
import useBaseStore from 'mocp/store/base'

const baseStore = useBaseStore()
const flightSupportStore = useFlightSupportStore()
const {getDetailsCurrentMsg} = storeToRefs(flightSupportStore)

const atdChnValue = computed(() => {
    const time = getDetailsCurrentMsg.value?.atdChn || getDetailsCurrentMsg.value.etdChn
    return time ? timeStampFormat(time, {format: 'HH:mm'}) : '--:--'
})

const ataChnValue = computed(() => {
    const time = getDetailsCurrentMsg.value?.ataChn || getDetailsCurrentMsg.value.etaChn
    return time ? timeStampFormat(time, {format: 'HH:mm'}) : '--:--'
})


</script>
<style lang="scss" scoped>
@import '../constants/details';
</style>
