<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="crowdmol" type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="竞标中" name="competitive"></el-tab-pane>
                    <el-tab-pane label="实施中" name="effect"></el-tab-pane>
                    <el-tab-pane label="已完成" name="complete"></el-tab-pane>
                </el-tabs>
                <!-- <el-radio-group v-model="crowdmol" @change="showDataTypeChage" fill='#0066EB'> 
                    <el-radio-button label="competitive" v-if="competitiveShow"> 
                        <div v-if="crowdmol=='competitive'" 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="effect">
                        <div v-if="crowdmol=='effect'" 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="complete">
                        <div v-if="crowdmol=='complete'" 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-group> -->
                <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"   width="90" align="center" key="task_id" prop="task_id"/> -->
                    <el-table-column label="竞标时间" align="center" key="create_time" prop="create_time" >
                        <template slot-scope="scope">
                        <span v-if="scope.row.create_time">{{ scope.row.create_time.slice(0,10)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目名称" align="center" key="project_name" prop="project_name" :show-overflow-tooltip="true" width="220px"/>
                    <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="test_type"  prop="test_type" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{findLabelValueByProp(tasktypelist,scope.row.test_type,'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 label="技能要求" align="center" key="tech_need" prop="tech_need" :show-overflow-tooltip="true" />
                    <el-table-column  label="任务状态" align="center" key="1" prop="process_status"  :show-overflow-tooltip="true">
                    <!-- <el-table-column  :label="crowdmol=='complete'?'状态':'审核状态'" align="center" key="1" prop="process_status"  :show-overflow-tooltip="true"> -->
                        <template slot-scope="scope">
                            <div v-if="crowdmol=='competitive'">
                                <el-tag  type="warning" effect="dark" size="small" style="width:68px;padding-left: 12px;padding-right: 12px;cursor:pointer">竞标中</el-tag>
                            </div>
                            <div v-if="crowdmol=='effect'">
                                <el-tag v-if="scope.row.status == 1" type="primary" effect="dark" size="small" style="cursor:pointer">实施中</el-tag>
                                <el-tag v-if="scope.row.status == 3" type="danger"  effect="dark" size="small" style="cursor:pointer">待验收</el-tag>
                                <el-tag v-if="scope.row.status == 4" type="warning"  effect="dark" size="small" style="cursor:pointer">待付款</el-tag>
                            </div>
                            <div v-if="crowdmol=='complete'">
                                <!-- <el-tag v-if="scope.row.task_status == 1 && scope.row.process_status == 4" type="danger" effect="dark" size="small" style="cursor:pointer">竞标失败</el-tag>
                                <el-tag v-else-if="scope.row.task_status == 2" type="success" effect="dark" size="small" style="cursor:pointer">已完成</el-tag> -->
                                <el-tag v-if="scope.row.status == 5" type="success" effect="dark" size="small" style="cursor:pointer">已完成</el-tag>
                                <el-tag v-if="scope.row.status == 2" type="danger" effect="dark" size="small" style="cursor:pointer">竞标失败</el-tag>
                                <el-tag v-if="scope.row.status == 6" type="danger" effect="dark" size="small" style="cursor:pointer">验收不通过</el-tag>
                            </div>
                            <!-- <el-tag v-if="scope.row.process_status == 0" type="warning" effect="dark" size="small" style="width:68px;padding-left: 12px;padding-right: 12px;cursor:pointer">竞标中</el-tag>
                            <el-tag v-else-if="scope.row.process_status == 2" type="danger"  effect="dark" size="small" style="cursor:pointer">待验收</el-tag>
                            <el-tag v-else-if="scope.row.process_status == 3" type="warning"  effect="dark" size="small" style="cursor:pointer">待付款</el-tag>
                            <el-tag v-else-if="scope.row.process_status == 4" type="success" effect="dark" size="small" style="cursor:pointer">已完成</el-tag>
                            <div v-else-if="scope.row.process_status == 1" >
                                <el-tag v-if="scope.row.status == 2" type="danger" effect="dark" size="small" style="cursor:pointer">竞标失败</el-tag>

                                <el-tag v-else type="primary" effect="dark" size="small" style="cursor:pointer">实施中</el-tag>
                            </div> -->
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" align="center"  class-name="small-padding fixed-width" width="220px">
                        <template slot-scope="scope">
                            <!-- <el-button size="mini" type="text" icon="el-icon-edit"
                                v-if="(crowdmol=='complete' && scope.row.status==2) ||((crowdmol=='effect') && (scope.row.process_status==4 || scope.row.process_status==5 || scope.row.process_status==6 ||scope.row.process_status == 7))"
                                @click="publishTask(scope.row)" >重新发布
                            </el-button> -->
                            <!-- <router-link v-if="crowdmol=='complete'"  :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   :to="{path:'/console/currentcrowd',query:{id:scope.row.task_id,type:'competitive'}}" class="link-type">
                                <el-button size="mini" type="text" icon="el-icon-key" >查看详情
                                </el-button>
                            </router-link>
                            <el-button  style="margin-left: 10px;" @click="openvidib(scope.row)"  v-if="crowdmol=='effect'&&scope.row.status==1" size="mini" type="text" icon="el-icon-upload2">
                                上传实施结果
                            </el-button>
                            <el-button  style="margin-left: 10px;" @click="goReview(scope.row)"  v-if="scope.row.status == 5 && scope.row.is_comment == 0" size="mini" type="text">
                                去评价
                            </el-button>
                            <!-- <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>
                <!-- <div v-if="crowdData.length>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="crowdData.length">
                    </el-pagination>
                </div> -->
                <el-dialog title="上传实施结果" :visible.sync="resultOpen" width="600px"  :close-on-click-modal="false" append-to-body class="tooldialog" @close="closecwc">
                    <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 style="text-align:left;margin-top:20px">   
                        <!-- @click="downloadFile(downloadUrl)" <el-button icon='el-icon-upload2' style="background: #0066EB;color:#FFFFFF">上传</el-button> -->
                        <nonimage-upload ref="nonimage"  v-model="resultAttach" imageType="pdf|doc|docx|zip|rar" :serverAddr="materialServerAddr" fileName="实施结果" :limit="1" @setImgPath='setImgPath'/>
                    </div>
                    <div style="text-align:center;margin-top:20px"> 
                        <el-button @click="querepeo" style="background: #0066EB;color:#FFFFFF">确定</el-button>
                    </div>
                </el-dialog>

                <!-- 评价弹窗 -->
            <reviewDialogVue ref="reviewDialogVuer" @refresh="refreshFn"/>
            </div>
        </div>
    </div>
</template>
<script>
    import {crowdlist,homecrowdlist,myClaim, myApply, myPublish,reportTester} from "@/api/crowdsource/crowdsource";
    import {applicantlist,onsiteTypelist,processStatuslist} from "@/const/dict/commondict";
    import {findByvalue, findLabelValueByProp} from "@/util/util";
    import {mapGetters} from "vuex";
    import NonimageUpload from "@/page/common/NonimageUpload";
    import mixin from '@/mixin/index.js'
    import reviewDialogVue from '@/page/common/reviewDialog.vue'
    export default {
        mixins: [mixin],
        components: {
            NonimageUpload,
            reviewDialogVue
        },
        data () {
            return {
                resultOpen:false,
                crowdmol:'competitive',
                allcrowdlist:[],
                crowdData:[],
                competitiveShow: true,
                loading: false,
                processStatuslist,//任务状态
                // 总条数
                total: 0,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize:999,
                    taskStatus:undefined,
                    processStatus:undefined
                },
                resultAttach:[],//实施结果
                materialServerAddr: "",
                currentask:'',
                basetarget: process.env.VUE_APP_BASE_TARGET,
            }
        },
        computed: {
            ...mapGetters(['testtypelist','feescopelist','companyStatus','testerStatus','userinform'])
        },
        mounted(){
            this.showDataTypeChage('competitive')
        },
        methods:{
            // 评价
            goReview(row) {
                this.$refs.reviewDialogVuer.dialogVisible = true
                this.$refs.reviewDialogVuer.taskId = row.task_id
            },
            // 刷新列表
            refreshFn() {
                this.crowdmol = 'competitive'
                this.listcompetitive()
            },
            findLabelValueByProp,
            //我应征成功的任务
            listcompetitive() {
                this.loading = true;
                myClaim(this.queryParams,this.userinform.userId).then(response => {
                    this.allcrowdlist = response.rows;
                    this.crowdData=this.allcrowdlist.filter(item=>item.status==0);
                    this.total = this.crowdData.length;
                    // this.total = response.total ;
                    this.loading = false;
                })
            },
            handleClick(tab) {
                this.showDataTypeChage(tab.name)
            },
            showDataTypeChage(val){
                if (val == 'competitive'){
                    this.listcompetitive();
                }
                else if (val == 'effect'){
                    // this.crowdData=this.allcrowdlist.filter(item=>(item.process_status==1||item.process_status==2||item.process_status==3)&&item.status==1);
                    this.crowdData=this.allcrowdlist.filter(item=>(item.status == 1 ||item.status == 3 ||item.status == 4))
                }
                else if (val == 'complete'){
                    this.crowdData=this.allcrowdlist.filter(item=>item.status==2 ||item.status==5||item.status==6);
                }
                else if (val == 'tobeExpired'){
                    // this.listTobeExpired();
                }
                else if (val == 'allTask'){
                    // this.listAllTask();
                }
            },
            setImgPath(value) {
                if(value){
                    this.resultAttach=value
                }
            },
            openvidib(row){
                this.currentask=row
                this.resultOpen=true
            },
             //当前页码
             handleCurrentChange(val) {
                this.queryParams.pageNum=val;
                this.showDataTypeChage(this.crowdmol)
            },
            closecwc (){
                this.$refs.nonimage.fileList = []
                    this.resultAttach = []
                this.resultOpen = false
            },
            // 上传实施结果
            querepeo(){
                // if(this.resultAttach.length==0){
                //     this.$message.warning('请上传实施结果')
                //     return;
                // }
                let path='';
                if(this.resultAttach.length>0){
                    path=this.basetarget + this.resultAttach
                }else{
                    path=''
                }
                // return;
                let data={
                    taskId:this.currentask.task_id,
                    testerId:this.userinform.userId,
                    path,
                }
                // return;
                reportTester(data).then(res=>{
                    this.$refs.nonimage.fileList = []
                    this.resultAttach = []
                    this.resultOpen=false
                    this.$message.success('实施结果上传成功')
                    myClaim(this.queryParams,this.userinform.userId).then(response => {
                        this.allcrowdlist = response.rows;
                        this.crowdData=this.allcrowdlist.filter(item=>(item.status == 1 ||item.status == 3 ||item.status == 4));
                        this.total = response.total;
                        this.loading = false;


                    })
                    this.showDataTypeChage('effect')

                })
            }
        }
    }
</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:#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
    }
    .tooldialog>>>.el-divider--horizontal{
        margin:-20px 0 10px 0;
    }
    .tooldialog>>>.el-dialog__title{
        font-weight:bold;
        color: #0969bd
    }
     .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;
    }
</style>