<template>
    <!-- 航班号+航空图标 -->
    <image
        :style="{visibility: airlinePic ? 'visible' : 'hidden'}"
        class="flight-no-image"
        :src="airlinePic || HnaPic"
        mode="widthFix" />
    <text>{{ ps.flightNo }}</text>
</template>

<script setup>
import { computed } from 'vue'
import HnaPic from 'mocpStatic/image/monitor/hna.png'
import { airlinePicMapping } from './components/airlinePicMapping'

const ps = defineProps(['flightNo', 'airline'])
const airlinePic = computed(function() {
    return airlinePicMapping[ps.airline]
})
</script>
<style lang="scss" scoped>
.flight-no-image {
    width: 22rpx;
    height: 22rpx;
    margin-right: 6rpx;
}
</style>
