<template>
    <view class="account-card">
        <view 
            class="account-card-item"
            :style="{
                'border-bottom-left-radius': card.extInfo && 'unset',
                'border-bottom-right-radius': card.extInfo && 'unset',
            }"
        >
            <view class="info">
                <view v-if="card.tag" class="info__tag c-color-mall">
                    {{ card.tag }}
                </view>
                <view class="info__price c-color-mall">
                    <text class="yuan">¥</text>
                    <text
                        :style="{
                            'font-size': priceFontSize,
                        }"
                    >{{ price }}</text>
                </view>
                <view class="info__desc">
                    <view class="info__desc__title c-color-mall c-line-clamp1">
                        {{ card.text }}
                    </view>
                    <view class="info__desc__intro c-color-mall c-line-clamp1">
                        {{ card.desc }}
                    </view>
                </view>
            </view>
            <view class="opt">
                <view class="opt__line"/>
                <view class="opt__top-cic"/>
                <view v-if="!card.extInfo" class="opt__bottom-cic"/>
                <!-- <view v-if="card.recommend" class="opt__rec-img"/> -->
                <!-- <c-checkbox
                    checked-color="#fd503e"
                    radio
                    size="21px"
                    :checked="checked"
                /> -->
                下单即可使用
            </view>
        </view>
        <view v-if="card.extInfo" class="ext-info">
            {{ card.extInfo }}
        </view>
    </view>
</template>

<script>
/**
 * @file 选择优惠券item
 * @author hanwensheng@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
    },
    props: {
        /* 卡券数据 */
        card: {
            type: Object,
            required: true,
            default(){
                return {};
            }
        },
    },
    computed: {
        price(){
            const card = this.card || {};
            if (card.price) {
                return card.price / 100 + '';
            }
            return '0';
        },
        priceFontSize(){
            const size = this.price.length;
            if (size <= 3){
                return '.33rem';
            } 
            if (size === 4){
                return '.27rem';
            } 
            return '.22rem';
        }
    },
    data() {
        return {
        };
    },
    methods: {
    }
};
</script>

<style lang="less" scoped>
.account-card{
    &-item{
        font-family: PingFangSC-Medium;
        background: #FFF1F0;
        border-radius: .09rem;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        .info{
            flex: 1;
            padding: .26rem 0;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            overflow-x: hidden;
            position: relative;

            &__tag{
                position: absolute;
                z-index: 2;
                left: 0;
                top: 0;
                width: .833333rem;
                height: .22rem;
                text-align: center;
                background: rgba(253,80,62,.16);
                border-radius: 0 0 .09rem 0;
                font-size: .12rem;
                line-height: .22rem;
            }
            &__price{
                flex: 0 0 .97rem;
                font-size: .33rem;
                line-height: 1;
                text-align: left;
                padding-left: .12rem;
                box-sizing: border-box;
                .unit{
                    position: relative;
                    top: -0.01rem;
                    margin-left: .02rem;
                    font-size: .16rem;
                }
                .yuan{
                    position: relative;
                    top: -0.01rem;
                    margin-right: .02rem;
                    font-size: .16rem;
                }
            }

            &__desc{
                flex: 1;
                overflow-x: hidden;
                &__title{
                    font-size: .16rem;
                    letter-spacing: 0;
                    line-height: 1;
                    margin-bottom: .09rem;
                }
                &__intro{
                    font-family: PingFangSC-Regular;
                    font-size: .12rem;
                    line-height: 1;
                }
            }
        }
        .opt{
            position: relative;
            flex: 0 0 1.04rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .14rem;
            font-family: PingFangSC-Semibold;
            color: rgba(253,80,62,.6);
            &__line{
                z-index: 1;
                position: absolute;
                left: 0;
                top: 0;
                width: 0;
                height: 100%;
                border: 1px dashed rgba(227,46,27,.3);
                transform: scaleX(0.333);
            }
            &__top-cic{
                z-index: 2;
                position: absolute;
                left: -0.035rem;
                top: -0.035rem;
                width: .07rem;
                height: .07rem;
                border-radius: 100%;
                background: #fff;
            }
            &__bottom-cic{
                z-index: 2;
                position: absolute;
                left: -0.035rem;
                bottom: -0.035rem;
                width: .07rem;
                height: .07rem;
                border-radius: 100%;
                background: #fff;
            }
            &__rec-img{
                position: absolute;
                right: -0.09rem;
                bottom: -0.09rem;
                width: .6rem;
                height: .6rem;
                background-size: 100% 100%;
                background-image: url(https://med-drug.cdn.bcebos.com/getted.png);
            }
        }
    }
    .ext-info{
        background: #FFF9F9;
        padding: .06rem .17rem;
        font-family: PingFangSC-Regular;
        font-size: .12rem;
        line-height: .18rem;
        color: #858585;
        letter-spacing: 0;
        border-bottom-left-radius: .09rem;
        border-bottom-right-radius: .09rem;
    }
}
</style>
