<template>
    <div class="comment" @click="goNext">
        <div class='icon' :style="{backgroundImage:'url('+(type=='store'?userInfo.icon:productInfo.image)+')'}">
        </div>
        <div class="content">
            <div class="name">{{type=='store'?userInfo.nickname:productInfo.title}}</div>
            <el-rate v-model="starLevel" disabled show-score text-color="#ff9900" score-template="{value}">
            </el-rate>

            <div class="message">
                {{info.context}}
            </div>

            <div class="imgList" v-if="info.productCommentImageList.length>0">
                <imgItemLittle :img='item.imageUrl' v-for="item in info.productCommentImageList"></imgItemLittle>
            </div>

        </div>
        <span class="time">{{getTime(info.createTime)}}</span>

    </div>

</template>

<script>
import imgItemLittle from '../components/ImgItemLittle'
export default {
    name: 'commentItem',
    props: {
        info: {
            type: Object,
            default: {}
        },
        type: {
            type: String,
            default: 'store'
        }
    },
    data() {
        return {
            nowStep: 1,
        }
    },
    watch: {
        $route() {
            this.getStep()
        }
    },
    computed: {
        userInfo() {
            var jsonp = {}
            if (this.info.userInfo) {
                jsonp = this.info.userInfo
            }
            return jsonp
        },
        productInfo(){
             var jsonp = {}
            if (this.info.productInfo) {
                jsonp = this.info.productInfo
            }
            return jsonp
        },
        starLevel(){
            var num=0
            if(this.info.starLevel){
                num=parseFloat(this.info.starLevel)
            }
            return num
        }
    },
    mounted() {

    },
    methods: {
        goNext() {
            // if (this.type == 'user') {
            //     this.$router.push({
            //         name: 'product',
            //         query: {
            //             id: this.info.productId,
            //             // breHref:
            //         }
            //     })
            // }
        }
    },
    components: {
        imgItemLittle
    }
}
</script>

<style lang="less" scoped>
.comment {
    padding: 20px 30px;
    position: relative;
    .icon {
        width: 66px;
        height: 66px;
        border-radius: 100%;
        display: inline-block;
        background-position: center center;
        background-size: cover;
        vertical-align: top;
        background-color: #ebebeb;
    }
    .content {
        display: inline-block;
        vertical-align: center;
        margin-left: 22px;

        .name {
            font-size: 14px;
            color: rgba(51, 51, 51, 1);
            line-height: 19px;
            margin-bottom: 9px;
        }

        .message {
            font-size: 12px;
            color: rgba(51, 51, 51, 1);
            line-height: 20px;
            margin-top: 8px;
        }
    }

    .time {
        position: absolute;
        right: 30px;
        top: 20px;
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
        line-height: 16px;
    }
}
</style>
