<template>
    <view class="flex">
        <image
            v-if="displayPic"
            class="renderTime"
            :src="EstimatedPic" />
        <text>{{ displayedText }}</text>
    </view>
</template>

<script setup>
import { computed } from 'vue'
import EstimatedPic from '/static/mocp/image/monitor/estimate.png'
import Day from 'mocp/utils/dayjs'
import useFlightSupportStore from 'mocp/store/flight-support'
import { storeToRefs } from 'pinia'

const flightSupportStore = useFlightSupportStore()
const {searchData} = storeToRefs(flightSupportStore)

const ps = defineProps(['item'])
const {etdChn, atdChn, etaChn, ataChn} = ps.item
const displayPic = computed(function() {
    return (searchData.value.isOut === 0 || !atdChn) && (searchData.value.isOut === 1 || !ataChn)
})
const displayedText = computed(function() {
    // console.log(Day(etaChn).format('HH:mm'), Day(ataChn).format('HH:mm'), 'in')
    // console.log(Day(etdChn).format('HH:mm'), Day(atdChn).format('HH:mm'), 'out')
    if (searchData.value.isOut === 0) {
        return ataChn ? Day(ataChn).format('HH:mm') : Day(etaChn).format('HH:mm')
    } else {
        return atdChn ? Day(atdChn).format('HH:mm') : Day(etdChn).format('HH:mm')
    }
})
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
}

.renderTime {
    width: 22rpx;
    height: 22rpx;
    margin-right: 4rpx;
}
</style>