<template>
    <view 
        class="skuCard__wrapper" 
        @tap="onJump(data.targetUrl)"
    >
        <view class="skuCard__wrapper__img--container">
            <image
                :src="data.headImage"
                class="skuCard__wrapper__img"
            />
        </view>
        <view class="skuCard__wrapper__skuInfo">
            <view class="skuCard__wrapper__skuInfo__title c-line-clamp2 c-font-medium-less">{{ data.title }}</view>
            <view class="skuCard__wrapper__skuInfo__priceInfo">
                <price
                    v-if="data.price"
                    :price="data.price / 100"
                    u-size=".14rem"
                    i-size=".19rem"
                    d-size=".12rem"
                    :p-style="{'color': '#fd503e', 'font-family': 'PingFangSC-Medium'}"
                />
                <view v-if="data.discount" class="skuCard__wrapper__skuInfo__priceInfo__discount c-font-small">
                    ¥{{ data.discount / 100 }}
                </view>
            </view>
            <view class="skuCard__wrapper__skuInfo__button--wrapper">
                <view 
                    class="skuCard__wrapper__skuInfo__button"
                    @tap.stop="onJump(data.btnUrl)"
                >{{ data.btnText }}</view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 复购商品卡片
 * @author fujinghua
 * @categories 业务组件
 * @tags [component]
 */
import {navigate} from '@utils/navigate';
import Price from '../common/Price';

export default {
    name: 'RepurchaseSkuCard',
    config: {
        component: true
    },
    components: {
        Price
    },
    props: {
        data: {
            type: Object,
            default: ()=>({})
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        onJump(url){
            if (!url) return ;

            navigate({
                url,
                log: {
                    page: this.page,
                    type: 'clk',
                    value: 'home_oldgoodlist'
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.skuCard__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap; 
    &__img {
        flex: none;
        width: 100%;
        height: 28.3vw;
        border-radius: 0.09rem;
        &--container {
            width: 100%; 
        }
    }

    &__skuInfo {
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
        &__title {
            margin: 0;
            flex: none;
            color: #1F1F1F;
            letter-spacing: 0;
            font-family: PingFangSC-Regular;
        }
        &__priceInfo {
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
            line-height: 1;
            flex: none;

            &__discount{
                margin-left: 0.05rem;
                color: #E3A200;
                line-height: 1;
                font-family: PingFangSC-Medium;
                text-decoration: line-through;
            }
        }
        &__button {
            @height: 0.28rem;
            padding: 0 0.07rem;
            height: @height;
            background-image: linear-gradient(270deg, #FD5640 41%, #FF681F 100%);
            font-size: 0.14rem;
            color: white;
            line-height: @height;
            text-align: center;
            border-radius: 0.2rem;
            display: inline-block;

            &--wrapper{
                 flex: 1;
                 display: flex;
                 justify-content: flex-start;
                 align-items: center;
            }
        }
    }
}

</style>
