<template>
    <div>
        <el-drawer
            title="发布者评价"
            :visible.sync="open"
            direction="rtl"
            size="600px"
            :before-close="handleClose"
            class="crowdtask"
        >
            <div class="companyinfo">
                <div style="width: 100%; background: #ffffff; padding: 15px 0px; text-align: center">
                    <div style="width: 76px; height: 76px; margin: 20px auto">
                        <img
                            style="width: 76px; object-fit: contain"
                            :src="task.avatar ? task.avatar : '/assets/home/defaultAva.jpg'"
                            alt=""
                        />
                    </div>
                    <p style="margin: -5px 0; font-size: 20px; color: #1a1a1a; font-weight: bold">
                        {{ task.company_name }}
                    </p>
                    <div v-if="value && value != 0" style="display: flex; justify-content: center; align-items: center">
                        <p style="font-size: 16px; color: #808080">
                            <span>评分：</span>
                            <span style="color: #f38f0d; font-weight: 600">{{value}}</span>
                        </p>
                        <div
                            class="ratebox"
                            style="display: flex; justify-content: center; align-items: center; margin-left: 10px"
                        >
                            <el-rate v-model="value" disabled></el-rate>
                        </div>
                    </div>
                    <div v-else style="font-weight: 500;font-size: 16px;color: #666666; text-align:center;margin-top: 20px">暂无评分</div>

                    <div style="width: 100%; height: 1px; background-color: #ebebeb; margin: 14px 0 19px 0"></div>
                    <!-- 评论标题 -->
                    <div class="sintitle">
                        <p>评论</p>
                    </div>
                    <!-- 评论内容 -->
                    <div class="myreview">
                        <div class="item" v-for="it in viewList" :key="it.comment_id">
                            <div class="itemtop">
                                <div class="itemtopl">
                                    <img class="itemtoplimg" src="/assets/home/defaultAva.jpg" alt="" />
                                    来自{{ it.from_city }}的朋友
                                </div>
                                <div class="itemtopr">{{ it.creare_time }}</div>
                            </div>

                            <div class="itembottom">
                                <div class="ratebox">
                                    <el-rate v-model="it.star" disabled></el-rate>
                                </div>
                                <div class="remark">{{ it.content }}</div>
                                <div class="fromtask">来自任务：{{ it.project_name }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { getMyreviewList, getMyreviewListNoToken } from '@/api/review/myreview.js'

export default {
    props: {
        task: {
            type: Object,
        },
    },
    data() {
        return {
            open: false,
            value: 0,
            viewList: [],
        }
    },
    methods: {
        handleClose() {
            this.open = false
        },
        async getList(id) {
            const res = await getMyreviewListNoToken(id)
            this.viewList = res.rows
        },
    },
}
</script>

<style scoped>
.crowdtask >>> .el-drawer__header {
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid #ebebeb;
    color: #1a1a1a;
}
.sintitle {
    display: flex;
    align-items: center;
    background: #f2f4f7;
    border-radius: 2px;
    padding: 8px 30px;
    box-sizing: border-box;
}

.sintitle p {
    font-size: 15px;
    color: #000000;
    font-weight: 500;
    margin: 0;
}
.myreview {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.item {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 12px 0px rgba(17, 19, 21, 0.06);
    margin-bottom: 20px;
}
.itemtoplimg {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-right: 15px;
}
.itemtop {
    height: 70px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 26px;
    box-sizing: border-box;
}
.itemtopl {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.itemtopr {
    font-weight: 500;
    font-size: 14px;
    color: #808080;
}
.itembottom {
    height: 120px;
    padding: 10px 26px;
    box-sizing: border-box;
    text-align: start;
}
.remark {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    min-height: 40px;
}
.fromtask {
    font-weight: 500;
    font-size: 14px;
    color: #808080;
    min-height: 30px;
    line-height: 30px;
}
.ratebox {
    height: 30px;
    margin-top: -8px;
}
.ratebox >>> .el-rate__icon {
    font-size: 25px !important;
}
.pingjiarate {
    color: #fa9529;
    font-size: 15px;
}
.lookreview {
    color: #1578ed;
    font-size: 14px;
    text-decoration: none;
}
</style>