<template>
    <el-card>
        <el-container class="container">
            <el-main class="product-container">
                <h2>{{product.productName}}</h2>
                <p>{{product.productDesc}}</p>
                <el-divider></el-divider>
                <p>
                    <span class="ori-price">{{product.oriPrice}}</span>
                    <span class="favoured-price">{{product.favouredPrice}}</span>
                    <span> 元</span>
                </p>
                <div v-if="product.featureItemList">
                    <div v-for="(item,index) in product.featureItemList" :key="index">
                        <p>
                            <span>{{item.featureName}} </span>
                            <span>{{item.addValue}} </span>
                            <span>{{item.unit==='N'?'条':item.unit==='M'?'月':item.unit}}</span>
                        </p>
                    </div>
                </div>
            </el-main>
            <el-footer>
                <el-button @click="handleBuy" type="primary" style="width:100%;padding:15px">购 买</el-button>
            </el-footer>
        </el-container>
    </el-card>
</template>

<script>
export default {
    name: "ProductItem",
    props: {
        product: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {};
    },
    methods: {
        handleBuy() {
            this.$emit("buy", this.product);
        },
    },
};
</script>

<style lang="stylus" scoped>
.container {
    width: 300px;
    height: 450px;
}

.product-container {
    text-align: center;
    height: 100%;
}

.ori-price {
    font-size: x-large;
    font-weight: 400;
    text-decoration: line-through;
}

.favoured-price {
    color: red;
    font-size: xx-large;
    font-weight: 600;
    margin-left: 10px;
}
</style>
