<template>
    <div style="padding-bottom:50px">
        <div style="background: #FFFFFF;border-radius: 4px;margin-top:26px;">
            <div style="margin:0 20px" class="crowdnum">
                <div class="backbtn">
                    <el-button icon="el-icon-arrow-left" @click='backroute'>返回</el-button>
                </div>
                <div style="display:flex;align-items:center;margin:30px 0">   
                    <div class="dvied"></div>
                    <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">任务信息</div>
                </div>
                <el-divider></el-divider>
                <div style="display:flex">
                    <div class="taskd">   
                        <p>名称</p>
                        <p v-if="crowdtype=='myApply'">{{task.projectName}}</p>
                        <p v-else> {{task.project_name}}</p>
                        <!-- style="width:580px;" -->
                    </div>
                    <div class="taskd">   
                        <p>赏金金额</p>
                        <p style="width:260px">{{task.price | currency('￥')}}</p>
                    </div>
                    <div>
                        <div v-if="crowdtype=='myApply'" class="taskd">   
                            <p>审核状态</p>
                            <div style="width:220px">
                            
                                <p v-if="task.status" > 
                                    <el-tag v-if="task.status == 0" type="primary" effect="dark" size="small" style="width:68px;padding-left: 12px;padding-right: 12px;cursor:pointer">待审核</el-tag>
                                    <el-tag v-else-if="task.status == 1" type="success" effect="dark" size="small" style="cursor:pointer">审核通过</el-tag>
                                    <el-tag v-else type="danger" effect="dark" size="small" style="cursor:pointer">审核不通过</el-tag>
                                </p>
                                <p v-else>无</p>
                            </div>
                            
                        </div>
                        <div v-else class="taskd">   
                            <p v-if="crowdtype=='competitive'">审核状态</p>
                            <p v-else>任务状态</p>
                            <p >
                                <el-tag :type="task.process_status==0?'warning':task.process_status==1?'primary':task.process_status==3?'success':'danger'" effect="dark" 
                                    style="cursor:pointer">{{findByvalue(processStatuslist,parseInt(task.process_status))}}</el-tag>
                            </p>
                        </div>
                    </div>
                    <div  style="display:flex;">
                      
                        <div  class="taskd">   
                            <p>竞标者总数</p>
                            <div > 
                                
                                <p v-if="task.company_app_count || task.personal_app_count">{{(task.company_app_count + task.personal_app_count) == 20 ? "已满":(task.company_app_count + task.personal_app_count) +'人' }}</p>
                                <p v-else>暂无</p>
                            </div>
                            
                        </div>
                    </div>
                   
                </div>
                <el-divider></el-divider>
                <div style="display:flex">
                    <div class="taskd">   
                        <p>测试类型</p>
                        <p v-if="crowdtype=='myApply'">  {{findLabelValueByProp(testtypelist,task.testType,'dictValue','dictLabel')}}</p>
                        <p v-else>{{findLabelValueByProp(testtypelist,task.test_type,'dictValue','dictLabel')}}</p>
                    </div>
                    <div class="taskd">   
                        <p>发布日期</p>
                        <p v-if="crowdtype=='myApply'" style="width:260px">{{task.createTime}}</p>
                        <p v-else style="width:260px">{{task.create_time&&task.create_time.slice(0,10)}}</p>
                    </div>
                    <div class="taskd">   
                        <p>发布有效期</p>
                        <p v-if="crowdtype=='myApply'">{{task.validDays}} 天 </p>
                        <p v-else>  {{task.valid_days}} 天 </p>
                    </div>
                    <div class="taskd">   
                        <p>项目工期</p>
                        <p>{{task.period}}天</p>
                    </div>
                </div>
                <el-divider></el-divider>
                <div style="display:flex">
                    <div class="taskd">   
                        <p>竞标者要求</p>
                        <p  v-if="crowdtype=='myApply'">{{findByvalue(applicantlist,task.applicantType)}}</p>
                        <p v-else>{{findByvalue(applicantlist,task.applicant_type)}}</p>
                    </div>
                    <div class="taskd">   
                        <p>技能要求</p>
                        <p  v-if="crowdtype=='myApply'" style="width:260px">{{task.techNeed}} </p>
                        <p  v-else style="width:260px"> {{task.tech_need}}</p>
                    </div>
                    <div class="taskd">   
                        <p>驻场要求</p>
                        <p v-if="crowdtype=='myApply'">   {{findByvalue(onsiteTypelist,task.onsiteType)}} </p>
                        <p v-else>   {{findByvalue(onsiteTypelist,task.onsite_type)}} </p>
                    </div>
                    <div class="taskd">   
                        <p>地域要求</p>
                        <p>{{task.area}}</p>
                    </div>
                </div>
                <el-divider></el-divider>
                <div>
                    <div class="taskd">   
                        <p>项目简介</p>
                        <p  v-if="crowdtype=='myApply'" style="width:100%;"> {{task.projectDesc}} </p>
                        <p v-else style="width:100%;">{{task.project_desc}}</p>
                    </div>
                </div>
                <el-divider></el-divider>
                <div>
                    <div class="taskd">   
                        <p>备注信息</p>
                        <p style="width:100%;">{{task.remark}}</p>
                    </div>
                </div>
                <el-divider></el-divider>
                <div v-if="crowdtype=='myPublish' ||  crowdtype=='competitive'" style="margin-top:30px;">
                    <el-divider  v-if="task.processStatus==0 || task.processStatus==1" content-position="left"><h3>任务提醒</h3></el-divider>
                    <el-form label-width="150px" class="demo-ruleForm" label-position="left" style="margin-top:20px">
                        <el-row v-if="task.processStatus==0">
                            <el-col :span="24">
                                <el-form-item label="发布有效期截止">
                                {{task.expireTime}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row v-if="task.processStatus==1">
                            <el-col :span="24">
                                <el-form-item label="工期截止">
                                {{task.deadline}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div style="display:flex;align-items:center;margin:30px 0">   
                        <div class="dvied"></div>
                        <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">竞标者名单</div>
                    </div>
                    <el-table v-loading="loading" :data="applicantdataList" border style="width:95%;margin-top:30px">
                        <el-table-column label="序号" align="center" type="index"  width="60"></el-table-column>
                        <el-table-column label="竞标时间" align="center" key="applyTime" prop="applyTime" >
                            <template slot-scope="scope">
                                <span>{{ parseTime(scope.row.applyTime) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="竞标者类型" align="center" key="testerType" prop="testerType">
                            <template slot-scope="scope">
                                <span>{{ scope.row.testerType==2 ? "认证测试公司" : "个人测试者"}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="名称" align="center" key="userName" prop="userName"/>
                        <el-table-column label="状态" align="center" key="status" prop="status" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                            <span>{{ scope.row.status==0 ? "竞标中" :scope.row.status==1 ?"竞标成功":'竞标失败'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center"  class-name="small-padding fixed-width" width="260">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-edit"  @click="viewTesterDetail(scope.row.applicantId)" >
                                    查看详情
                                </el-button>
                                <el-button v-if="crowdtype=='myPublish'" :disabled="task.process_status!=0" size="mini" type="text" icon="el-icon-key" @click="assignTester(scope.row.applicantId)" >
                                    选中
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div v-if="total>10"  style='width:100%;margin-top:30px;text-align:right;'>
                        <el-pagination background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"             
                            :page-size="pageSize"
                            layout="total,  prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                    <tester-detail ref="testerDetail" :status="task.processStatus" :taskId="task.taskId" @closeDialog="closeDialog"></tester-detail>
                </div>
                <div v-if="crowdtype=='myApply'&& task.status != 0">   
                    <div  style="display:flex;align-items:center;margin:30px 0">   
                        <div class="dvied"></div>
                        <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">审核信息</div>
                    </div>
                    <el-divider></el-divider>
                    <div style="display:flex">
                        <div class="taskd">   
                            <p>审核状态</p>
                            <p>
                                <el-tag v-if="task.status == 0" type="primary" effect="dark" size="small" style="width:68px;padding-left: 12px;padding-right: 12px;cursor:pointer">待审核</el-tag>
                                <el-tag v-else-if="task.status == 1" type="success" effect="dark" size="small" style="cursor:pointer">审核通过</el-tag>
                                <el-tag v-else type="danger" effect="dark" size="small" style="cursor:pointer">审核不通过</el-tag>
                            </p>
                        </div>
                        <div class="taskd">   
                            <p>审核时间</p>
                            <p style="width:260px">{{task.auditTime}}</p>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div class="taskd">   
                        <p>审核意见</p>
                        <p>{{task.auditOpinion}}</p>
                    </div>
                    <el-divider></el-divider>
                </div>
                <div v-if="crowdtype=='myClaim'">
                    <el-divider  v-if="task.processStatus==0 || task.processStatus==1" content-position="left"><h3>任务提醒</h3></el-divider>
                    <el-form label-width="150px" class="demo-ruleForm" label-position="left">
                        <el-row v-if="task.processStatus==0">
                        <el-col :span="24">
                            <el-form-item label="发布有效期截止">
                            {{task.expireTime}}
                            </el-form-item>
                        </el-col>
                        </el-row>
                        <el-row v-if="task.processStatus==1">
                        <el-col :span="24">
                            <el-form-item label="工期截止">
                            {{task.deadline}}
                            </el-form-item>
                        </el-col>
                        </el-row>
                    </el-form>
                    <el-divider content-position="left"><h3>发布者信息</h3></el-divider>
                    <el-form>
                        <el-form-item label="公司名称" v-if="company.name !=null">
                        {{company.name}}
                        </el-form-item>
                        <el-form-item label="公司简介" v-if="company.companyDesc !=null">
                        {{company.companyDesc}}
                        </el-form-item>
                        <el-form-item label="公司联系人">
                        {{company.contactName}}
                        </el-form-item>
                        <el-form-item label="联系电话">
                        {{company.contactTel}}
                        </el-form-item>
                    </el-form>
                </div>
                <div style="width: 1200px;display: inline-block;text-align: center;margin-top: 10px;">
                    <el-button type="primary" v-if="crowdtype=='myApply'&& task.status == 2" @click="publishTask" class="btn-yellow">修改并重新发布</el-button>
                </div>       
            </div>
        </div>
        <!-- v-show="task.status ==1" -->
        <crowdsource-task   ref="crowdsourceTask"></crowdsource-task>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {getApply,getApplicant,assignTester,getById} from "@/api/crowdsource/crowdsource";
    import CrowdsourceTask from "../../common/CrowdsourceTask";  
    import {findByvalue, findLabelValueByProp} from "@/util/util";
    import TesterDetail from "./TesterDetail";
    import {applicantlist,onsiteTypelist,processStatuslist} from "@/const/dict/commondict";
    export default{
        data(){
            return{
                resultOpen:false,
                loading:false,
                crowdtype:'',//类型
                id:'',//众包id
                applicantdataList:[],//竞标者名单
                total:'',pageNum:1,pageSize:10,
                task:{},//任务详情
                company:{},//公司信息
                publisher:{},//
                onsiteTypelist,//驻场需求
                applicantlist,//竞标者要求
                processStatuslist,//任务状态
            }
        },
        components: {CrowdsourceTask,TesterDetail},
        computed:{
            ...mapGetters(['testtypelist','feescopelist','token','userinform'])
        },
        mounted(){
            this.id=this.$route.query.id;
            this.crowdtype=this.$route.query.type;
            if(this.crowdtype=='myApply'){
                getApply(this.id).then(response => {
                    this.task = response.data;
                    this.task.status=this.task.status+''
                });
            }else{
                // 我发布的/我应征成功的  获取公司信息company
                getById(this.id).then(response => {
                    if (response.task != null)
                        this.task = response.task;
                    if (response.company != null)
                        this.company = response.company;
                    if (response.publisher != null)
                        this.publisher = response.publisher;
                }).catch((err)=>{
                })
            }
             if(this.id){
                this.getmenber()
             }
            
        },
        methods:{
            findByvalue,
            findLabelValueByProp,
            // 竞标者名单
            getmenber(){
                getApplicant(this.id).then(response => {
                    this.applicantdataList = response.data;
                })
            },
            backroute(){                
                this.$router.go(-1)
            },
            //竞标者名单选中
            assignTester(userId) {
                this.$confirm("确认要将众包任务指定给该测试者吗?").then(() => {
                    let param = {};
                    param.testerId = userId;
                    param.taskId = this.task.task_id;
                    assignTester(param).then(response => {
                        this.applicantList = response.data;
                        this.task.process_status = response.task.processStatus;
                        this.getmenber()
                    })
                })
            },
            //竞标者名单查看详情
            viewTesterDetail(userId) {
                this.userId = userId;
                this.$refs.testerDetail.viewDetail(userId);
            },
            // 修改重新发布
            publishTask(){
                this.$refs.crowdsourceTask.openDialog(this.task);
            },
            //关闭测试者详情 
            closeDialog(isFresh) {
                if (isFresh) {
                    // getApplicant(this.id).then(response => {
                    //     this.applicantList = response.data;
                    // })
                    this.getmenber()
                    getById(this.id).then(response => {
                        this.task = response.task;
                        this.$refs.taskInfo.setTask(this.task);
                    })
                }
            },
            
            //当前页码
            handleCurrentChange(val) {
                this.pageNum=val;
                this.getList();
            },
        },
    }
</script>
<style scoped>
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .backbtn>>>.el-button{
        width: 80px;
        height: 36px;
        background:#0066EB;
        color:#FFFFFF;
        line-height:35px;
        padding:0 15px;
    }
    .crowdnum>>>.el-divider--horizontal{
        margin:13px 0;
    }
    .taskd{
        color: #4D4D4D;
        display:flex;
        align-items: center;
    }
    .taskd p{
        margin:0;
        text-align: left;
        font-size:14px;
    }
    .taskd p:nth-child(1){
        font-weight: bold;    
        width:100px;  
    }
    .taskd p:nth-child(2){
         width:220px;
    }
    .crowdnum>>>.el-table th{
        background-color:#F7F7F7;
        color:#0e0c0c;
        text-align:center;
    }
    .crowdnum>>>.el-table td{
        /* text-align:center; */
        background-color:#FAF9F9;
        height:60px;
        color:#666666;
    }
    .crowdnum>>>.el-table--border th{
        border-right:#F7F7F7
    }
   
</style>