<template>
    <view class="c-gap-bottom pcr-chongyang-wrap" @tap.stop="onTap(card)">
        <view
            class="pcr-chongyang-item"
            :style="{background: cardStyle.bgColor}"
        >
            <image
                :src="card.img"
                :style="{
                    height: '33.4vw',
                    width: '33.4vw',
                    minWidth: '33.4vw',
                    borderRadius: '8px',
                }"
                lazy-load
            />
            <view class="c-gap-inner-left pcr-chongyang-cont-right">
                <view class="c-font-normal c-line-clamp2 c-color-333 cl-bold pcr-chongyang-item-title" :style="{marginBottom: 0}">
                    <text v-if="card.hospClass" class="pcr-chongyang-label c-gap-right-small">{{ card.hospClass }}</text>
                    <text>{{ card.title }}</text>
                </view>
                <view v-if="card.tag" class="pcr-chongyang-tags">
                    <view class="c-gap-right-small pcr-chongyang-tag c-line-clamp1">{{ card.tag }}</view>
                </view>
                <view class="c-font-13 c-color-gray pcr-chongyang-price" :style="{lineHeight: '13px', marginTop: card.tag ? '7px' : '4px'}">
                    <text>市场价：</text>
                    <text :style="{'text-decoration': 'line-through'}">￥{{ card.delPrice }}</text>
                </view>
                <view class="pcr-chongyang-btn" :style="{marginTop: !card.tag && '30px'}">
                    <view class="btn-left">
                        <view class="pcr-chongyang-btn-tag" :style="{color: cardStyle.priceColor}">
                            <text :style="{position: 'relative', left: '-2px'}">限时价</text>
                        </view>
                        <view class="pcr-chongyang-btn-price pcr-chongyang-btn-price-one" :style="{color: cardStyle.priceColor}">
                            <text class="c-font-13">￥</text>
                            <text>{{ (Math.floor(card.price)) }}</text>
                        </view>
                    </view>
                    <view class="btn-right" :class="{'btn-right-text': true}">
                        <template v-if="card.couponPrice">
                            <view class="pcr-chongyang-btn-tag-right" :style="{color: cardStyle.priceColor}">
                                <text :style="{position: 'relative', left: '-2px'}">券后价</text>
                            </view>
                            <view class="pcr-chongyang-btn-price pcr-chongyang-btn-price-one" :style="{color: cardStyle.priceColor}">
                                <text class="c-font-13">￥</text>
                                <text>{{ (Math.floor(card.couponPrice)) }}</text>
                            </view>
                        </template>
                        <view v-else>立即抢购</view>
                    </view>
                </view>
            </view>
        </view>

        <view v-if="card.hospName" class="c-row pcr-chongyang-bottom c-font-13">
            <view class="c-span11 c-line-clamp1">
                <text class="m-icon m-icon-dianpu c-font-13 c-gap-right-small"/>
                <text>{{ card.hospName }}</text>
            </view>
            <view class="c-span1 icon-cont">
                <c-icon
                    name="right"
                    font-size="13px"
                    class="c-gap-right-small"
                />
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 体检卡片
* @author chenshuo04
* @categories 体检卡片
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '../../../utils/navigate';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon,
    },
    props: {
        /* 卡片内容 */
        card: {
            type:Object,
            default: () => {}
        },
        /* 卡片样式 */
        cardStyle: {
            type: Object,
            default: () => {
                return {
                    btnBg: 'https://medactivity.cdn.bcebos.com/vacc%2Fimg%2Fchongyang-btn.png',
                    priceColor: '#ffffff',
                    textColor: '#AA1B23',
                    bgColor: '#FFF7EE'
                };
            }
        }
    },
    data() {
        const height = this.styleType === 'one-column' ? 'calc(104vw + 40px)' : 'calc(84vw + 272px)';
        return {
            swiperHeight: height,
            swiperWidth: '100%',
            swiperIndex: 0,
            dataList: [],
            showSwiper: true,
            tabIndex: 0
        };
    },
    methods: {
        onTap(data) {
            navigate({url: data.path});
        },
    }
};
</script>

<style lang="less" scoped>
.pcr-chongyang {
    &-wrap {
        border-radius: 8px;
        background: #FFF7EE;
        overflow: hidden;
    }
    &-item {
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        padding: 10px 10px 5px 10px;
        overflow: hidden;
        // height: 35vw;
        width: 100%;
        &-title {
            font-size: 15px;
            line-height: 21px;
        }
    }
    &-label {
        position: relative;
        top: -1px;
        border-radius: 5px;
        padding: 0 5px;
        font-size: 10px;
        line-height: 20px;
        color: #fff;
        background: linear-gradient(134deg, #FF464D 0%, #FF755B 100%);
    }
    &-btn {
        margin-top: 10px;
        height: 38px;
        width: 180px;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-size: 100% 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-image: url(https://med-fe.cdn.bcebos.com/brand%2Fpcr-btn.png);
        // position: absolute;
        // bottom: 10px;
        .btn-right, .btn-left {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
        }
        .btn-right-text {
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &-tag {
            position: absolute;
            top: -2px;
            left: -0.5px;
            font-size: 12px;
            color: #fff;
            writing-mode: vertical-lr;
            // opacity: 0.8;
            transform: scale(0.8);
            // zoom: 0.8;
            height: 38px;
            line-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url(https://med-fe.cdn.bcebos.com/brand%2Fpcr-nian.png?v=1);
            background-size: 100% 100%;
            background-position: 0 0;
            background-repeat: no-repeat;
            padding: 2px 3px;
            word-break: keep-all;
        }
        &-tag-right {
            position: absolute;
            // top: -2px;
            left: 1px;
            font-size: 12px;
            color: #fff;
            writing-mode: vertical-lr;
            // opacity: 0.8;
            // transform: scale(0.8);
            zoom: 0.8;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url(https://med-fe.cdn.bcebos.com/brand%2Fpcr-quan.png?v=1);
            background-size: 100% 100%;
            background-position: 0 0;
            background-repeat: no-repeat;
            padding: 2px 3px;
        }
        &-price {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            width: 100%;
            align-items: center;
            display: flex;
            justify-content: left;
            &-one {
                padding-left: 28px;
                box-sizing: border-box;
            }
        }
        &-text {
            font-size: 14px;
            line-height: 24px;
            color: #fff;
            width: 50%;
            text-align: center;
        }
    }
    &-tags {
        margin-top: 5px;
        line-height: 14px;
    }
    &-tag {
        display: inline-block;
        padding: 1px 5px;
        color: #FF5A74;
        font-size: 10px;
        line-height: 14px;
        border-radius: 24px;
        border: 1px solid #FF5A74;
    }
    &-price {
        margin-top: 4px;
    }
    &-cont-right {
        width: calc(100% - 33.4vw);
        // height: 35vw;
        position: relative;
        box-sizing: border-box;
    }
    &-bottom {
        border-top: 1px solid #f1f1f1;
        padding: 5px 0 5px 8px;
        color: #999;
        // background: #FFFBF6;
        .icon-cont {
            text-align: right;
        }
    }
}
.cl-bold {
    font-family: 'PingFang-SC-Medium';
}
@media only screen and (max-width: 400px) {
    .pcr-chongyang {
        &-btn {
            transform: scale(0.9);
            transform-origin: 0% 100%;
        }
    }
}
@media only screen and (max-width: 375px) {
    .pcr-chongyang {
        &-item-title {
            font-size: 13px;
        }
        &-btn {
            bottom: 5px;
            transform: scale(0.8);
            transform-origin: 0% 100%;
        }
        &-tags {
            margin-top: 3px;
        }
        &-cont-right {
            padding-top: 2px;
        }
    }
}
@media only screen and (max-width: 330px) {
    .pcr-chongyang {
        &-item-title {
            font-size: 13px;
            line-height: 19px;
        }
        &-btn {
            // height: 25px;
            // width: 120px;
            &-tag {

            }
            transform: scale(0.7);
            transform-origin: 0% 100%;
        }
    }
}
.cl-color-red {
    color: #EA252E;
}
</style>
