<template>
  <div class="flex">
    <dep-list ref="list" style="width:180px;flex:0 1 auto" @onClick="onClick">
      <template v-slot:operation="data">
        <addDep v-if="tool.checkAuth($route.name,'addDep')" class="inline-16" :data="data.data" @onSuccess="onSuccess"></addDep>
      </template>
    </dep-list>
    <div class="hm-info-panel">
      <div class="container normal-panel normal-margin sticky">
        <editDep v-if="tool.checkAuth($route.name,'editDep')" class="inline-16" :data="depInfo.data" @editSuccess="editSuccess"></editDep>
        <delDep  v-if="tool.checkAuth($route.name,'delDep')" class="inline-16" :data="depInfo.data" @onSuccess="onSuccess"></delDep>
        <startDep v-if="tool.checkAuth($route.name,'editDep')" class="inline-16" :data="depInfo.data" @stopOrStart="stopOrStart"></startDep>
      </div>
      <dep-info-card class="normal-margin" :depInfo='depInfo'></dep-info-card>
      <staffList :depInfo="depInfo" ref="staff">
        <template v-slot:detail="scope">
          <div class="inline-16">
            <el-button  type="text" size="mini" @click="$router.push({path:'/depManage/staffDetail',query:{id:scope.data.hrid}})">详 情</el-button>
          </div>
        </template>
        <add-staff v-if="tool.checkAuth($route.name,'addStaff')" slot="staff" :depInfo="depInfo" @onSuccess="onStaffSuccess"></add-staff>
        <template v-slot:del="scope">
          <del-staff  v-if="tool.checkAuth($route.name,'delStaff')" slot="del" :data="scope.data" @onSuccess="onStaffSuccess"></del-staff>
        </template>
        <template v-slot:edit="scope">
          <edit-staff v-if="tool.checkAuth($route.name,'editStaff')" slot="edit" :data="scope.data" @onSuccess="onStaffSuccess"></edit-staff>
        </template>
  
      </staffList>
    </div>
  </div>
</template>

<script>
import depList from './modules/dep_list.vue'
import staffList from './staff/list/list.vue'

import depInfoCard from './modules/dep_info.vue'

import addDep from './modules/add_dep.vue'
import delDep from './modules/del_dep.vue'
import editDep from './modules/edit_dep.vue'
import startDep from './modules/start_dep.vue'

import addStaff from './staff/list/modules/add.vue'
import delStaff from './staff/list/modules/del.vue'
import editStaff from './staff/list/modules/edit.vue'

export default {
  components:{
    depList,
    depInfoCard,
    staffList,
    addDep,
    delDep,
    editDep,
    addStaff,
    delStaff,
    editStaff,
    startDep
  },
  data () {
    return {
      depInfo:{
        data:null,
        parent:{
          data:{}
        }
      }
    }
  },
  methods:{
    onClick (data) {
      this.depInfo = data
      this.$refs.staff.listData(this.depInfo.data.departmentid)
    },
    onSuccess () {
      this.$refs.list.department()
    },
    editSuccess (form) {
      this.$refs.list.department(()=>{
        form.label = form.depname
        this.depInfo.data = Object.assign({},this.depInfo.data,form)
        this.$emit('onClick',this.depInfo)
        this.$refs['list'].setCurrentKey(form.departmentid)
      })
    },
    stopOrStart(status) {
      status === 1?this.depInfo.data.isused = 0:this.depInfo.data.isused = 1
    },
    onStaffSuccess () {
      this.$refs.staff.listData(this.depInfo.data.departmentid)
    },
  }
}

</script>
<style>
</style>
<style scoped>
.flex{
  display: flex;
}
.hm-info-panel{
  flex:1;
  width:500px;
  height:calc(100vh - 100px);
  overflow-y:scroll
}
</style>