<template>
    <view class="airline" :style="style" :class="class">
        <up-image :show-loading="true" :src="getImage" :width="width + 'rpx'" :height="height + 'rpx'" shape="circle" lazyLoad></up-image>
        <text class="txt" v-if="$slots.default">
            <slot></slot>
        </text>
    </view>
</template>

<script setup>
import { computed } from 'vue'
import { airlineMap } from './data'

const ps = defineProps({
    code: {
        type: String,
        default: ''
    },
    width: {
        type: [String, Number],
        default: 40
    },
    height: {
        type: [String, Number],
        default: 40
    },
    style: {
        type: Object,
        default: () => {
            return {}
        }
    },
    class: {
        type: [Array, String],
        default: () => {
            return ''
        }
    }
})
const getImage = computed(() => {
    return '/static/mocp/image/airline/' + (airlineMap[ps.code] || 'hainanhangkong') + '.png'
})
</script>
<style lang="scss" scoped>
.airline {
    display: flex;
    align-items: center;
    :deep( .u-image__image){
        display: block;
    }

    .txt {
        margin-left: 8rpx;
    }
}
</style>
