<template>
    <view class="order-product">
        <image class="cover" :src="productInfo.productImage" mode="widthFix"></image>
        <view class="content">
            <view class="name" v-text="productInfo.name"></view>
            <view class="unit">规格：{{ productInfo.productUnit }}</view>
            <view class="tags">
                <!-- 促销 自营 -->
                <view class="tag cx" v-if="userId === productInfo.heUserId">促销</view>
                <view class="tag cx" v-else>自营</view>
                <!-- 拼团价  活动价  限时特价  券后价   -->
                <view class="tag pt" v-if="isCollagePrice">拼团价</view>
                <view class="tag hd" v-else-if="isActivityPrice">活动价</view>
                <view class="tag other" v-else-if="isDiscountPrice">限时特价</view>
                <!-- <view class="tag other" v-else-if="productInfo.couponStatus > 1">{{ productInfo.couponInfo }}</view>
                <view class="tag other" v-else-if="productInfo.couponStatus > 0">券后价</view> -->
            </view>
            <view class="price">￥{{ productInfo.price | priceFormat }}</view>
            <view class="buy-num" v-if="numType === 1">×{{ productInfo.num }}</view>
            <view class="buy-num" v-if="numType === 2">
                <cm-number-box v-model="productInfo.num" @change="onCountChange" :max="limitedNum"></cm-number-box>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'order-product',
    props: {
        productInfo: {
            type: Object,
            default: () => {}
        },
        tagsList: {
            type: Array,
            default: () => []
        },
        numType: {
            type: Number,
            default: 1
        }
    },
    computed: {
        userId() {
            return this.$store.getters.userId
        },
        // 活动价
        isActivityPrice() {
            return this.productInfo.activeStatus > 0 || this.productInfo.actProduct === '1'
        },
        // 拼团价
        isCollagePrice() {
            return this.productInfo.collageStatus > 0 || this.productInfo.actProduct === '2'
        },
        // 限时特价
        isDiscountPrice() {
            return this.productInfo.discountStatus > 0 || this.productInfo.actProduct === '3'
        },
        limitedNum() {
            return this.productInfo?.limitedNum
        }
    },
    methods: {
        onCountChange(value) {
            this.$emit('countChange', value)
        }
    }
}
</script>

<style lang="scss" scoped>
.order-product {
    @extend .cm-flex-between;
    background-color: #fff;
    .cover {
        width: 180rpx;
        height: 180rpx;
        border-radius: 12rpx;
        box-sizing: border-box;
        border: 1rpx dashed #e1e1e1;
    }

    .content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        margin-left: 16rpx;
    }

    .name {
        @include ellipsis(2);
        max-width: 440rpx;
        min-height: 68rpx;
        font-size: 26rpx;
        color: #333333;
    }

    .tip {
        margin-top: 80rpx;
        font-size: 26rpx;
        color: #f83c6c;
    }

    .unit {
        min-height: 28rpx;
        font-size: 20rpx;
        color: #999999;
    }

    .tags {
        min-height: 30rpx;
    }

    .price {
        font-size: 26rpx;
        font-weight: 600;
        color: #f83c6c;
    }

    .buy-num {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 26rpx;
    }
}
</style>
