<template>
  <div class="dialog-content">
    <!--el-dialog树状节点选择  -->
    <el-dialog :visible="dialogboole" :before-close="handleClose" :close-on-click-modal="false" custom-class="dialogclass" :center="true" width="500px">
      <template slot="title">
        <span>用户权限</span>
      </template>
      <!-- 导航栏 -->
      <el-row>
        <el-col :span="24">
          <my-tabs ref="mytabsdom" :tabsarray="tabsarray" :activeindex.sync="activateditem.index" justify="center" @activeitem="tabsactiveitem" />
        </el-col>
      </el-row>
      <el-row v-if="activateditem.index == 0" class="main_row">
        <el-col :span="24">
          <text-table class="talbe" ref="texttabledom" :tabletata="tabletata" maxheight="400" :selection="tableselection" :tablecolcolumn="tablecolcolumn" @selectionchange="tableselectionchange" />
        </el-col>
      </el-row>
      <!-- 菜单 -->
      <el-row v-else-if="activateditem.index == 2" class="main_row">
        <el-col :span="24">
          <el-scrollbar class="scrollbar">
            <el-tree
              ref="tree"
              :data="treedata"
              show-checkbox
              :highlight-current="true"
              node-key="menuId"
              class="scrollbar-tree"
              :check-strictly="checkstrictly"
              :default-expand-all="true"
              :default-checked-keys="defaultcheckedarray"
              :props="defaultProps"
              accordion
            />
          </el-scrollbar>
        </el-col>
      </el-row>
      <!-- 取消、确定 -->
      <span slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="determine">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { prwerSetUproleData, treeData } from './data'
export default {
  props: {
    // 弹出框的显示和隐藏
    dialogboole: {
      type: Boolean,
      required: true,
      default: false
    },
    // 用户管理table表格中的row数据
    prowersetuprow: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 菜单树节点
      treedata: treeData,
      checkstrictly: false,
      //默认勾选的节点的 key 的数组
      defaultcheckedarray: [],
      defaultProps: {
        label: 'menuName',
        children: 'children'
      },
      // table表格
      tabletata: prwerSetUproleData,
      tableselection: {
        hideshow: true,
        width: '50'
      },
      tablecolcolumn: [],
      tableselectionarray: [],
      // 导航栏数据
      tabsarray: [
        { name: '角色', index: 0 },
        { name: '菜单', index: 2 }
      ],
      // table表格和tree树节点的选择和隐藏
      activateditem: {
        index: 0
      }
    }
  },
  watch: {
    dialogboole: {
      handler(newdata) {
        if (newdata) {
          // 弹窗打开默认显示角色
          this.activateditem.index = 0
          this.$nextTick(() => {
            this.$refs.mytabsdom.initialactive()
          })
          this.roletablerol()
        }
      },
      immediate: true
    },
    activateditem: {
      handler(newdata) {
        if (newdata.index == 0 && this.dialogboole) {
          this.roletablerol()
        }
      },
      immediate: true
    }
  },
  methods: {
    tabsactiveitem(item) {
      this.activateditem.index = item.index
      this.activateditem.name = item.name
    },
    // 给用户绑定菜单接口参数
    addUserMenuslnterfacedata() {
      const allid = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      return {
        userId: this.prowersetuprow.userId,
        menuIds: allid.length ? allid : []
      }
    },

    // table表格
    // 复选框change事件
    tableselectionchange(item) {
      this.tableselectionarray = item
    },
    // 配置角色table表格列
    roletablerol() {
      this.tablecolcolumn = [
        {
          label: '角色标识',
          minwidth: '40',
          align: 'center',
          name: 'roleLogo'
        },
        {
          label: '角色名称',
          minwidth: '80',
          align: 'center',
          name: 'roleName'
        }
      ]
    },
    //角色删除绑定接口传参： 获取用户id和选中的角色table表格id
    gettableselectionroleid(name) {
      const idarray = this.tableselectionarray.map((item) => {
        return item.roleId
      })
      if (name === 'AddUserRole') {
        return {
          userIds: this.prowersetuprow.userId,
          roleIds: idarray.length ? idarray : ['']
        }
      } else {
        return {
          userIds: [this.prowersetuprow.userId],
          roleIds: ['']
        }
      }
    },

    // 弹出框
    // 点击x
    handleClose() {
      this.$emit('handleClose')
    },
    // 取消
    cancel() {
      this.$emit('cancel')
    },
    // 确认
    determine() {
      this.$emit('cancel')
      this.$message({
        type: 'success',
        message: '设置成功!'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 主内容行
.main_row {
  height: 500px;
  // border: solid 1px red;
  padding: 10% 5% 0% 5%;
}

// 菜单树节点
::v-deep .scrollbar {
  height: 400px;
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .scrollbar-tree {
    width: 97%;
  }
}
// 弹出框
::v-deep .dialogclass {
  .el-dialog__header {
    padding: 18px 0px 0px 0px !important;
    height: 52px;
    font-size: 18px;
    border-bottom: solid 1px #dfe6ec;
  }
  .el-dialog__body {
    padding: 0px;
  }
  .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
