<template>
    <div class="hanzo-evaluate">
        <div class="hanzo-evaluate_head">
            <span class="hanzo-evaluate_head--id">订单编号：{{ orderId }}</span>
            <span class="hanzo-evaluate_head--time">{{ orderDateStr }}</span>
        </div>
        <div class="hanzo-evaluate_body">
            <div class="hanzo-evaluate_body--cover">
                <h-image :src="thumbnailsUrl"/>
            </div>
            <div class="hanzo-evaluate_body--detail">
                <p class="hanzo-evaluate_body--detail-title">{{productName}}</p>
                <div class="hanzo-evaluate_body--detail-qty">
                    <span>{{skuContent}}</span>
                    <i>x{{qty}}</i>
                </div>
                <div class="hanzo-evaluate_body--others">
                    <div class="hanzo-evaluate_body--others-price">
                        <span class="big-price">￥{{activityPrice}}</span><span class="small-price">￥{{originalPrice}}</span>
                    </div>
                    <span v-if="!hasEva" class="hanzo-evaluate_body--others-btn" @click="handleClick">立即评价</span>
                </div>
            </div>
        </div>
        <div v-if="hasEva" class="hanzo-evaluate_foot">
            <div class="hanzo-evaluate_foot--eva">
                <span class="hanzo-evaluate_foot--eva-text">商品评价</span>
                <div class="hanzo-evaluate_foot--eva-rate"><h-rate v-model="commentScore" disabled/></div>
            </div>
            <span class="hanzo-evaluate_foot--time">{{commentDateStr}}</span>
        </div>
    </div>
</template>
<script>
import hImage from '../image/index';
import hRate from '../rate/index';
export default {
    name: 'h-evaluate',
    props: {
        // 订单ID
        orderId: String,
        // 订单时间
        orderDateStr: String,
        // 订单图片
        thumbnailsUrl: String,
        // 订单title
        productName: String,
        // 商品 tag
        skuContent: String,
        // 订单数量
        qty: String,
        // 售价
        activityPrice: String,
        // 原价
        originalPrice: String,
        // 是否已评价
        hasEva: Boolean,
        // 评分
        commentScore: Number,
        // 评价时间
        commentDateStr: String,
        // 其他数据
        others: Object
    },
    components: {
        hImage,
        hRate
    },
    methods: {
        handleClick() {
            const param = Object.assign( {}, this._props );
            this.$emit( 'click', param );
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>