<template>
    <div class="crowdnum">
        <el-table  :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="发布时间" 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,'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="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 :type="scope.row.processStatus==0?'warning':scope.row.processStatus==1?'primary':scope.row.processStatus==3?'danger':'danger'" effect="dark" 
                            style="cursor:pointer">{{findByvalue(processStatuslist,parseInt(scope.row.processStatus))}}</el-tag>
                    </p>
                    <p v-else>
                        暂无
                    </p>
                </template>
            </el-table-column>
            
            <el-table-column  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">
                    <div  style="display:flex;align-items:center;justify-content: space-evenly;">
                        <router-link :to="{path:'/console/currentcrowd',query:{id:scope.row.taskId,type:'myPublish'}}" class="link-type">
                            <el-button size="mini" type="text" icon="el-icon-key" >查看详情
                            </el-button>
                        </router-link>
                        <p @click="confirmpay(scope.row)" style="color:#409EFF;font-size: 12px;cursor:pointer">确认付款</p>
                    </div>
                </template>
                
            </el-table-column>
        </el-table>
        <!-- <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>
</template>
<script>
    import {mapGetters} from "vuex";
    import {myPublish,payconfirm} from "@/api/crowdsource/crowdsource";
    import {processStatuslist} from "@/const/dict/commondict";
    import {findByvalue, findLabelValueByProp} from "@/util/util";
      import mixin from '@/mixin/index.js'
    export default{
         mixins: [mixin],
        data(){
            return{
                crowdData:[],
                total: 0,
                queryParams: {
                    pageNum: 1,
                    pageSize:99,
                    taskStatus:undefined,
                    processStatus:undefined
                },
                processStatuslist,//任务状态
                
            }
        },
        mounted(){
            this.listMyPublish()
        },
        computed: {
            ...mapGetters(['userinform'])
        },
       
        methods:{
            findByvalue,
            findLabelValueByProp,
           // 我发布的任务
           listMyPublish() {
                myPublish(this.queryParams).then(response => {
                    let rowdata = response.rows;
                    rowdata.forEach(item=>{
                        item.processStatus=item.processStatus+''
                    })
                    this.crowdData=rowdata.filter(item=>item.processStatus==3)
                    this.total = response.total;
                    this.loading = false;
                })
            },
            //当前页码
            handleCurrentChange(val) {
                this.queryParams.pageNum=val;
                this.listMyPublish
            },
            confirmpay(row){
                this.$confirm("确定当前任务已付款").then(()=>{
                    payconfirm({taskId:row.taskId}).then(res=>{
                        if(res.code==200){
                            this.$message.success('确认完成')
                            this.listMyPublish()
                        }
                    })
                })
            },
        },

    }
</script>
<style scoped>
    .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
    }
</style>