<template>
    <div class="product clearfix">
        <div class="checkbox" v-if="product.is_limit_skn !== 'Y'">
            <input type="checkbox" v-model="product.checked" :id="`checkbox-${product.listIndex}`">
            <label :for="`checkbox-${product.listIndex}`" class="iconfont checkbox" :class="{'icon-radio': !product.checked, 'icon-cb-radio': product.checked}"></label>
        </div>
        <img class="image" :src="product.goods_image | resize(100, 130)">
        <div class="info">
            <div class="p-title">
                {{product.product_name}}
            </div>
            <div class="meta">
                <span class="color">颜色: {{product.color_name}}</span>
                <span class="size">尺码: {{product.size_name}}</span>
            </div>
        </div>
        <div class="price">
            &yen;{{product.last_price}}
            <p class="num">
                x1
            </p>
        </div>
        <div v-if="product.is_limit_skn === 'Y'" @click="showTip" class="tip">
            <span class="icon icon-question"></span><span>不支持7天无理由退换货</span>
        </div>
    </div>
</template>

<script>
    const modal = require('plugin/modal2');

    module.exports = {
        props: {
            product: Object
        },
        created() {
            // 经过该组件， 给product 添加 checked属性
            if (!this.product.hasOwnProperty('checked')) {
                this.$set(this.product, 'checked', false);
            }
        },
        methods: {
            showTip() {
                modal.alert('该商品非质量问题不支持退换货，如有疑问请联系在线客服', '不支持无理由退换');
            }
        },
    };
</script>

<style>
    .product {
        position: relative;
        padding: 0 30px;
        min-height: 170px;
        font-size: 24px;
        line-height: 1.5;
        background: #fff;

        &:after {
            content: "";
            position: absolute;
            left: 30px;
            bottom: -1px;
            right: 0;
            height: 0;
            border-bottom: 1px solid #eee;
            z-index: 1;
        }

        .checkbox {
            float: left;
            margin-top: 32px;

            input {
                display: none;
            }

            .iconfont {
                font-size: 32px;
            }
        }

        .image {
            float: left;
            margin: 0 20px;
            margin-top: 20px;
            width: 100px;
            height: 130px;
        }

        .info {
            padding: 15px 0;
            width: 480px;
            word-break: break-all;

            .p-title {
                color: #000;
                font-size: 24px;
                height: 72px;
                overflow: hidden;
            }

            .meta {
                margin-top: 10px;
                color: #b0b0b0;
            }

            .color {
                margin-right: 30px;
            }
        }

        .price {
            position: absolute;
            top: 15px;
            right: 30px;
            text-align: right;

            .num {
                color: #b0b0b0;
            }
        }

        .tip {
            position: relative;
            height: 70px;
            padding: 10px 22px;
            font-size: 26px;
            background: #fff;

            .icon {
                margin-right: 15px;
            }

            &:after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -1px;
                width: 690px;
                height: 0;
                border-bottom: 1px solid #eee;
            }
        }
    }

    .is-mars-app {
        .checkbox > .iconfont {
            color: #8ab277;
        }
    }
</style>