<template>
    <MyDialog v-if="show" v-model="show" width="1600px"  height="650px" class="flow-detail-state-dialog">
        <template slot="title">质量-审批进度{{ prjName?' - '+prjName:'' }}</template>
        <div class="head-title-tab" style="padding: 10px 0px;">
                <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">全部审批</div>
                <div :class="nav == 2 ? 'head-nav active' : 'head-nav'" @click="doNav(2)">进行中</div>
                <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">已完成</div>
        </div>

        <el-table :data="tableData" class="mytable" height="450" style="width: 100%;background: transparent;"  ref="fbsubordinateUnit">
            <el-table-column prop="procDefName" label="审批类型"> </el-table-column>
            <el-table-column prop="businessKeyName" label="申请项目" class-name="text-left">
            </el-table-column>
            <el-table-column prop="startDeptName" label="申请单位" class-name="text-left">
            </el-table-column>
            <el-table-column prop="startUserName" label="申请人" width="150">
            </el-table-column>
            <el-table-column prop="startUserName" label="当前状态" width="150">           
                <template slot-scope="{row}">
                    <span v-if="row.finishTime" style="color: greenyellow;">已完成</span>
                    <span v-else style="color: red;">进行中</span>
                </template>
            </el-table-column>
            <el-table-column prop="taskName" label="当前节点" width="150">
            </el-table-column>
            <el-table-column prop="createTime" label="接收时间" width="150">
            </el-table-column>
        </el-table>
        <el-pagination  layout="total,prev, pager, next" :hide-on-single-page="true" @current-change="handleCurrentChange" :total="total"  :page-size="size"  :current-page.sync="index" class="bg-pagination"></el-pagination>
    </MyDialog>
</template>

<script>

import MyDialog from '../components/MyDialog'
export default {
    components: {
        MyDialog,
    },
    name: 'JhbigscreenIndexDlg1',

    data() {
        return {
            show: false,
            tableData: [],
            nav:1,
            index:1,
            size:10,
            deptId:0,
            projectId:0,
            total:0,
            prjName:'',
        };
    },

    mounted() {        
      
    },

    methods: {
        handleCurrentChange(n){
            this.index=n;
            this.loadData();
        },
        doNav(n){
            this.nav=n;
            this.index=1;
            this.loadData();
        },
        showDialog(data) {
            this.deptId=data.deptId;
            this.projectId=data.projectId;
            if(data.prj){
                this.prjName=data.prj.name||'';
            }else{
                this.prjName="";
            }
            this.nav=1;
            this.index=1;
            this.loadData();
            this.show = true
        },
        loadData(){
            this.$api.flow.listByState(this.projectId,this.deptId,this.nav,this.index,this.size).then(d=>{
                this.tableData=d.rows||[];
                this.total=d.total;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.mytable{
    /deep/ th .cell{
        color: aquamarine;
    }
}
</style>
<style lang="less">
.flow-detail-state-dialog{
    .bg-pagination{
            margin-top:20px;
        }
}
</style>