<template>
    <view
        class="flag-view"
        :style="{
            width: width,
            height: height,
            'background-size': backgroundSize,
            'background-image': 'url(' + flagSrc + ')',
        } | imgCompress('background-image', {column: 3})"
    >
        <view
            class="mid-flag-text first"
            :style="{'font-size': fontSize,'line-height': lineHeight,'letter-spacing': letterSpacing}"
        >
            {{ firstLine }}
        </view>
        <view
            class="mid-flag-text"
            :style="{'font-size': fontSize,'line-height': lineHeight,'letter-spacing': letterSpacing}"
        >
            {{ secondLine }}
        </view>
    </view>
</template>

<script>

export default {
    config: {
        component: true
    },
    props: {
        width: {
            type: String,
            default: ''
        },
        height: {
            type: String,
            default: ''
        },
        flagSrc: {
            type: String,
            default: ''
        },
        text: {
            type: String,
            default: ''
        },
        fontSize: {
            type: String,
            default: '12px'
        },
        lineHeight: {
            type: String,
            default: '12px'
        },
        backgroundSize: {
            type: String,
            default: 'cover'
        },
        letterSpacing: {
            type: String,
            default: '0px'
        }

    },
    watch: {
        text: {
            immediate: true,
            handler(val) {
                let arr = val.split(',') || [];
                this.firstLine = arr[0];
                this.secondLine = arr[1];
            }
        }
    },
    data() {
        return {
            firstLine: '',
            secondLine: ''
        };
    }
};
</script>
<style lang="less" scoped>
    .flag-view {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        position: relative;
        flex-shrink: 0;

        .mid-flag-text {
            font-size: 12px;
            color: #fff;
            writing-mode: vertical-lr;
            margin-top: -5px;
            font-weight: bold;
        }

        .first {
            margin-right: 6px;
        }
    }

</style>


