<template>
  <div>
    <el-dialog title="分配权限" :append-to-body="true" class="privilege-dialog" :visible.sync="isShow" @open="beforeDialogOpen">
        <el-tabs v-model="activeTabs" @tab-click="handleClick">
          <el-tab-pane label="组织机构" name="branch">
            <branch-priv :tab-name="activeTabs" ref="branchPriv" :ID="ID" :priv-type="privType" owner-type="B"></branch-priv>
          </el-tab-pane>
          <el-tab-pane label="角色" name="role">
            <role-priv :tab-name="activeTabs" :ID="ID" :priv-type="privType" owner-type="R"></role-priv>
          </el-tab-pane>
          <el-tab-pane label="用户" name="user">
            <user-priv :tab-name="activeTabs" :ID="ID" :priv-type="privType" owner-type="U"></user-priv>
          </el-tab-pane>
        </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import BranchPriv from './branchPriv.vue'
import RolePriv from './rolePriv.vue'
import UserPriv from './userPriv.vue'
export default {
  components: {
    'branch-priv': BranchPriv,
    'role-priv': RolePriv,
    'user-priv': UserPriv
  },
  props: { show: Boolean, ID: [Number, String], privType: String },
  data() {
    return {
      activeTabs: 'branch'
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    beforeDialogOpen() {
      this.$nextTick(() => {
        this.$refs.branchPriv.loadColumnList()
        this.$refs.branchPriv.loadOwnerList()
      })
      this.handleClick({ name: 'branch' })
    },
    handleClick(tab, event) {
      this.activeTabs = tab.name
    }
  }
}
</script>
<style>
.privilege-dialog .el-dialog {
  width: 1200px;
}
@media (max-width:480px){
  .privilege-dialog .el-dialog {
    width: 96%;
  }
}
.privilege-dialog .el-dialog .el-table .el-checkbox__label {
  font-size: 13px;
  padding-left: 5px;
}
.privilege-dialog .el-dialog .el-table .el-checkbox__inner {
  width: 15px;
  height: 15px;
}
.privilege-dialog .el-dialog .el-table .el-checkbox__inner::after {
  left: 5px;
  top: 1px;
}
.privilege-dialog .el-dialog .el-table .cell,
.el-table th > div {
  padding-left: 8px;
  padding-right: 8px;
}
.privilege-dialog
  .el-dialog
  .el-table
  .el-table__header-wrapper
  .el-table__header
  thead
  tr
  th:nth-child(1) {
  padding-left: 18px;
}
</style>
