<template>
    <c-navigate
        :url="data.url"
        class="sku-item c-inline-block"
        :class="[index % 2 && 'c-gap-left-middle', bottomGap && 'c-gap-bottom']"
    >
        <c-image
            v-if="data.img"
            has-compress
            :src="data.img"
            width="100%"
            height="calc(50vw - 24px)"
            mode="widthFix"
            radius="0.06rem"
            :extra="{column: 6}"
            :hack-white-stroke="false"
            :is-round="false"
        />
        <view class="sku-item-cont">
            <view v-if="data.title" class="c-color-333 font-medium c-line-clamp2 sku-item-title">{{ data.title }}</view>
            <view class="sku-item-price">
                <view v-if="data.price" class="c-color-333">¥{{ data.price }}</view>
                <view
                    v-if="data.original_price"
                    class="c-font-13 c-color-gray sku-item-price-original c-gap-left-small"
                >¥{{ data.original_price }}</view>
            </view>
            <view v-if="data.spreadText" class="sku-item-spread">
                <text class="c-font-small sku-item-spread-text c-gap-right-small">{{ data.spreadText }}</text>
                <text class="sku-item-spread-symbol c-font-13">¥</text>
                <text class="sku-item-spread-money c-font-large">{{ data.spreadMoney }}</text>
            </view>
            <view v-if="data.button && data.button.length" class="sku-item-button">
                <view
                    v-for="(btn, i) in data.button"
                    :key="'btn' + i"
                    class="sku-item-button-item font-medium c-font-small"
                    :class="['sku-item-button-' + btn.type, i % 2 && 'c-gap-left-middle']"
                    @tap.stop="toShare(btn.url)"
                >
                    {{ btn.text }}
                </view>
            </view>
        </view>
    </c-navigate>
</template>

<script>
/**
* @file 服务sku
* @author zhangqian51
* @categories 业务组件
* @tags [component]
*/
import CNavigate from '@baidu/med-ui/components/Navigate/Navigate';
import CImage from '@components/common/image';
import * as Log from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CNavigate,
        CImage
    },
    props: {
        // 业务数据
        data: {
            type: Object,
            default: () => {}
        },
        // 当前顺序
        index: {
            type: Number
        },
        // 是否有外边距
        bottomGap: {
            type: Boolean
        },
        // 日志信息
        log: {
            type: String
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan
        };
    },
    methods: {
        toShare(url) {
            Log.send({
                extra: {
                    type: 'cps-sku-item',
                    level1: this.log
                }
            });
            /**
             * 分享
             *
             * @event toShare
             * @property {string} url 分享链接
             */
            this.$emit('share', url);
        }
    }
};
</script>

<style lang="less" scoped>
.sku-item {
    width: calc(50% - 4px);
    border-radius: 6px;

    &-img {
        width: 100%;
        height: calc(50vw - 24px);
        border-radius: 6px;
    }

    &-title {
        height: .44rem;
    }

    &-cont {
        padding: 0 10px 10px;
    }

    &-price {
        display: flex;

        &-original {
            text-decoration: line-through;
        }
    }

    &-spread {
        color: #ff6050;
        margin-top: -5px;

        &-symbol {
            font-family: Arial-BoldMT;
        }

        &-money {
            font-family: Arial-BoldMT;
        }
    }

    &-button {
        display: flex;
        justify-content: space-between;

        &-item {
            width: 75px;
            border-radius: 14px;
            text-align: center;
        }

        &-link {
            height: 22px;
            background: #faf3f0;
            border: 1px solid #ff6050;
            color: #ff6050;
        }

        &-poster {
            color: #fff;
            height: 24px;
            line-height: 24px;
            background: linear-gradient(125deg, #ff754f 0%, #fb4556 100%);
        }
    }
}

.font-medium {
    font-family: PingFangSC-Medium;
}
</style>
