<template>
    <!-- 航班号+航空图标 -->
    <image
        :style="{
            visibility: airlinePic ? 'visible' : 'hidden',
            ...ps.style
        }"
        :src="airlinePic"
        mode="widthFix" />
    <text v-if="ps.flightNo">{{ 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({
    airline: {
        type: String,
        default: HnaPic
    },
    flightNo: {
        type: [String, Number],
        default: ''
    },
    style: {
        type: Object,
        default: () => {
            return {
                'width': '22rpx',
                'height': '22rpx',
                'marginRight': '6rpx'
            }
        }
    }
})

const airlinePic = computed(() => airlinePicMapping[ps.airline])
</script>
<style lang="scss" scoped></style>
