<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" class="job-worker-dialog">
        <template slot="title">在岗人数({{ cnt}})</template>        
        <el-table :data="tableData" class="mytable"  max-height="750" style="width: 100%;background: transparent;"  ref="fbsubordinateUnit" :show-summary="tableData.length>1">
      <el-table-column label="项目名称" align="left" prop="projectName" />
      <el-table-column label="部门" align="left" prop="deptName" ></el-table-column>
      <el-table-column label="劳务人数" align="center" prop="servicePersonnel" />      
      <el-table-column label="监理人数" align="center" prop="supervisorPersonnel" />
      <el-table-column label="总包人数" align="center" prop="contractorPersonnel" />           
        </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: [],
            projectId:0,
            deptId:0,
            size:10,
            index:1,
            total:0,
            nav:1,
            cnt:0,
        };
    },

    mounted() {
       
    },

    methods: {
        handleCurrentChange(n){
            this.index=n;
            this.loadData();
        },
        doNav(n){
            this.nav=n;
            this.index=1;
            this.loadData();
        },
        showDialog(data) {
            this.projectId=data?.projectId||0;
            this.deptId=data?.deptId||0;
            this.size=10;
            this.index=1;
            this.loadData();
            this.show = true
        },
        loadData(){
            let postData={
                projectId:this.projectId,
                deptId:this.deptId,               
                id:this.nav
            }
            this.$api.attendance.selectList(postData,this.index,this.size).then(d=>{                
                let cnt=0;
                this.total=(d.total||0)                
                this.tableData=(d.rows||[]).map(it=>{                    
                    cnt+=(it.servicePersonnel||0);
                    cnt+=(it.supervisorPersonnel||0);
                    cnt+=(it.contractorPersonnel||0);
                    return it;
                });
                this.cnt=cnt;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.mytable{
    /deep/ th .cell{
        color: aquamarine;
    }
}
.job-worker-dialog{
   /deep/ .quality-table {
    .el-table__footer-wrapper td{
        background: transparent;
        background-image: none !important;        
        border-bottom:solid 1px rgba(60,170,255,0.3);
    }
    .el-table .el-table__row{
        background-image: none !important;
        td{
            border-bottom:solid 1px rgba(60,170,255,0.3);
        }
    }
}
}
</style>
<style lang="less">
.job-worker-dialog{
 .popup-project-introduction-min {
        transform: translateY(100px);
        .bg-pagination{
            margin-top:20px;
        }
 }
}
</style>