<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-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="我发布的任务" name="myPublish"></el-tab-pane>
                    <el-tab-pane label="等待审核" name="myApply"></el-tab-pane>
                </el-tabs>
                <div class="fabubtn" v-if="userinform.companyStatus == 2" @click="fabuFn">发布任务</div>
                <!-- <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 v-if="scope.row.price == 0">面议</span>
                            <span v-else>￥{{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,'dictValue', 'dictLabel')}}</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 =='myPublish'" label="任务状态" align="center" key="3" prop="processStatus"  :show-overflow-tooltip="true" width="180px">
                        <template slot-scope="scope" >
                            <p v-if="scope.row.processStatus" style="margin:0" class="tagcls"> 
                                <el-tag :color="scope.row.processStatus==2?'#fc5c1d':''" :type="scope.row.processStatus==0?'warning':scope.row.processStatus==1?'primary':scope.row.processStatus==3?'danger':'success'" effect="dark" 
                                    :style="scope.row.processStatus==2?'border:1px solid #fc5c1d;cursor:pointer':'cursor:pointer'">{{findByvalue(processStatuslist,parseInt(scope.row.processStatus))}}</el-tag>
                            </p>
                            <p v-else>
                                暂无
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="crowdmol!='myPublish'" 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"  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"  style="cursor:pointer">审核通过</el-tag>
                            <el-tag v-else-if="scope.row.status == 2" type="danger" effect="dark"  style="cursor:pointer">审核不通过</el-tag>
                            <el-tag v-else-if="scope.row.status == 3" type="info" effect="dark"  style="cursor:pointer">草稿</el-tag>
                        </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" width="260">
                        <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==5 || scope.row.processStatus==6 ||scope.row.processStatus == 7))"
                                @click="publishTask(scope.row)" >重新发布
                            </el-button>
                            <el-button size="mini" type="text" icon="el-icon-edit"
                                v-if="(crowdmol=='myApply' && scope.row.status==3) ||((crowdmol=='myPublish') && (scope.row.processStatus==5 || scope.row.processStatus==6 ||scope.row.processStatus == 7))"
                                @click="publishTask(scope.row)" >去编辑
                            </el-button>
                            <router-link v-if="crowdmol=='myApply' && scope.row.status!=3"  :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>
                            <!-- <el-button style="margin-left: 10px;" v-if="crowdmol=='myPublish'&&scope.row.processStatus==2"  @click="openresult(scope.row)"  size="mini" type="text" icon="el-icon-download">
                                验收实施结果
                            </el-button> -->
                            <!-- 多人 -->
                            <el-button @click="goDetail(scope.row.taskId)" v-if="crowdmol=='myPublish' && scope.row.processStatus == 4 && scope.row.needPerson > 1&& scope.row.needPerson != scope.row.commentCount"  size="mini" type="text" style="margin-left:10px">去评价
                            </el-button>
                            <!-- 单人 -->
                            <el-button @click="oneReview(scope.row.taskId)" v-if="crowdmol=='myPublish' && scope.row.processStatus == 4 && scope.row.needPerson == 1 && scope.row.needPerson != scope.row.commentCount"  size="mini" type="text" style="margin-left:10px">去评价
                            </el-button>
                        </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>
                <el-dialog title="验收实施结果" :visible.sync="resultOpen" width="600px"  :close-on-click-modal="false" append-to-body class="tooldialog" @close="resultOpen = false">
                    <el-divider style="margin-bottom:10px"></el-divider>
                    <!--<div style="display:flex;margin-left:30px;">
                        <p style="font-weight:bold;margin-right:20px;color:#333333;">工具名称</p>
                        <p>{{currentToolName}}</p>
                    </div>
                    <div style="display:flex;margin-left:30px;">
                        <p style="font-weight:bold;margin-right:20px;color:#333333;">任务名称</p>
                        <p>{{currentTaskName}}</p>
                    </div> -->
            
                    <div v-if="currenttsk&&currenttsk.resultAttach" style="text-align:left;margin-top:20px" @click="downloadFile()">   
                        <el-button icon='el-icon-download' style="background: #0066EB;color:#FFFFFF">下载实施结果查看</el-button>
                    </div>
                    <div style="display: flex;margin-top: 20px;align-items: center;">
                        <p style="margin-right:10px">验收是否通过</p>
                        <el-select v-model="ispass">
                            <el-option label="通过" value="3">通过</el-option>
                            <el-option label="不通过" value='8'>不通过</el-option>
                        </el-select>
                    </div>
                    <div style="display:flex;margin-top:30px;justify-content: center;">
                       <el-button style="background: #0066EB;color:#FFFFFF" @click="querepeo">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <crowdsource-task  v-show="(crowdmol=='myApply' || crowdmol=='myPublish') && task != null" ref="crowdsourceTask"></crowdsource-task>
        <!-- <crowdsource-task  v-show="crowdmol=='myApply' && task != null" ref="crowdsourceTask"></crowdsource-task> -->
        <reviewDialogVue ref="reviewDialogVuer" @refresh="refreshFn"/>
    </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,checkupTester} from "@/api/crowdsource/crowdsource";
    import CrowdsourceTask from "../../common/CrowdsourceTask";
    import mixin from '@/mixin/index.js'
    import reviewDialogVue from '@/page/common/reviewDialog.vue'
    export default{
        mixins: [mixin],
        data(){
            return{
                activeName: 'myPublish',
                resultOpen:false,
                crowdmol:'myPublish',
                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
                },
                ispass:'',
                currenttsk:null,
                isdown:false
            }
        },
        computed: {
            ...mapGetters(['testtypelist','feescopelist','companyStatus','testerStatus','userinform'])
        },
        components:{CrowdsourceTask, reviewDialogVue},
        watch:{
            // $route: {
            //     handler(oldval,newval) {
            //         let tabtype=oldval.query.tabtype
            //         if(tabtype&&tabtype==1){
            //             this.crowdmol='myApply'
            //             this.listMyApply();
            //         }
            //        },
            //     immediate: true,
            // }
        },
        mounted(){
            // this.companyStatus = store.getters.companyStatus;
            // this.testerStatus = store.getters.testerStatus;
            // let tabtype=this.$route.query.tabtype;
            // if(tabtype&&tabtype==1){
            //     this.crowdmol='myApply'
            //     this.listMyApply();
            // }
            // 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('myPublish')
        },
        methods:{
            goDetail(id) {
                this.$router.push({
                    path: '/console/currentcrowd',
                    query: {
                        id: id,
                        type: 'myPublish',
                    }
                })
            },
            refreshFn() {
                this.listMyPublish()
            },
            oneReview(id) {
                this.$refs.reviewDialogVuer.dialogVisible = true
                this.$refs.reviewDialogVuer.taskId = id
                this.$refs.reviewDialogVuer.appraisee = 'one'
            },
            findByvalue, 
            findLabelValueByProp,
            handleClick(tab) {
                this.crowdmol = tab.name
                this.showDataTypeChage(tab.name)
                
            },
            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.crowdData.forEach(item=>{
                        item.processStatus=item.processStatus+''
                    })
                    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.$router.push(`/console/edittasks?applyId=${task.applyId}`)
                // this.$refs.crowdsourceTask.openDialog(task);
            },
            //下载测试报告
            downloadFile() {
                if(this.currenttsk.resultAttach&&this.currenttsk.resultAttach.indexOf('https://www.keyitest.cn')==0){
                    window.location.href=this.currenttsk.resultAttach
                    this.isdown=true
                }
                // const loading = this.$loading({
                //     lock: true,
                //     text: '正在下载，请稍后...',
                //     spinner: 'el-icon-loading',
                //     background: 'rgba(0, 0, 0, 0.7)'
                // });
                // downloadHttp(fileid)
                // let fileUrl=`http://test.console.lovecode.cc/prod-api/common/download/fast?filePath=${fileid}&delete=false`         
                // 
                // downloadFast(fileid,loading);
            },
            openresult(row){
                this.currenttsk=row
                this.resultOpen=true
            },
             // 验收实施结果
             querepeo(){
                // if(!this.isdown){
                //     this.$message.warning('请先查看验收结果')
                //     return;
                // }
                let data={
                    taskId:this.currenttsk.taskId,
                    testerId:this.userinform.userId,
                    processStatus:parseInt(this.ispass) 
                }
                // return;
                checkupTester(data).then(res=>{
                    this.resultOpen=false
                    this.isdown=false
                    this.listMyPublish();
                    this.$message.success('验收完成')
                })
            },
            //重置
            resetQuery() {
                // this.dateRange = [];
                this.resetForm("queryForm");
                this.queryParams.pageNum=1
                this.showDataTypeChage(this.crowdmol)
                // this.listAllTask();
            },
            fabuFn() {
                this.$router.push('/console/edittasksFB')
            }
        },

    }
</script>
<style scoped>
.fabubtn {
    position: absolute;
    z-index: 98;
    right: 10px;
    top: 6px;
    height: 30px;
    padding: 0 20px;
    background: #FC5C1D;
    -webkit-box-shadow: 0px 1px 13px 0px rgba(12, 54, 110, 0.31);
    box-shadow: 0px 1px 13px 0px rgba(12, 54, 110, 0.31);
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}
    .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:#666666;
        text-align:center;
    }
    .crowdnum>>>.el-table td{
        /* text-align:center; */
        background-color:#FFFFFF;
        height:60px;
        color:#333333;
    }
    .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;
    }
    .tooldialog>>>.el-divider--horizontal{
        margin:-20px 0 10px 0;
    }
    .tooldialog>>>.el-dialog__title{
        font-weight:bold;
        color: #0969bd
    }
    .tagcls>>>.el-tag--small{
        width:65px;
    }
    .el-tag{
        width:80px!important;
    }
    .crowdnum>>>.el-tabs--border-card{
        background:transparent;
        border:none;
        box-shadow:none;
    }
    .crowdnum>>>.el-tabs--border-card>.el-tabs__header .el-tabs__item{
        border:none;
        color:#1A1A1A;
    }
    .crowdnum>>>.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
        color: #0066EB;
        /* font-size: 16px; */
    }
    .crowdnum>>>.el-tabs--border-card>.el-tabs__content{
        padding: 0 0;
        overflow: unset;
    }
    .crowdnum>>>.el-tabs--border-card>.el-tabs__header{
        border:none;
        background-color:#F7F7F7;
        /* color:#1A1A1A */
    }
    .crowdnum>>>.el-tabs__item {
        height: 45px;
        line-height: 45px;
    }
    .crowdnum {
        position: relative;
    }
</style>