<template>
    <div class="project-attendance-data-drawer" v-if="isOpen">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="70%" style="padding-left: 20px">
            <template slot="title">
                <div>{{ title + " 【劳务实名管理】" }}</div>
            </template>
            <div>
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="考勤记录" name="first">
                        <main-index ref="main"></main-index>
                    </el-tab-pane>
                    <el-tab-pane label="人员信息" name="second">
                        <workerIndex ref="workerMain"></workerIndex>
                    </el-tab-pane>
                </el-tabs>
               
            </div>
        </el-drawer>
    </div>
</template>

<script>
import mainIndex from './index.vue'
import workerIndex from '../attendanceWorker/index'
export default {
    components:{
        mainIndex,
        workerIndex
    },
    data() {
        return {
            activeName: 'first',
            isOpen: false,
            title: '',           
        };
    },

    mounted() {

    },

    methods: {              

        show(prj) {
            this.prj=prj;
            this.activeName='first';
            this.title = prj.projectName||""
            this.isOpen = true;
            this.handleClick();   
        },
        handleClick(){
            setTimeout(()=>{
                if(this.activeName=='first'){   
                    this.$refs.main.init(this.prj);
                }else{
                    this.$refs.workerMain.initMe(this.prj);
                }
            },400);    
        }

    },
};
</script>

<style lang="scss" scoped>
.project-attendance-data-drawer {
    ::v-deep .el-drawer__header {
        margin-bottom: 0px;
    }

    ::v-deep .el-drawer__body {
        padding: 12px 24px;
    }
    ::v-deep .el-drawer{
        min-width: 1200px;
    }
}
</style>