<template>
    <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  style="width: 100%; margin-top: 30px; text-align: center">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :page-size="queryParams.pageSize"
                layout="total,  prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getMyreviewList } from '@/api/review/myreview.js'
export default {
    data() {
        return {
            value1: 3,
            viewList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
        }
    },
    computed: {
        ...mapGetters(['userinform']),
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            const res = await getMyreviewList(this.userinform.userId, {...this.queryParams})
            this.viewList = res.rows
            this.total = res.total
            console.log(res)
        },
        //当前页码
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.getList()
        },
    },
}
</script>

<style scoped>
.myreview {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.item {
    width: 49%;
    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: 75px;
    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: 144px;
    padding: 10px 26px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.remark {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    flex: 1;
}
.fromtask {
    font-weight: 500;
    font-size: 14px;
    color: #808080;
    height: 30px;
    line-height: 30px;
}
.ratebox {
    height: 40px;
}
.ratebox >>> .el-rate__icon {
    font-size: 30px !important;
}
</style>