<template>
    <div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 10px">
        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: space-between">
            <div>
                <span style="color: #4b5563;font-size: 16px"><span style="font-size: 17px;font-weight: bold">{{index+1}}</span>. 在 {{comments.commentTime}} 发布的评论</span>
            </div>
            <div>
                <el-link :underline="false" style="color: red">申诉</el-link>
                <el-button @click="toCommentDeatil" icon="el-icon-search" circle style="margin-left: 10px"></el-button>
            </div>
        </div>
        <div>
            <el-card style="border-radius: 10px;margin-top: 10px;">
                <div style="display: flex;flex-direction: row;flex-wrap: nowrap">
                    <div style="width: 60px;height: 60px;">
                        <el-avatar :size="60" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+comments.username">{{ this.$cookie.get('username') }}</el-avatar>
                    </div>
                    <div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-left: 20px">
                        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
                            <span style="font-size: 16px;font-weight: bold">{{ this.$cookie.get('username') }}</span>
                            <span style="margin-left: 10px">评分: </span>
                            <el-rate
                                style="margin-left: 5px"
                                v-model="comments.star"
                                disabled
                                score-template="{value}">
                            </el-rate>
                            <el-tag v-if="comments.isUsed===1" size="mini" style="margin-left: 10px">
                                用过
                            </el-tag>
                            <el-tag type="warning" v-if="comments.isUsed===0" size="mini" style="margin-left: 10px">
                                没用过
                            </el-tag>
                        </div>
                        <el-card style=";border:none;display: flex;flex-direction:row;justify-content: flex-start;margin-top: 10px">
                            {{comments.content}}
                        </el-card>
                        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top: 10px;align-items: center;justify-content: space-between">
                            <span style="color: #9ca3af;font-size: 15px">
                                {{formatTime}}
                            </span>
                            <div style="font-size: 14px;color:#9ca3af;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
                                <span>项目</span>
                                <span style="margin-left: 8px">•</span>
                                <span v-if="comments.likeNum>=200" style="margin-left: 8px;color: #ffba00">热评</span>
                                <span v-if="comments.likeNum<200" style="margin-left: 8px">非热评</span>
                                <span style="margin-left: 8px">•</span>
                                <span style="margin-left: 8px">点赞</span>
                                <span style="margin-left: 8px">{{comments.likeNum}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: "UserComments",
    props:{
      comments:Object,
        index:Number,

    },
    data(){
        return{
            value:5,
        }
    },
    computed:{
        formatTime: function() {
            if (this.comments) {
                const dt = new Date(this.comments.commentTime)
                const year=dt.getFullYear()
                const month = dt.getMonth()
                const date = dt.getDate()
                return `${year}-${month}-${date}`
            }
            return '';
        },
    },
    methods:{
        toCommentDeatil(){
            this.$router.push({
                path:'/ProjectDetail',
                query: {
                    id: this.comments.projectId, refresh: true
                }})
        }
    },
}
</script>

<style scoped>

</style>