<template>
    <div style="padding-bottom:50px">
        <!-- <div style="display:flex;align-items:center">   
            <div class="dvied"></div>
            <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">我的众包</div>
        </div> -->
        <div style="background:#FFFFFF;border-radius:4px;">
            <div class="crowdnum">
                <el-radio-group v-model="crowdmol" @change="showDataTypeChage" fill='#0066EB'> 
                    <el-radio-button label="myClaim" v-if="myClaimShow"> 
                        <div v-if="crowdmol=='myClaim'" style="display:flex;align-items:center">
                            <img src="/assets/personal/chenggong.png" alt=""> 
                            <span style="margin-left:6px;color:#FFFFFF">我竞标成功的任务</span>
                        </div>
                        <div v-else style="display:flex;align-items:center">
                            <img  src="/assets/personal/chenggong 1.png" alt="">
                            <span style="margin-left:6px;color:#4d4d4d">我竞标成功的任务</span>
                        </div>   
                    </el-radio-button>
                    <el-radio-button label="myPublish">
                        <div v-if="crowdmol=='myPublish'" style="display:flex;align-items:center">
                            <img src="/assets/personal/fabu1.png" alt=""> 
                            <span style="margin-left:6px;color:#FFFFFF">我发布的任务</span>
                        </div>
                        <div v-else style="display:flex;align-items:center">
                            <img  src="/assets/personal/fabu.png" alt=""> 
                            <span style="margin-left:6px;color:#4d4d4d">我发布的任务</span>
                        </div>    
                    </el-radio-button>        
                    <el-radio-button label="myApply">
                        <div v-if="crowdmol=='myApply'" style="display:flex;align-items:center">
                            <img  src="/assets/personal/ceshishenqing 1.png" alt=""> 
                            <span style="margin-left:6px;color:#FFFFFF">众包发布申请</span>   
                        </div>
                        <div v-else style="display:flex;align-items:center"> 
                             <img src="/assets/personal/ceshishenqing.png" alt="">
                            <span style="margin-left:6px;color:#4d4d4d">众包发布申请</span>
                        </div>   
                    </el-radio-button>        
                    <!-- <el-radio-button label="tobeExpired">
                        <img v-if="crowdmol=='tobeExpired'" src="/assets/personal/ceshishenqing 1.png" alt=""> 
                        <img v-else src="/assets/personal/ceshishenqing.png" alt=""> 
                        <span style="margin-left:6px">即将到期的任务</span>    
                    </el-radio-button>        
                    <el-radio-button label="allTask">
                        <img v-if="crowdmol=='allTask'" src="/assets/personal/ceshishenqing 1.png" alt=""> 
                        <img v-else src="/assets/personal/ceshishenqing.png" alt=""> 
                        <span style="margin-left:6px">所有任务</span>    
                    </el-radio-button>      -->
                    <!--审核页 <crowdsource-audit ref="crowdsourceAudit"  @closeDialog="closeDialog" ></crowdsource-audit> -->
                </el-radio-group>
                <el-form v-if="crowdmol=='allTask'" :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="baseinfo" style="margin-top:30px">
                    <el-form-item label="任务状态" prop="processStatus">
                        <el-select v-model="queryParams.processStatus">
                        <el-option label="请选择" value="">请选择</el-option>
                        <el-option label="应征中" value=0>竞标中</el-option>
                        <el-option label="测试中" value=1>测试中</el-option>
                        <el-option label="没有竞标者，过期下架" value=4>没有竞标者，过期下架</el-option>
                        <el-option label="未指定测试者，过期下架" value=5>未指定测试者，过期下架</el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button  type="primary" icon="el-icon-search"  size="small" @click="showDataTypeChage('allTask')">搜索</el-button>
                        <el-button style="background: #F2A51A;" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table v-loading='loading' :data="crowdData" style="margin-top:30px" >
                    <el-table-column label="序号" width="100px" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="任务ID"  v-if="crowdmol=='allTask'" width="90" align="center" key="taskId" prop="taskId"/>
                    <el-table-column label="发布时间" align="center" key="createTime" prop="createTime" >
                        <template slot-scope="scope">
                        <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime).toString().split(" ")[0]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目名称" align="center" key="projectName" prop="projectName" :show-overflow-tooltip="true" width="260px"/>
                    <el-table-column label="金额" align="center" key="price" prop="price"  :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>￥{{scope.row.price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="任务类型" align="center" key="testType"  prop="testType" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{findLabelValueByProp(tasktypelist,scope.row.testType,'id','name')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目工期" align="center" key="period" prop="period"  :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.period}}天</span>
                        </template>
                    </el-table-column>
                    <!-- -->
                    <el-table-column  v-if="crowdmol=='myClaim' || crowdmol=='myPublish'|| crowdmol=='tobeExpired'" 
                         label="截止日期"  align="center" key="expireTime" prop="expireTime" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-if="scope.row.expireTime">{{ parseTime(scope.row.expireTime).toString().split(" ")[0]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="crowdmol=='myApply'" label="审核状态" align="center" key="1" prop="status"  :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.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="scope.row.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>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="crowdmol !='myApply'" label="任务状态" align="center" key="3" prop="processStatus"  :show-overflow-tooltip="true" width="180px">
                        <template slot-scope="scope" >
                            <p v-if="scope.row.processStatus"> 
                                <el-tag :type="scope.row.processStatus==0?'primary':(scope.row.processStatus==1 || scope.row.processStatus==3)?'success':'danger'" effect="dark" 
                                    style="cursor:pointer">{{findByvalue(processStatuslist,scope.row.processStatus)}}</el-tag>
                            </p>
                            <p v-else>
                                暂无
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="crowdmol !='myApply'" label="竞标者总数" align="center" key="appCount" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.personalAppCount + scope.row.companyAppCount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" align="center"  class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit"
                                v-if="(crowdmol=='myApply' && scope.row.status==2) ||((crowdmol=='myPublish') && (scope.row.processStatus==4 || scope.row.processStatus==5 || scope.row.processStatus==6 ||scope.row.processStatus == 7))"
                                @click="publishTask(scope.row)" >重新发布
                            </el-button>
                            <router-link v-if="crowdmol=='myApply'"  :to="{path:'/console/currentcrowd',query:{id:scope.row.applyId,type:crowdmol}}" class="link-type">
                                <el-button size="mini" type="text" icon="el-icon-key" >查看详情
                                </el-button>
                            </router-link>
                            <router-link v-if="crowdmol=='myPublish' || crowdmol=='myClaim'"  :to="{path:'/console/currentcrowd',query:{id:scope.row.taskId,type:crowdmol}}" class="link-type">
                                <el-button size="mini" type="text" icon="el-icon-key" >查看详情
                                </el-button>
                            </router-link>
                            <router-link v-if="crowdmol=='tobeExpired' || crowdmol=='allTask'" :to="{path:'/console/currentcrowd',query:{id:scope.row.applyId,type:crowdmol}}" class="link-type">
                                <el-button size="mini"  type="text" icon="el-icon-key" >查看详情
                                </el-button>
                            </router-link>
                        </template>
                    </el-table-column>
                </el-table>
                <!--  :current-page="currentPage"    -->
                <div v-if="total>10"  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>
        </div>
        <crowdsource-task  v-show="crowdmol=='myApply' && task != null" ref="crowdsourceTask"></crowdsource-task>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {findByvalue, findLabelValueByProp} from "@/util/util";
    import {applicantlist,onsiteTypelist,processStatuslist} from "@/const/dict/commondict";
    import {crowdlist,homecrowdlist,myClaim, myApply, myPublish} from "@/api/crowdsource/crowdsource";
    import CrowdsourceTask from "../../common/CrowdsourceTask";  
    export default{
        data(){
            return{
                tasktypelist:[{name:'静态测试',id:'static'},{name:'功能测试',id:'function'},{name:'性能测试',id:'performance'},{name:'安全测试',id:'security'},
                {name:'配置项测试',id:'configuration'},{name:'可靠性测试',id:'reliability'}, {name:'研发任务',id:'development'},{name:'用人任务',id:'outsource'},{name:'其他',id:'other'}],
                crowdmol:'myApply',
                crowdData:[],
                task:null,
                // currentPage:'1',
                loading: false,
                myClaimShow: true,
                // companyStatus: 0,
                // testerStatus: 0,
                processStatuslist,//任务状态
                // 总条数
                total: 0,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    taskStatus:undefined,
                    processStatus:undefined
                }
            }
        },
        computed: {
            ...mapGetters(['testtypelist','feescopelist','companyStatus','testerStatus','userinform'])
        },
        components:{CrowdsourceTask},
        mounted(){
            // this.companyStatus = store.getters.companyStatus;
            // this.testerStatus = store.getters.testerStatus;
            if (this.companyStatus == 2 && this.testerStatus !=2) {
                this.myClaimShow = false;
                // if (store.getters.activeName == 'myPublish' || store.getters.activeName == 'myClaim' || store.getters.activeName == 'myApply')
                // this.activeName = store.getters.activeName;
                // else
                // this.activeName = 'myPublish';
            } else {
                // if (store.getters.activeName == 'myPublish' || store.getters.activeName == 'myClaim' || store.getters.activeName == 'myApply')
                // this.activeName = store.getters.activeName;
            }
            this.showDataTypeChage('myApply')
        },
        methods:{
            findByvalue, 
            findLabelValueByProp,
            showDataTypeChage(val){
                if (val == 'myApply'){
                    this.listMyApply();
                }
                else if (val == 'myPublish'){
                    this.listMyPublish();
                }
                else if (val == 'myClaim'){
                    this.listMyClaim();
                }
                else if (val == 'tobeExpired'){
                    this.listTobeExpired();
                }
                else if (val == 'allTask'){
                    this.listAllTask();
                }
            },
            //众包发布申请
            listMyApply() {
                this.loading = true;
                myApply(this.queryParams).then(response => {
                    this.crowdData = response.rows;
                    this.total = response.total;
                    this.loading = false;
                })
            },
            // 我发布的任务
            listMyPublish() {
                this.loading = true;
                myPublish(this.queryParams).then(response => {
                    this.crowdData = response.rows;
                    this.total = response.total;
                    this.loading = false;
                })
            },
            //我应征成功的任务
            listMyClaim() {
                this.loading = true;
                // 
                myClaim(this.queryParams,this.userinform.userId).then(response => {
                    this.crowdData = response.rows;
                    this.total = response.total;
                    this.loading = false;
                })
            },
            // 即将到期的任务
            listTobeExpired(){
                this.loading = true;
                this.queryParams.queryType = 1;
                homecrowdlist(this.queryParams).then(response => {
                    this.crowdData = response.rows;
                    this.total = response.total;
                    this.loading = false;
                })
            },
            // 所有任务
            listAllTask(){
                this.loading = true;
                this.queryParams.queryType = 2;
                homecrowdlist(this.queryParams).then(response => {
                    this.crowdData = response.rows;
                    this.total = response.total;
                    this.loading = false;
                })
            },
            //当前页码
            handleCurrentChange(val) {
                this.queryParams.pageNum=val;
                this.showDataTypeChage(this.crowdmol)
            },
            // 重新发布
            publishTask(task) {
                this.task = task;
                this.$refs.crowdsourceTask.openDialog(task);
            },
            //重置
            resetQuery() {
                // this.dateRange = [];
                this.resetForm("queryForm");
                this.queryParams.pageNum=1
                this.showDataTypeChage(this.crowdmol)
                // this.listAllTask();
            }
        },

    }
</script>
<style scoped>
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .crowdnum>>>.el-radio-button__inner{
        background:#ebebed;
        border:none;
        margin-right:20px;
        color: #4D4D4D;
        display:flex;
        align-items: center;
        /* font-weight:bold; */
    }
    .crowdnum>>>.el-radio-button:first-child .el-radio-button__inner{
        border-radius:0;
    }
    .crowdnum>>>.el-radio-button:last-child .el-radio-button__inner{
        border-radius:0;
    }
    .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
    }
    .baseinfo>>>.el-button{
        width:90px;
        height:30px;
        background: #0066EB;
        border-radius: 4px;
        margin-left:20px;
        color:#FFFFFF;
        margin-top:5px;
        line-height:9px;
    }
</style>