<template>
    <div>
        <el-drawer
            title="竞标者详情"
            :visible.sync="open"
            direction="rtl"
            size="26%"
            :before-close="handleClose"
            class="crowdtask"
        >
            <el-divider></el-divider>
            <div v-if="testerdata" style="padding: 2px 0px 15px 0; text-align: center">
                <img
                    style="width: 76px; height: 76px; margin: 0px 0 20px 0; border-radius: 50%"
                    :src="testerdata.avatar && testerdata.avatar != '' ? testerdata.avatar : '/assets/home/picture.png'"
                    alt=""
                />
                <p style="margin: -5px 0 5px 0; font-size: 16px; color: #1a1a1a; font-weight: bold">
                    <!-- <span>测试者姓名：李某某 </span>   -->
                    <span> 昵称：{{ testerdata.nick_name }}</span>
                </p>
                <p style="font-size: 15px; color: #808080">
                    <span>姓名：{{ testerdata.name }} </span>
                    <span style="margin: 0 10px; font-size: 14px"> l</span>
                    <span>性别：{{ testerdata.sex }} </span>
                </p>
                <div style="display: flex; justify-content: center; align-items: center">
                    <!-- <el-tooltip
                        
                        class="item"
                        effect="dark"
                        :content="testerdata.phonenumber"
                        placement="top"
                    >
                        
                    </el-tooltip> -->
                    <img :title="testerdata.phonenumber" v-if="testerdata.phonenumber" style="width: 20px; height: 20px; margin-bottom: 0" src="/assets/crowd/phone.png" alt="" />
                    <img v-else style="width: 25px; height: 25px" src="/assets/crowd/nophone.png" alt="" />
                    <span style="margin: 0 10px; color: #808080; font-size: 14px"> l</span>
                    <template v-if="testerdata.commentsStar && testerdata.commentsStar !=0">
                        <span class="pingjiarate">评分：{{ testerdata.commentsStar }}</span>
                        <span v-if="crowdtype == 'myPublish'" style="margin: 0 10px; color: #808080; font-size: 14px">
                            l</span
                        >
                        <a v-if="crowdtype == 'myPublish'" href="#ccaaswxa" class="lookreview">查看评论内容</a>
                    </template>
                    <span v-else style="margin: 0 10px; color: #808080; font-size: 14px">暂无评价</span>
                </div>
                <!-- <div style="width:100%;height: 1px;background-color: #EBEBEB;margin: 14px 0 19px 0;"></div> -->
                <div class="sintitle">
                    <img src="/assets/crowd/grxx.png" alt="" />
                    <p>认证信息</p>
                </div>
                <el-form label-width="130px" class="demo-ruleForm" v-loading="loading">
                    <div style="margin-top: -10px">
                        <el-form-item label="姓名："> {{ testerdata.name }} </el-form-item>
                    </div>
                    <div style="margin-top: -10px">
                        <el-form-item label="身份证号："> {{ testerdata.id_number }} </el-form-item>
                    </div>
                    <div style="margin-top: -10px">
                        <el-form-item label="所在城市：">{{ testerdata.city }}</el-form-item>
                    </div>
                    <div style="margin-top: -10px">
                        <el-form-item label="个人技能">{{ testerdata.test_skills }}</el-form-item>
                    </div>
                </el-form>

                <div class="sintitle">
                    <img style="width: 22px; height: 22px" src="/assets/crowd/advantage.png" alt="" />
                    <p>个人优势</p>
                </div>
                <p
                    v-if="testerdata.personalAdvantage"
                    style="font-size: 14px; text-align: left; color: #333333; margin: 20px 30px; line-height: 25px"
                >
                    {{ testerdata.personalAdvantage }}
                </p>
                <p v-else style="color: #333333; text-align: left; margin: 20px 30px">无</p>
                <div class="sintitle">
                    <img style="width: 23px; height: 24px" src="/assets/crowd/jnzs.png" alt="" />
                    <p>技能证书</p>
                </div>
                <div>
                    <!-- height: 150px; -->
                    <img
                        v-if="testerdata.certificate_url"
                        style="width: 213px; object-fit: contain; margin: 20px 0"
                        :src="testerdata.certificate_url"
                        alt=""
                    />
                    <p v-else style="text-align: left; margin-left: 30px">无</p>
                </div>
                <div class="sintitle">
                    <img style="width: 15px; height: 22px" src="/assets/crowd/gzjl.png" alt="" />
                    <p>工作经历</p>
                </div>
                <div
                    @click="nextpro('work')"
                    v-if="testerdata.work_experience"
                    v-html="testerdata.work_experience.replace(/(\r\n|\n|\r)/gm, '<br />')"
                    style="
                        color: #333333;
                        white-space: nowrap;
                        margin: 20px 30px;
                        text-align: left;
                        line-height: 25px;
                        font-size: 14px;
                    "
                ></div>
                <p v-else style="color: #333333; margin: 20px 30px; text-align: left">无</p>
                <!-- <div style="margin-top: 30px;">
            <p style="font-weight: bold;font-size:17px;color: #1A1A1A;text-align: left;margin-left: 30px;"> 项目案例</p>
          </div>
          <div style="width:100%;height: 1px;background-color: #EBEBEB;margin:10px 0 19px 0;"></div> -->
                <div class="sintitle">
                    <img style="width: 23px; height: 24px" src="/assets/crowd/projecta.png" alt="" />
                    <p>项目案例</p>
                </div>
                <div v-if="projectlist.length > 0">
                    <div v-for="(item, key) of projectlist">
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin: 5px 10px 10px 30px;
                            "
                        >
                            <p style="font-weight: bold; font-size: 15px; margin: 0">{{ item.projectName }}</p>
                            <p style="margin-right: 6px; color: #4d4d4d">{{ item.projectPeriod }}</p>
                        </div>
                        <p style="color: #000000; text-align: left; margin: 0 30px">{{ item.role }}</p>
                        <p
                            style="
                                color: #595959;
                                margin-top: 25rpx;
                                text-align: left;
                                margin-left: 30px;
                                line-height: 25px;
                                font-size: 14px;
                            "
                        >
                            {{ item.projectIntro }}
                        </p>
                    </div>
                </div>
                <p v-else style="color: #333333; margin-top: 13px; margin-left: 30px; text-align: left">无</p>
                <div v-if="crowdtype == 'myPublish'">
                    <div class="sintitle">
                        <img style="width: 22px; height: 22px" src="/assets/crowd/aplycom.png" alt="" />
                        <p>竞标方案</p>
                    </div>
                    <div
                        v-if="programme"
                        style="font-size: 14px; text-align: left; color: #333333; margin: 20px 30px; line-height: 25px"
                    >
                        <!-- <p style="font-size: 14px;text-align:left;color: #333333;margin:20px 30px;line-height:25px;">预算：{{programme.period}}</p> -->
                        <p>竞标日期：{{ programme.apply_time ? programme.apply_time.slice(0, 10) : '无' }}</p>
                        <p>竞标工期：{{ programme.period ? programme.period + '天' : '无' }}</p>
                        <p>竞标优势：{{ programme.competition_edge ? programme.competition_edge : '无' }}</p>
                        <p>
                            竞标附件：
                            <span
                                @click="openurl(programme.attachment)"
                                v-if="programme.attachment"
                                style="color: #1578ed; cursor: pointer"
                                >项目附件</span
                            >
                            <span v-else style="margin-left: -3px">无</span>
                        </p>
                    </div>
                    <p v-else style="color: #333333; text-align: left; margin: 20px 30px">无</p>
                </div>

                <!-- 评论 -->
                <div v-if="crowdtype == 'myPublish'" id="ccaaswxa">
                    <div class="sintitle">
                        <img style="width: 22px; height: 22px" src="/assets/crowd/review.png" alt="" />
                        <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>
            <div v-else style="margin-left: 20px">暂无竞争者信息</div>
        </el-drawer>
    </div>
</template>

<script>
import { getUserDetail } from '@/api/system/user.js'
import { assignTester } from '@/api/crowdsource/crowdsource'
import { gettesterId, getdetesterId, getresume, getproject } from '@/api/tester/CompanyApply'
import { getMyreviewList, getMyreviewListNoToken } from '@/api/review/myreview.js'
export default {
    name: 'TesterDetail',
    props: {
        status: Number,
        taskId: Number,
        crowdtype: String,
    },
    data() {
        return {
            open: false,
            user: {},
            tester: {},
            company: {},
            fileList: [],
            loading: false,
            userId: '',
            testerdata: {}, //竞争者信息
            // resumedata:{},//简介信息
            projectlist: [], //项目集合
            programme: {}, //竞标方案
            value1: '',
            viewList: [],
        }
    },
    methods: {
        async viewDetail(row, taskId) {
            this.userId = row.user_id
            // this.taskId = row.taskId;
            this.open = true
            // this.loading = true;
            getdetesterId(this.userId, taskId).then((res) => {
                this.testerdata = res.data
                this.projectlist = res.projectCase
                this.programme = res.plan
            })

            const res = await getMyreviewListNoToken(this.userId)
            this.viewList = res.rows

            //个人简介
            // getresume(userId).then(res=>{
            //     this.resumedata=res;
            // })
            // getproject(userId).then(res=>{
            //   this.projectlist=res
            // })
            // getUserDetail(userId).then(response => {
            //   this.user = response.user;
            //   if (response.company != null)
            //     this.company = response.company;
            //   if (response.tester != null)
            //     this.tester = response.tester;
            //   if (response.fileList != null) {
            //     this.fileList = response.fileList;
            //   }
            //  this.loading = false;
            // })
        },
        openurl(url) {
            this.$message.success('下载成功')
            window.location.href = url
        },
        assign() {
            this.$confirm('确认要将众包任务指定给该测试者吗?').then(() => {
                let param = {}
                param.testerId = this.userId
                param.taskId = this.taskId
                assignTester(param).then((response) => {
                    this.cancel(true)
                })
            })
        },
        cancel(isFresh) {
            this.open = false
            this.$emit('closeDialog', isFresh)
        },
        downloadFile(fileUrl) {
            const loading = this.$loading({
                lock: true,
                text: '正在下载，请稍后...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            downloadFast(fileUrl, loading)
        },
        //关闭抽屉
        handleClose(done) {
            this.open = false
            // this.$confirm('确认关闭？').then(_ => {
            //     done();
            // }).catch(_ => {});
        },
    },
    created() {},
}
</script>

<style scoped>
.crowdtask >>> .el-drawer__header {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 20px;
    color: #1a1a1a;
}
.crowdtask >>> .el-divider--horizontal {
    margin: 1px 0 0px 0;
    width: 100%;
    /* position: fixed; */
    z-index: 99;
    color: #ebebeb;
}
.sintitle {
    display: flex;
    align-items: center;
    /* height: 50px; */
    background: #f2f4f7;
    /* background:#20529c; */
    border-radius: 2px;
    padding: 7px 30px;
    margin-top: 15px;
}
.sintitle img {
    width: 20px;
    height: 18px;
    margin-right: 5px;
}
.sintitle p {
    font-size: 15px;
    color: #000000;
    font-weight: bold;
    margin: 0 10px;
}
.demo-ruleForm >>> .el-form-item__content {
    border-bottom: 1px solid #ebebeb;
    text-align: left;
    padding-left: 10px;
}
.demo-ruleForm {
    padding-right: 60px;
}
.demo-ruleForm >>> .el-form-item {
    margin-top: 15px;
}
.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;
}
.ratebox >>> .el-rate__icon {
    font-size: 25px !important;
}
.pingjiarate {
    color: #fa9529;
    font-size: 15px;
}
.lookreview {
    color: #1578ed;
    font-size: 14px;
    text-decoration: none;
}
</style>
