<template>
    <div :style="{background:mydetails?'#FFFFFF':'#F4F5FA'}">
        <div :class="mydetails?'mycrowdbig':'crowdbig'">
            <div style="display:flex;align-items:center;margin:20px 0">
                <div style="display:flex;align-items:center;width:150px">   
                    <div class="dvied"></div>
                    <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">任务详情</div>
                </div>
                <el-divider></el-divider>
                <div class="release" @click="applyfor">我要竞标任务</div>
            </div>
            <div style="display:flex;justify-content:space-between;height:750px" >          
                <div style="background: #FFFFFF;box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);padding:30px 40px;width:730px;">   
                    <div style="display:flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px">   
                        <div>   
                            <p class="crofinf">基本详情</p>
                            <img style="position: relative;" src="/assets/crowd/lanx.png" alt="">
                        </div>
                    </div>
                    <div class="taskname">
                        <p style="margin:0 15px 0 0">任务名称</p>
                        <el-divider direction="vertical"></el-divider>
                        <p style="margin:0 0 0 10px">{{task.project_name}}</p>        	       
                    </div>
                    <div class="taskname">
                        <p style="margin:0 15px 0 0">发布日期</p>	       
                        <el-divider direction="vertical"></el-divider>
                        <p v-if="task.create_time" style="margin:0 150px 0 10px;width:150px"> {{task.create_time.slice(0,10)}}</p>   
                        <p style="width:150px">金额 </p>
                        <p style="font-weight: bold;color: #E84C3D;font-size:18px;margin-left:15px">￥{{task.price}}</p>     	       
                    </div>
                    <div class="taskname">
                        <p style="margin:0 15px 0 0">发布有效期</p>       
                        <el-divider direction="vertical"></el-divider>
                        <p style="margin:0 0 0 10px">{{task.valid_days}}天</p>        	       
                    </div>
                    <div class="taskname">
                        <p style="margin:0 15px 0 0">项目工期</p>        
                        <el-divider direction="vertical"></el-divider>
                        <p style="margin:0 0 0 10px">{{task.period}}天</p>        	       
                    </div>
                    <div class="taskname" >
                        <p style="margin:0 15px 0 0">竞标者总数</p>        
                        <el-divider direction="vertical"></el-divider>
                        <p style="margin:0 0 0 10px">{{(task.company_app_count + task.personal_app_count) == 20 ? "已满":(task.company_app_count + task.personal_app_count) +'人' }}</p>        	       
                    </div>
                    <div class="taskname" >
                        <p style="margin:0 15px 0 0">测试类型</p>                
                        <el-divider direction="vertical"></el-divider>
                        <p style="margin:0 0 0 10px">{{findLabelValueByProp(testtypelist,task.test_type,'dictValue','dictLabel')}}</p>        	       
                    </div>
                    <div style="display:flex;align-items:center;text-align:center;justify-content:center;margin:20px p">   
                        <div>   
                            <p class="crofinf">任务状态</p>
                            <img style="position: relative;" src="/assets/crowd/lanx.png" alt="">
                        </div>
                    </div>
                    <div class="taskname" >
                        <p style="margin:0 30px 0 0">任务状态</p>                
                        <!-- <el-divider direction="vertical"></el-divider> task.processStatus processStatuslist-->
                        <!-- <div class="processclass" style="background: #E84C3D;color:#FFFFFF;padding:10px">{{findByvalue(processStatuslist,task.processStatus)}}</div> -->
                        <el-tag :type="task.task_status==0?'primary':(task.task_status==1 || task.task_status==3)?'success':'danger'" effect="dark" 
                            style="cursor:pointer">{{findByvalue(processStatuslist,parseInt(task.task_status))}}</el-tag>
                    </div>
                    <div style="display:flex;align-items:center;text-align:center;justify-content:center;margin:20px 0">   
                        <div>   
                            <p class="crofinf">任务信息</p>
                            <img style="position: relative;" src="/assets/crowd/lanx.png" alt="">
                        </div>
                    </div>
                    <div style="background:#F4F5FA;display:flex;">
                        <div class="taskname" style="margin:0;width:330px">
                            <p style="margin:0 15px 0 0">竞标者要求</p>	                   
                            <el-divider direction="vertical"></el-divider>
                            <p style="margin:0 0px 0 10px">{{findByvalue(applicantlist,task.applicant_type)}}</p>        	       
                        </div>
                        <div class="taskname" style="margin:0">
                            <p style="margin:0 15px 0 0">技能要求</p>    	    	                      
                            <el-divider direction="vertical"></el-divider>
                            <p style="margin:0 0 0 10px">{{task.tech_need}}</p>        	       
                        </div>
                    </div>
                    <div style="background:#F4F5FA;display:flex;margin:12px 0">
                        <div class="taskname" style="margin:0;width:330px">
                            <p style="margin:0 15px 0 0">驻场要求</p>   	        	                   
                            <el-divider direction="vertical"></el-divider>
                            <p style="margin:0 0px 0 10px">{{findByvalue(onsiteTypelist,task.onsite_type)}}</p>        	       
                        </div>
                        <div class="taskname" style="margin:0">
                            <p style="margin:0 15px 0 0">地域要求</p>  	         	    	                      
                            <el-divider direction="vertical"></el-divider>
                            <p style="margin:0 0 0 10px">{{task.area}}</p>        	       
                        </div>
                    </div>
                    <div style="display:flex;align-items:center;text-align:center;justify-content:center;margin:20px 0">   
                        <div>   
                            <p class="crofinf">详细介绍 </p>
                            <img style="position: relative;" src="/assets/crowd/lanx.png" alt="">
                        </div>
                    </div>
                    <div>{{task.project_desc}}</div>
                    <!-- p 备注信息   {{task.remark}} -->
                </div>
                <div style="width:360px;">
                    <div style="background: #E6ECF5;text-align:center;font-weight: bold;color: #1A1A1A;font-size:20px;padding:10px 0">
                        ——发布者信息——
                    </div>
                    <div style="background: #FFFFFF;box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);text-align:center;padding:20px 20px;height:664px">
                        <img style="width:180px;object-fit:contain;margin:30px 0" :src="task.icon?'https://www.keyitest.cn/'+task.icon.substr(task.icon.indexOf('g')):'/assets/home/picture.png'" alt="">
                        <div style="display:flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px">   
                            <div>   
                                <p class="crofinf">公司名称</p>
                                <img style="position: relative;" src="/assets/crowd/lanx.png" alt="">
                            </div>
                        </div>
                        <p style="margin:35px 0"> {{task.company_name}}</p>
                        <div style="display:flex;align-items:center;text-align:center;justify-content:center;margin-bottom:30px">   
                            <div>   
                                <p class="crofinf">公司简介</p>
                                <img style="position: relative;" src="/assets/crowd/lanx.png" alt="">
                            </div>
                        </div>
                        <div style="text-align:left;font-size:14px;line-height:2.3">{{task.company_desc}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {getById, claimTask} from "@/api/crowdsource/crowdsource";
    import {applicantlist,onsiteTypelist,processStatuslist} from "@/const/dict/commondict";
    import {findByvalue, findLabelValueByProp} from "@/util/util";
    export default{
        props:['mydetails'],
        data(){
            return{
                task:{},//基本信息
                // company:{},//发布者信息
                publisher:{},
                onsiteTypelist,//驻场需求
                applicantlist,//竞标者要求
                processStatuslist,//任务状态
            }
        },
        computed:{
            ...mapGetters(['testtypelist','feescopelist','userinform','userId'])
        },
        mounted(){
            let id=this.$route.query.id;
            getById(id).then(response => {
                // console.log('任务信息：',response)
                this.task = response.task;
                // this.company = response.company;
            })
        },
        methods:{
            findByvalue, 
            findLabelValueByProp,
            applyfor() {
                // console.log('this.task',this.task,this.userId)
                if (parseInt(this.userId) == this.task.publisher_id) {
                    this.$alert("您是发布者，无法竞标自己发布的任务。")
                    return;
                }
                    this.user = this.userinform;
                    if (this.user.testerStatus != 2) {//不是测试者
                    this.$confirm('您不是测试者用户不能竞标众包任务，点确定将前往个人中心进行测试者认证。', '提示', 
                        {type: 'warning'}).then(() => {
                            this.$router.push(`/console/profile`)
                        });
                    } else {
                        if (this.task.applicant_type != 2){//2时个人测试者或企业测试都都可以
                            if (this.task.applicant_type == 0) { //要求个人测试者
                            if (this.user.companyStatus != 0) {
                                this.$alert("您是认证测试公司或正在申请成为认证测试公司，无法认证该任务，该任务只允许个人测试者竞标。")
                                return ;
                            }
                            } else  {//要求企业测试者
                            if (this.user.companyStatus != 2) {
                                this.$alert("对不起，您是个人测试者，该任务只允许认证测试公司竞标。")
                                return ;
                            }
                            }
                        }
                        this.$confirm("确定要竞标此众包任务吗？").then(()=>{
                            claimTask(this.task.task_id).then(response => {
                                if (response.data == 0) {
                                    this.$alert("竞标任务成功，请等待竞标结果通知。")
                                } else  if (response.data == 1){
                                    this.$alert("该任务竞标者人数已满。")
                                } else  if (response.data == 2){
                                    this.$alert("您已竞标了该任务，请等待竞标结果通知。")
                                }
                            })
                        })
                    }
            
                },
        },

    }
</script>
<style scoped>
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .release{
        width: 159px;
        height: 40px;
        margin-left:20px;
        background: #FC5C1D;
        box-shadow: 0px 1px 13px 0px rgba(12, 54, 110, 0.31);
        border-radius:4px;
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF; 
        line-height:40px;
        text-align:center;
        cursor:pointer;      
    }
    .crofinf{
        font-weight: bold;
        color: #333333;
        font-size:16px;
        /* position:absolute; */
        margin: 0px 6px -18px 0px;
    }
    .taskname{
        background:#F4F5FA;
        padding:10px 20px;
        display:flex;
        align-items:center;
        margin:12px 0;
        height:20px;
        font-size:14px;
    }
    .taskname p:nth-child(1){
        width:85px;
    }
    .crowdbig{
        width:1200px;
        margin:0px auto;padding:30px 0
    }
    .mycrowdbig{
       width:1200px;
       margin:0px auto;padding:30px 0 
    }
    @media screen and (max-width: 1500px) {
        .crowdbig{
            width:1200px;margin:0px auto;
            padding:30px 0
        }
        .mycrowdbig{
            width:1000px;
            margin:0px auto;padding:30px 0 
        }
    }
    @media screen and (min-width:1500px) and (max-width:1560px){
        .crowdbig{
            width:1200px;margin:0px auto;
            padding:30px 0
        }
        .mycrowdbig{
            width:1100px;
            margin:0px auto;padding:30px 0 
        }
    }
</style>