<template>
    <view class="order-product">
        <image class="cover" :src="productData.image" mode="widthFix"></image>
        <view class="content">
            <view class="name" v-text="productData.name"></view> <view class="unit">规格：{{ productData.unit }}</view>
            <view class="tags">
                <template v-if="tagsList.length > 0">
                    <view class="tag other" v-for="(tag, index) in tagsList" :key="index">{{ tag }}</view>
                </template>
                <view class="tag pt" v-if="productInfo.collagePriceFlag === 1 || productInfo.collageStatus === 1">
                    拼团价
                </view>
                <template v-if="productInfo.activeStatus">
                    <view class="tag cx" v-if="userId === productInfo.heUserId">促销</view>
                    <view class="tag cx" v-else>自营</view>
                    <view class="tag hd" v-if="productInfo.ladderList.length > 0">活动价</view>
                </template>
            </view>
            <view class="price">￥{{ productData.price | priceFormat }}</view>
            <view class="buy-num" v-if="numType === 1">×{{ productData.count }}</view>
            <view class="buy-num" v-if="numType === 2">
                <cm-number-box v-model="productData.count" @change="onCountChange"></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: {
        productData() {
            return {
                image: this.productInfo.mainImage || this.productInfo.productImage,
                name: this.productInfo.productName || this.productInfo.name,
                unit: this.productInfo.unit || this.productInfo.productUnit,
                price: this.productInfo.price,
                count: this.productInfo.productCount || this.productInfo.num
            }
        },
        userId() {
            return this.$store.getters.userId
        }
    },
    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>
