<style lang="scss">
    .staff{
        display: flex;
        justify-content: space-between;
        .companies{
                height: 75vh;
                overflow: auto;
                margin-right: 10px;
                overflow-x: hidden;
        }
        &>li{
            width: 30%;
            list-style: none;
            min-height: 70vh;
            background: #fff;
            border: 1px solid #d9d9d9;
            padding:20px 10px;
        }
        .custom-tree-node{
                    width: 100%;
                    .el-tree-node__content{
                        height: 32px;
                    }
                    .label_name{
                        font-size: 14px;
                    }
                    .active{
                        color:#1989FA;
                    }
                    .edit{
                        float: right;
                        i{
                            font-weight: bolder;
                            font-size: 14px;
                        }
                    }
        }
        .staff_list{
            width: 68%;
        }
        
    }
    .staffs{
        margin-right: 10px;
    }
</style>
<template>
  <section>
    <p>公司管理 > 员工管理</p>
    <div class="content">
        <ul class="staff">
            <li class="companies">
                <el-form  size="small">
                    <el-form-item>
                        <el-input suffix-icon="el-icon-search" v-model="name" @change="getData"  placeholder="公司名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-tree  
                    :data="data"
                    node-key="id"   :props='props'
                    :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }" @click="change(data)" >
                        <span v-if='id==data.id' class="label_name active">{{ node.label }}</span>
                        <span v-else class="label_name">{{ node.label }}</span>
                    </span>
                </el-tree>
            </li>
            <li class="staff_list">
                    <el-form label-width="70px" :inline="true" size="small" label-position="left">
                        <!-- <el-form-item label="公司名称">
                                <el-input clearable placeholder="请输入公司名称" v-model="form.name"></el-input>
                        </el-form-item> -->
                        <el-form-item>
                            <!-- <el-button @click="form.page=1,getData()" type="primary" icon="el-icon-search">搜索</el-button> -->
                            <el-button icon="el-icon-plus" @click="dialogFormVisible1=true,staff={}"  type="primary">新增员工</el-button>
                        </el-form-item>
                    </el-form>
                <el-table
                        class="table"
                        :data="list" height="54vh"
                        border  v-loading="loading"
                        style="width: 100%">
                        <el-table-column
                        prop="name" 
                        label="员工姓名">
                        </el-table-column>
                        <el-table-column
                        prop="username"  width="120"
                        label="账号">
                        </el-table-column>
                        <el-table-column
                        prop="department_name" 
                        label="部门">
                        </el-table-column>
                        <el-table-column
                        prop="utype" 
                        label="账号类型">
                        </el-table-column>
                        <el-table-column
                        prop="phone" width="120"
                        label="联系电话">
                        </el-table-column>
                        <el-table-column
                        prop="ctime"  width="200"
                        label="时间">
                        </el-table-column>
                        <el-table-column fixed="right"
                        prop="zip"  width="85"
                        label="操作">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                                <el-button icon="el-icon-edit" @click="edit(scope.row)" size="mini" type="warning"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                <el-button icon="el-icon-delete" @click="del(scope.row.id)" size="mini"  type="danger"></el-button>
                            </el-tooltip>
                        </template>
                        </el-table-column>
                </el-table>
                <Page  ref="pageButton"  :total='total' @pageChange='gopage'/>
            </li>
        </ul>
    </div>

 

    <el-dialog title="新增员工" :visible.sync="dialogFormVisible1" width="500px" :close-on-click-modal='false' :close-on-press-escape='false'>
        <el-form size="small" label-width="80px">
            <el-form-item label="姓名">
                <el-input clearable  v-model="staff.name"></el-input>
            </el-form-item>
            <el-form-item label="账号">
                <el-input clearable  v-model="staff.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input clearable type="password" v-model="staff.password"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input clearable  v-model="staff.phone"></el-input>
            </el-form-item>
            <el-form-item label="账号类型">
                <el-select clearable v-model="staff.utype" placeholder="请选择">
                    <el-option label="公司级" value="公司级"></el-option>
                    <el-option label="部门级" value="部门级"></el-option>
                    <el-option label="岗位级" value="岗位级"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门" v-if='staff.utype!="公司级"'>
                <el-select  v-model="staff.department_id"  clearable  placeholder="请选择">
                        <el-option v-for="(item,index) in dptList" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button size="small" type="primary" @click="addStaff">确 定</el-button>
        </div>
    </el-dialog>

  
  </section>
</template>
<script>
import Page from '../../components/Page';
export default {
    components:{
        Page
    },
	data() {
		return {
            dialogFormVisible:false,
            dialogFormVisible1:false,
            dialogFormVisible2:false,
            data:[],
            form:{page:1,page_size:20},
            list:[],
            total:1,
            loading:false,
            props:{
                label:'name'
            },
            id:'',
            dpt:{enterprise_name:'',enterprise_id:'',staffusers:[]},
            enterprise_name:'',
            name:'',
            staff:{},
            dptList:[]
		};
	},
	methods: {
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        change(data){
                this.id=data.id;
                this.enterprise_name=data.name;
                this.getDpt();
                this.$api.getDepartmentList({enterprise_id:data.id}).then(res=>{
                    this.dptList=res.data.data.list;
                })
        },
        getData(){
            this.loading=true
            this.$api.getEnterpriseList({name:this.name}).then(res=>{
                this.data=res.data.data.list;
                // this.id=this.data[0].id;
                // this.enterprise_name=this.data[0].name;
                this.change(this.data[0])
            })
        },
        //获取员工列表
        getDpt(){
            var parm=this.form;
            parm.enterprise_id=this.id
            this.$api.getStaffuserList(parm).then(res=>{
                this.loading=false;
                this.list=res.data.data.list;
                this.total=res.data.data.total
            })
        },
        del(id){
                this.$confirm('确定删除吗', '提示', {
                        type: 'warning'
                    }).then(() => {
                    this.$api.deleteStaffuser({id:id}).then((res)=>{
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getDpt()
                    })
                })
        },
        addStaff(){
            let parm=this.staff;
            
            if(!parm.name){
                this.$message.error('请输入员工名称');
                return;
            }
            if(!parm.username){
                this.$message.error('请输入账号');
                return;
            }
            if(!parm.password){
                this.$message.error('请输入密码');
                return;
            }
            if(!parm.utype){
                this.$message.error('请选择账号类型');
                return;
            }
            if(parm.utype!='公司级' && !parm.department_id){
                this.$message.error('请选择部门');
                return;
            }
            if(parm.id){
                this.$api.updateStaffuser(parm).then(res=>{
                    if(res.data.code==0){
                        this.getDpt()
                        this.staff={}
                        this.$message({
                                message: '修改成功',
                                type: 'success'
                        })
                        this.dialogFormVisible1=false
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            }else{
                parm.id=0;
                parm.enterprise_id=this.id
                this.$api.saveStaffuser(parm).then(res=>{
                    if(res.data.code==0){
                        this.getDpt()
                        this.staff={}
                        this.$message({
                                message: '新增成功',
                                type: 'success'
                        })
                        this.dialogFormVisible1=false
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            }
        },
        handleClose(index){
            this.dpt.staffusers.splice(index,1);
        },
        edit(data){
            this.dialogFormVisible1=true
            this.staff={...data}
        },
    },
	created(){
        this.getData()
	}
};
</script>