<template>
    <div class="userpage container">
        <div class="topava">
            <div class="topavaL">
                <img :src="testerdata.avatar ? testerdata.avatar : '/assets/home/defaultAva.jpg'" alt="" />
            </div>
            <div class="topavaR">
                <div class="topavaRT">
                    <div class="topavaRT1">昵称：{{ testerdata.nick_name }}</div>
                    <div class="topavaRT2"></div>
                </div>
                <div class="topavaRB">
                    <img src="/assets/crowd/address.png" class="topavaRB1" alt="" />
                    <div class="topavaRB2">{{ testerdata.city }}</div>
                    <div class="topavaRB3">|</div>
                    <div class="topavaRB2" v-if="testerdata.commentsStar">评分：{{ testerdata.commentsStar }}分</div>
                    <div class="topavaRB2" v-else>暂无评分</div>
                    <div class="ratebox1" v-if="testerdata.commentsStar">
                        <el-rate v-model="testerdata.commentsStar" disabled></el-rate>
                    </div>
                </div>
            </div>
        </div>
        <div class="middlebar">
            <div class="middlebarit" :class="active == 0 ? 'middlebaritac' : ''" @click="tabfn(0)">中标记录</div>
            <div class="middlebarit" :class="active == 1 ? 'middlebaritac' : ''" @click="tabfn(1)">收到的评价</div>
            <div
                class="middlebarit"
                :class="active == 2 ? 'middlebaritac' : ''"
                @click="tabfn(2)"
                v-if="userinform.companyStatus == 2"
            >
                在线简历
            </div>
        </div>
        <div class="content0" v-if="active == 0 && allcrowdlist.length">
            <div class="content0it" v-for="it in allcrowdlist" :key="it.task_id" @click="gotaskDetail(it.task_id)">
                <div class="content0itT">
                    <div class="content0itTL">{{ it.project_name }}</div>
                    <div class="content0itTR">{{ it.price }}元</div>
                </div>
                <div class="content0itB">
                    <div class="content0itBL">项目周期{{ it.period }}天</div>
                    <div class="content0itBR" v-if="it.status == 1">实施中</div>
                    <div
                        class="content0itBR"
                        v-if="it.status == 0"
                        style="background: linear-gradient(90deg, #ffdc00, #ed9706)"
                    >
                        竞标中
                    </div>
                    <div
                        class="content0itBR"
                        v-if="it.status == 2"
                        style="background: linear-gradient(90deg, #fca141, #fd6940)"
                    >
                        竞标失败
                    </div>
                    <div
                        class="content0itBR"
                        v-if="it.status == 3"
                        style="background: linear-gradient(90deg, #fca141, #fd6940)"
                    >
                        待验收
                    </div>
                    <div
                        class="content0itBR"
                        v-if="it.status == 4"
                        style="background: linear-gradient(90deg, #fca141, #fd6940)"
                    >
                        待付款
                    </div>
                    <div
                        class="content0itBR"
                        v-if="it.status == 5"
                        style="background: linear-gradient(90deg, #1bf5b3, #08c78f)"
                    >
                        已完成
                    </div>
                    <div
                        class="content0itBR"
                        v-if="it.status == 6"
                        style="background: linear-gradient(90deg, #fca141, #fd6940)"
                    >
                        验收不通过
                    </div>
                </div>
            </div>
        </div>
        <el-empty v-else-if="active == 0 && !allcrowdlist.length" description="暂无中标记录"></el-empty>

        <div class="content1" v-if="active == 1 && viewList.length">
            <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>
        <el-empty v-else-if="active == 1 && !viewList.length" description="暂无评价"></el-empty>
        <div class="content2" v-if="active == 2">
            <div class="contentitem">
                <div class="contentitemT">
                    <div class="contentTline"></div>
                    个人优势
                </div>
                <div class="contentitemB">
                    {{ testerdata.personalAdvantage || '无' }}
                </div>
            </div>
            <div class="contentitem">
                <div class="contentitemT">
                    <div class="contentTline"></div>
                    工作经历
                </div>
                <template v-if="workList.length">
                    <div class="contentitemB" v-for="it in workList" :key="it.caseId" style="margin-bottom: 30px">
                        <div><span class="contentitemBF">公司名称：</span>{{ it.name }}</div>
                        <div><span class="contentitemBF">在职时间：</span>{{ it.startTime }}-{{ it.endTime }}</div>
                        <div><span class="contentitemBF">职位名称：</span>{{ it.title }}</div>
                        <div><span class="contentitemBF">工作内容：</span>{{ it.intro }}</div>
                    </div>
                </template>
                <div class="contentitemTBook" v-else>无</div>
            </div>
            <div class="contentitem">
                <div class="contentitemT">
                    <div class="contentTline"></div>
                    项目经历
                </div>
                <template v-if="proList.length">
                    <div class="contentitemB" v-for="it in proList" :key="it.caseId" style="margin-bottom: 30px">
                        <div><span class="contentitemBF">项目名称：</span>{{ it.name }}</div>
                        <div><span class="contentitemBF">项目时间：</span>{{ it.startTime }}-{{ it.endTime }}</div>
                        <div><span class="contentitemBF">担任角色：</span>{{ it.title }}</div>
                        <div><span class="contentitemBF">应用技术：</span>{{ it.applyTech }}</div>
                        <div><span class="contentitemBF">工作内容：</span>{{ it.intro }}</div>
                    </div>
                </template>
                <div class="contentitemTBook" v-else>无</div>
            </div>
            <div class="contentitem">
                <div class="contentitemT">
                    <div class="contentTline"></div>
                    教育经历
                </div>
                <template v-if="eduList.length">
                    <div class="contentitemB" v-for="it in eduList" :key="it.caseId" style="margin-bottom: 30px">
                        <div><span class="contentitemBF">学校名称：</span>{{ it.name }}</div>
                        <div><span class="contentitemBF">在校时间：</span>{{ it.startTime }}-{{ it.endTime }}</div>
                        <div><span class="contentitemBF">学历：</span>{{ it.education }}</div>
                        <div><span class="contentitemBF">专业：</span>{{ it.major }}</div>
                    </div>
                </template>
                <div class="contentitemTBook" v-else>无</div>
            </div>
            <div class="contentitem">
                <div class="contentitemT">
                    <div class="contentTline"></div>
                    资格证书
                </div>
                <div class="contentitemTBookbox" v-if="bookList.length">
                    <div class="contentitemTBookit" v-for="it in bookList" :key="it.fileId">
                        <img class="contentitemTBookitTimg" :src="it.fileUrl" alt="" />
                        <div class="contentitemTBookitT"><span>证书名称：</span>{{ it.fileName }}</div>
                    </div>
                </div>
                <div class="contentitemTBook" v-else>无</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getdetesterId } from '@/api/tester/CompanyApply'
import { myClaim } from '@/api/crowdsource/crowdsource'
import { getMyreviewListNoToken } from '@/api/review/myreview.js'
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            base: process.env.VUE_APP_BASE_API,
            testerdata: {}, //基本信息
            workList: [],
            proList: [],
            eduList: [],
            bookList: [],
            active: 0,
            allcrowdlist: [], //任务
            viewList: [], //评论
        }
    },
    computed: {
        ...mapGetters(['userinform']),
    },
    created() {
        this.getData()
        this.getTask()
    },
    methods: {
        // 任务详情跳转
        gotaskDetail(id) {
            this.$router.push(`/crowdsourcing/crowddetails?id=${id}`)
        },
        // tab切换
        tabfn(val) {
            this.active = val
            if (val == 0) {
                this.getTask()
            } else if (val == 1) {
                this.getReview()
            }
        },
        // 获取基本数据及简历
        getData() {
            getdetesterId(this.$route.query.id, this.$route.query.id2).then((res) => {
                this.testerdata = res.data
                if (this.testerdata.commentsStar) {
                    this.testerdata.commentsStar = Number(this.testerdata.commentsStar)
                }
                if (this.testerdata.avatar) {
                    if (this.testerdata.avatar && this.testerdata.avatar.indexOf('http') == -1) {
                        this.testerdata.avatar = this.base + this.testerdata.avatar
                    }
                }
                this.projectlist = res.projectCase
                if (res.projectCase && res.projectCase.length) {
                    this.workList = res.projectCase.filter((it) => it.type == 1)
                    this.proList = res.projectCase.filter((it) => it.type == 0)
                    this.eduList = res.projectCase.filter((it) => it.type == 2)
                }
                if (res.credentials && res.credentials.length) {
                    this.bookList = res.credentials
                }

                this.programme = res.plan
            })
        },
        // 获取任务
        getTask() {
            myClaim({}, this.$route.query.id).then((response) => {
                this.allcrowdlist = response.rows
            })
        },
        // 获取评价
        getReview() {
            getMyreviewListNoToken(this.$route.query.id).then((res) => {
                this.viewList = res.rows
            })
        },
    },
}
</script>

<style scoped>
.contentitemTBook {
    margin-bottom: 20px;
}
.userpage {
    padding: 40px 0;
    min-height: 460px;
}
.container {
    width: 1200px;
    margin: auto;
}
.topava {
    display: flex;
    align-items: center;
}
.topavaL {
    width: 76px;
    height: 76px;
    margin-right: 20px;
}
.topavaL img {
    width: 100%;
    height: 100%;
}
.topavaRT {
    margin-bottom: 20px;
}
.topavaRB,
.topavaRT {
    display: flex;
    align-items: center;
}
.topavaRT1 {
    font-weight: bold;
    font-size: 18px;
    color: #1a1a1a;
}
.topavaRB1 {
    width: 13px;
    height: 16px;
    margin-right: 5px;
}
.topavaRB2 {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
}
.topavaRB3 {
    font-size: 12px;
    font-weight: 800;
    color: #333333;
    margin: 0 10px;
}
.middlebar {
    height: 45px;
    background: #f7f7f7;
    display: flex;
    margin-top: 40px;
}
.middlebarit {
    height: 100%;
    padding: 0 20px;
    line-height: 45px;
    font-weight: bold;
    font-size: 15px;
    color: #1a1a1a;
    cursor: pointer;
}
.middlebaritac {
    color: #ffffff;
    background: #1578ed;
}
.content0 {
    display: flex;
}
.content1 {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
}
.item {
    width: 49%;
    background: #ffffff;
    box-shadow: 0px 1px 12px 0px rgba(17, 19, 21, 0.06);
    margin-bottom: 30px;
}
.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 {
    padding: 30px 26px;
    box-sizing: border-box;
    text-align: start;
}
.remark {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    min-height: 40px;
    margin-top: 10px;
}
.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;
}
.ratebox1 {
    margin-top: -8px;
    margin-left: 8px;
}
.ratebox1 >>> .el-rate__icon {
    font-size: 28px !important;
    color: #fa9c22;
}
.pingjiarate {
    color: #fa9529;
    font-size: 15px;
}
.lookreview {
    color: #1578ed;
    font-size: 14px;
    text-decoration: none;
}
/* 简历 */
.content2 {
    margin-top: 30px;
}
.contentitemT {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.contentTline {
    width: 5px;
    height: 17px;
    background: #0066eb;
    margin-right: 5px;
}
.contentitemB {
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    padding: 20px 30px;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 31px;
    margin-bottom: 20px;
}
.contentitemTBookbox {
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    padding: 30px 30px 0 30px;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 31px;
    margin-bottom: 20px;
}
.contentitemBF {
    font-weight: bold;
    font-size: 14px;
    color: #1a1a1a;
}
.contentitemTBookbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.contentitemTBookit {
    margin-right: 40px;
    margin-bottom: 20px;
}
.contentitemTBookitTimg {
    width: 300px;
    height: 212px;
}
.contentitemTBookitT {
    font-weight: 500;
    color: #000000;
    font-size: 14px;
    text-align: center;
}
.contentitemTBookitT span {
    font-weight: bold;
    font-size: 14px;
    color: #1a1a1a;
}
/* 任务 */
.content0 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.content0it {
    background: #ffffff;
    box-shadow: 0px 1px 12px 0px rgba(17, 19, 21, 0.06);
    padding: 30px;
    box-sizing: border-box;
    width: 49%;
    margin-top: 20px;
}
.content0itT,
.content0itB {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content0itB {
    margin-top: 15px;
}
.content0itTL {
    font-weight: bold;
    font-size: 18px;
    color: #1a1a1a;
}
.content0itTR {
    font-weight: bold;
    font-size: 18px;
    color: #ee3f3f;
}
.content0itBL {
    font-size: 15px;
    color: #333333;
    font-weight: 500;
}
.content0itBR {
    width: 80px;
    height: 30px;
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 15px;
    font-weight: 500;
    font-size: 14px;
    color: #fdfdfd;
    line-height: 30px;
    text-align: center;
}
</style>