<template>
  <div class="setChildAdmin-wrap common-set-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <div class="setChildAdmin-wrap-body flex">
          <div class="setChildAdmin-wrap-left w-260" :style="{height: boxHeight}">
            <div class="text-center"><el-button @click="changeRoute('/addAdminrole')">新增管理员角色</el-button></div>
            <div class="m-t-20" v-for="(pItem,pIndex) in roleListData" :key="pIndex">
              <div class="role-cell-head">{{pItem.roleParentName}}</div>
              <ul>
                <li v-for="(item,index) in pItem.children" :key="index" :class="['role-cell',item.roleId == activeId? 'role-active':'']" @click.stop="selectRole(item.roleId)"><i class="iconfont icon-lizhi p-r-6"></i>{{item.roleName}}</li>
              </ul>
            </div>
          </div>
          <div class="setChildAdmin-wrap-right box-sizing">
            <div class="role-title flex flex-between">
              <span class="font-20 color-303133">{{roleRightObj.name}}</span><span class="font-14 color-1890ff pinter" v-if="roleRightObj.auth==0" @click="toRoleDetail">查看权限</span><span class="font-14 color-1890ff pinter" v-if="roleRightObj.auth==1" @click="toRoleDetail">编辑权限</span>
            </div>
            <div class="role-tip m-t-27 m-b-25">
              <el-alert
                :title="roleRightObj.tip"
                type="info"
                :closable="false"
                show-icon>
              </el-alert>
            </div>
            <div class="role-add">
              <el-button type="primary" @click="toAddRole">添加成员</el-button>
            </div>
            <div class="role-table ">
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="姓名"
                  >
                </el-table-column>
                <el-table-column
                  prop="phone"
                  label="手机号"
                  >
                </el-table-column>
                <el-table-column
                  prop="depart"
                  label="部门">
                </el-table-column>
              </el-table>
              <div class="block common-wrap__page text-right" v-if="tableData.length!=0">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>

<script>
import navCrumb from '@/components/nav/nav.vue';

import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
  name: "setChildAdmin",
  data() {
    return {
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: '/index',
          relocation: true
        },
        {
          name: '设置',
          path: '/companyAddress'
        },
        {
          name: '设置子管理员',
          path: ''
        }
      ],

      boxHeight: window.screen.availHeight + 'px',

      activeId: 1,
      adminRole: [
        // {
        //   roleId: '1',
        //   roleName: '超级管理员'
        // },
        // {
        //   roleId: '2',
        //   roleName: '企业管理员'
        // }
      ],

      roleListData: [
        {
          roleParentName: '集团',

          children: [
            {
              roleId: '1',
              roleName: '超级管理员'
            },
            {
              roleId: '2',
              roleName: '企业管理员'
            }
          ],
        },
        {
          roleParentName: '集团',

          children: [
            {
              roleId: '3',
              roleName: '超级管理员'
            },
            {
              roleId: '4',
              roleName: '企业管理员'
            }
          ],
        }
      ],

      roleRightObj: {
        name: '超级管理员',
        tip: '企业的创建者，拥有企业的所有权限，只会有一个',
        auth: 1
      },
      // 角色表格数据
      tableData: [
        {
          id: 1,
          name: '张三',
          phone: '13333333333',
          depart: '技术部'
        }
      ],
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
    }
  },
  computed: {

  },
  methods: {
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path)
    },

    /**
     *  role 详情
     */
    toRoleDetail() {
      const that = this;
      that.changeRoute(`/addAdminrole?roleId=${that.activeId}`)
    },

    /**
     * 选择 role
     */
    selectRole(id) {
      const that = this;
      that.activeId = id
      that.getRoleUsers();
    },


    /**
     * 添加成员
     */
    toAddRole() {
      const that = this;
      that.changeRoute(`/addAdmin?roleId=${that.activeId}`);
    },

    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      const that = this;
      that.pageSize = val;
      that.getRoleUsers();
    },

    /**
     * 分页---当前页变化
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;

      that.getRoleUsers();
    },

    /**
     * 获取角色用户数据
     */
    getRoleUsers() {
      const that = this;
      let para = {
        roleId: that.activeId,
        pageSize: that.pageSize,
        pageNum: that.currentPage
      }

      postRequest('/haoban-manage-web/role-user-list',para)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        var resData = res.data;
        if (resData.errorCode == 1) {
          // showMsg.showmsg('操作成功','success')
          if(!resData.result || !resData.result.result){
            that.$message.error({
              duration: 1000,
              message: '暂无数据'
            })
            return false;
          }
          that.tableData = resData.result.result;
          that.total = resData.result.totalCount;
          return;
        }

        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    /**
     * 获取角色数据
     */
    getRoles() {
      const that = this;
      let para = {
      }

      postRequest('/haoban-manage-web/role-list',para)
      .then((res) => {
        // console.log(res,res.data,res.data.errorCode)
        var resData = res.data;
        if (resData.errorCode == 1) {
          // showMsg.showmsg('操作成功','success')
          that.adminRole = resData.result;
          if (!!resData.result && !!resData.result.length) {
            that.activeId = that.adminRole[0].roleId;
            that.getRoleUsers()

          }
          return;
        }

        errMsg.errorMsg(resData)

      })
      .catch(function (error) {
        console.log(error);

        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    }
  },
  mounted() {
    const that = this;
    that.boxHeight = (window.screen.availHeight - 430) + 'px';
    that.getRoles();
  },
  components: {
    navCrumb
  }
}

</script>
<style lang="less" scoped>
.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* display */
.inline-block {
  display: inline-block;
}

.block {
  display: block;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

.pinter {
  cursor: pointer;
}

.text-right {
  text-align: right;
}

/* flex */
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-column {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.flex-row {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

.font-14 {
  font-size: 14px;
}

.font-20 {
  font-size: 20px;
}

.color-303133 {
  color: #303133;
}

.color-1890ff {
  color: #1890ff;
}

.text-center {
  text-align: center;
}

.w-260 {
  width: 260px;
}

.p-r-6 {
  padding-right: 6px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-b-25 {
  margin-bottom: 25px;
}

.m-t-27 {
  margin-top: 27px;
}

.common-wrap__page {
  margin-top: 24px;
}

.right-content {
  /*width: 100%;*/
  padding: 24px;
  min-height: calc(100% - 240px);

  .right-box {
    /*background: #fff;*/
    /*padding: 24px;*/
    /*min-height: 500px;*/

    .setChildAdmin-wrap {
      &-body {

      }

      &-left {
        min-width: 260px;
        height: 100%;
        padding: 20px 0 0 0;
        background: #EEF1F8;

        .role-cell-head {
          height: 36px;
          line-height: 36px;
          padding: 0 20px;
          font-size: 14px;
          color: #606266;
        }

        .role-cell {
          width: 220px;
          height: 36px;
          line-height: 36px;
          padding: 0 20px;
          font-size: 14px;
          color: #606266;
          background: #fff;
          cursor: pointer;
          overflow: hidden;
          i {
            color: #1890ff;
          }
          &:hover {
            color: #fff;
            background: #1890ff;
            i {
              color: #fff;
            }
          }

          &.role-active {
            color: #fff;
            background: #1890ff;
            i {
              color: #fff;
            }
          }
        }

      }

      &-right {
        width: calc(100% - 260px);
        padding: 24px;
        background: #fff;

        .role-tip {
          .el-alert {
            background-color: rgba(64,158,255,.1);
            border: 1px solid rgba(64,158,255,.2);
            color: #606266;
            font-size: 13px;
            /deep/ i {
              font-size: 16px;
              color: #1890ff;
            }
          }
        }

        .role-add {
          background: #EBEEF5;
          padding: 8px 0 8px 15px;
        }
      }
    }
  }
}
</style>
