<template>
    <view
        class="info"
        @tap.stop="onTap"
    >
        <view v-if="column === 1" class="info__c1">
            <view class="info__c1__l">
                <view class="info__c1__l__img">
                    <c-image
                        has-compress
                        :src="info.img"
                        width="100%"
                        height="auto"
                        mode="widthFix"
                        :hack-white-stroke="false"
                        :is-round="false"
                    />
                </view>
            </view>
            <view class="info__c1__r c-gap-inner-left-middle">
                <view>
                    <view class="info__c1__r__t c-line-clamp1 c-font-medium">{{ info.title }}</view>
                    <view class="info__c1__r__p c-font-small c-color-gray">
                        <view class="info__c1__r__p__bg"></view>
                        <view class="info__c1__r__p__normal">日常价<view>¥{{ info.price.storePrice }}</view></view>
                        <view
                            class="info__c1__r__p__now info__c1__r__p__hightc"
                        >
                            <text>券后价</text>
                            <view class="now c-font-sigma">
                                <text class="now__unit c-font-small">¥</text>{{ info.price.nowPrice }}
                            </view>
                        </view>
                        <!-- eslint-disable max-len -->
                        <view class="info__c1__r__p__recovery info__c1__r__p__hightc">即将恢复<view class="c-color-gray">¥{{ info.price.storePrice }}</view></view>
                        <!-- eslint-enable max-len -->
                    </view>
                </view>
                <view class="info__c1__r__b">
                    <view class="info__c1__r__b__l c-font-13">
                        <template v-if="info.price.couponPrice && (info.price.couponPrice * 1) > 0">
                            <text class="text c-font-small">{{ info.btn.leftText }}</text>
                            <text class="unit">¥</text>
                            <text class="price c-font-large">{{ info.price.couponPrice }}</text>
                        </template>
                        <view v-else class="tip c-font-small">优惠进行中</view>
                    </view>
                    <view class="info__c1__r__b__r c-font-normal">{{ info.btn.rightText }}</view>
                </view>
            </view>
        </view>
        <view
            v-else-if="column === 3"
            class="info__c3"
        >
            <view class="info__c3__img">
                <view class="info__c3__img__s">
                    <c-image
                        has-compress
                        :src="info.img"
                        width="100%"
                        height="auto"
                        mode="widthFix"
                        :extra="{column: 3}"
                        :hack-white-stroke="false"
                        :is-round="false"
                    />
                </view>

            </view>
            <view class="info__c3__c">
                <view class="info__c3__c__tit c-line-clamp2 c-gap-top-small">{{ info.title }}</view>
                <view class="info__c3__c__stprice c-font-small">
                    即将恢复¥{{ info.price.storePrice }}
                </view>
                <view class="info__c3__c__btn c-gap-top-small">
                    <view class="info__c3__c__btn__wrap c-font-normal">
                        ¥<text class="info__c3__c__btn__wrap__text c-font-large">{{ info.price.nowPrice }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
/**
 * @file hpv疫苗运营商品展示样式
 * @author wangying51
 * @categories
 * @tags
 */
import CImage from '@components/common/image';
import {navigate} from '@utils/navigate';
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 商品信息
         */
        info: {
            type: Object,
            default: () => ({})
        },
        /**
         * 商品版式，column=3 为一行三个的样式
         */
        column: {
            type: Number,
            default: 1
        },
        /**
         * 日志value前缀
         */
        logPrefix: {
            type: String,
            default: 'default'
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    components: {
        CImage
    },
    data() {
        return {

        };
    },
    methods: {
        onTap() {
            const log = {
                page: this.page,
                type: 'clk',
                value: `${this.logPrefix}_gooditem`,
                ext: {
                    pd: 'act'
                }
            };
            navigate({
                url: this.info.url,
                log
            });
        }
    }
};
</script>
<style lang="less" scoped>
.info {
    &__c1 {
        display: flex;
        background-color: #fff;
        border-radius: .12rem;
        padding: .15rem .13rem;

        &__l {
            border-radius: .1rem;
            overflow: hidden;
            width: 28vw;
            height: 28vw;

            &__img {
                width: 28vw;
                height: 28vw;
            }
        }

        &__r {
            flex: 1;
            width: calc(100% - 28vw);
            box-sizing: border-box;
            margin-top: -.05rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            &__t {
                font-family: PingFangSC-Semibold;
                margin-top: .04rem;
            }

            &__p {
                margin-top: .16rem;
                position: relative;
                text-align: center;

                &__bg {
                    width: 100%;
                    height: 16px;
                    background: url(https://medactivity.cdn.bcebos.com/instock/hpv/foldline.png) no-repeat center center;
                    background-size: auto 100%;
                }

                &__normal {
                    position: absolute;
                    top: -.18rem;
                    left: 0;
                }

                &__now {
                    position: absolute;
                    left: 50%;
                    top: -.11rem;
                    transform: translateX(-50%);

                    .now {
                        font-family: PingFangSC-Semibold;
                        margin-top: .02rem;
                    }
                }

                &__recovery {
                    position: absolute;
                    right: 0;
                    top: -.18rem;
                }

                &__hightc {
                    color: #fd503e;
                }
            }

            &__b {
                width: 100%;
                background: url(https://medactivity.cdn.bcebos.com/instock/hpv/btn-s2.png) no-repeat center right;
                background-size: 100% 100%;
                margin-top: .15rem;
                display: flex;
                justify-content: space-between;
                height: .28rem;
                padding: 0 .12rem 0 .18rem;
                box-sizing: border-box;

                &__l {
                    color: #fff;

                    .text {
                        margin-right: .03rem;
                    }

                    .unit {
                        margin-right: .02rem;
                    }

                    .tip {
                        line-height: .28rem;
                    }
                }

                &__r {
                    color: #fd503e;
                    line-height: .28rem;
                    font-family: PingFangSC-Medium;
                }
            }
        }
    }

    &__c3 {
        width: 100%;
        border-radius: .09rem;
        overflow: hidden;

        &__img {
            padding-top: 100%;
            position: relative;
            overflow: hidden;

            &__s {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        &__c {
            background-color: #fff;
            padding-top: .05rem;

            &__tit {
                color: #1f1f1f;
                margin: 0 0.1rem;
                box-sizing: border-box;
            }

            &__stprice {
                color: #fe443e;
                margin-left: .1rem;
            }

            &__btn {
                box-sizing: border-box;
                padding: 0 .1rem .15rem;
                color: #fff;

                &__wrap {
                    background: url(https://medactivity.cdn.bcebos.com/instock/hpv/btn-s1.png) no-repeat center center;
                    background-size: contain;
                    width: 100%;
                    height: .28rem;
                    line-height: .28rem;
                    box-sizing: border-box;
                    padding-left: .05rem;

                    &__text {
                        margin-left: .02rem;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 320px) {
    .info__c3__c__btn__wrap__text {
        position: relative;
        top: 1px;
    }

    .info__c1__r__p {
        margin-top: .13rem;
    }
}
@media screen and (min-width: 413px) {
    .info__c1__r__b {
        margin-top: .33rem;
    }

    .info__c3__c__btn__wrap {
        padding-left: .08rem;
    }

    .info__c1__r__p {
        margin-top: .18rem;
    }

    .info__c1__r__p__now .now {
        margin-top: .05rem;
    }
}
</style>
