<template>
    <view class="w-168rpx h-40rpx relative mr-44rpx">
        <view class="absolute left-0 top-0 h-36rpx flex items-start">
            <!-- 金牌茶艺师 -->
            <wd-img :src="levelMap[level].icon" width="36rpx" height="36rpx"></wd-img> 
        </view>
        <view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">{{ levelMap[level].text }}</view>
    </view>
</template>

<script lang="ts" setup name="TeaSpecialistLevel">
	/**
	 * TeaSpecialistLevel 茶艺师等级
	 * @description 用于展示茶艺师等级
     */

	const OSS = inject('OSS')


	defineProps({
        level: {
            type: Number,
            default: ''
        }
    })

    // 茶艺师等级对应的icon和文字（这个数组5-1就是对应的等级）
    const levelMap = {
        5: {
            icon: `${OSS}icon/icon_gold_medal.png`,
            text: '金牌茶艺师'
        },
        4: {
            icon: `${OSS}icon/icon_senior_medal.png`,
            text: '高级茶艺师'
        },
        3: {
            icon: `${OSS}icon/icon_intermediate_medal.png`,
            text: '中级茶艺师'
        },
        2: {
            icon: `${OSS}icon/icon_junior_medal.png`,
            text: '初级茶艺师'
        },
        1: {
            icon: `${OSS}icon/icon_enthusiast_medal.png`,
            text: '茶艺爱好者'
        }
    }
</script>

<script lang="ts">
    export default {}
</script>