<template>
  <div class="page_privilegeManagement">
    <van-sticky>
      <div class="privilegeManagementTitle">
        <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
        <span class="titleName" >权限管理</span>
        <div class="iconBox" @click="goToAddRole()">
          <van-icon class="iconOne add" name="plus" />
        </div>
      </div>
    </van-sticky>
    <div class="peopleBox">
      <div class="peopleOne" v-for="(item, index) in roles">
        <div>
          <div class="peopleTop">
            <div class="peopleImg">
              <img v-if="item.name == '医生'" src="../../../../../assets/images/people1.jpg" alt=""/>
              <img v-else-if="item.name == '护士'" src="../../../../../assets/images/people2.jpg" alt=""/>
              <img v-else-if="item.name == '子管理员'" src="../../../../../assets/images/people5.jpg" alt=""/>
              <img v-else-if="item.name == '库存'" src="../../../../../assets/images/people3.jpg" alt=""/>
              <img v-else-if="item.name == '院长'" src="../../../../../assets/images/people4.jpg" alt=""/>
              <img v-else-if="item.name == '运营'"  src="../../../../../assets/images/yy.jpg" alt=""/>
              <img v-else-if="item.name == '技师'"  src="../../../../../assets/images/js.jpg" alt=""/>
              <img v-else  src="../../../../../assets/images/default_avatar.jpg" alt=""/>

            </div>
            <div class="peopleTitle">
              <p>{{item.name}}</p>
              <div class="setting" @click="goToPermission(item)">
                <van-icon class="setting-o" name="setting-o"/>
                <span >权限配置</span>
              </div>
            </div>
          </div>
          <div class="peopleContent">
            <p>
              {{item.intro}}
            </p>
            <p class="hasUser">
              该角色目前已配置<span style="color:#338AFB">{{item.staff_number}}</span>个员工
            </p>
          </div>
        </div>
        <div class="operationBox">
          <p @click="goToAddStaff(item)">新增用户</p>
          <p @click="goToStaffManage(item)">用户管理</p>
        </div>
      </div>
    </div>
    <van-overlay :show="loading" type="spinner" size="30px">
      <div class="wrapper">
        <van-loading size="24px" vertical>正在加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  // import "../libs/rem.js";
  import {GetAllRole} from "@/api/admin_user";
  import {setRem} from "@/libs/functionRem";

  export default {
    data() {
      return {
        loading:false,
        roles: [],
      };
    },
    methods: {

      GetInitRoles() {
        this.loading = true
        GetAllRole().then(response => {
          if (response.data.state === 1) {
            // console.log(response.data.data.roles.length)
            for (let i = 0; i < response.data.data.roles.length; i++) {
              if (!response.data.data.roles[i].is_super_admin) {
                this.roles.push(response.data.data.roles[i])
              }
            }
            this.loading = false

          } else {
            this.loading = false

            this.$toast({
              message: response.data.msg
            });
          }
        }) .catch(error => {
          this.loading = false
        });
      }, goToAddStaff(role) {
        this.$router.push({path: "/role/user?id="+role.id});
      }, goToStaffManage(role) {
        this.$router.push({ path: "/role/usermanage?id=" + role.id + "&name=" + role.name });

      }, goToPermission(role) {
        this.$router.push({path:"/role/editrole?id="+role.id})
      },goToAddRole(){
        this.$router.push({path: "/role/addrole"});
      },
    }, created() {
      setRem()
      this.GetInitRoles()


    }
  };
</script>

<style lang="scss" scoped>
  .wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
.page_privilegeManagement {
  height: 100%;
  overflow-y: auto;
  background: #fafafa;
  .privilegeManagementTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .iconOne {
    font-size: 1.5rem;
  }
  .peopleBox {
    margin-bottom: 1.875rem;
  }
  .peopleOne {
    margin: 0.875rem 0.75rem 0;
    background: #fff;
    min-height: 10.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.3125rem;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.05);
    .peopleTop {
      height: 3.125rem;
      display: flex;
      align-items: center;
      padding-left: 0.875rem;
      padding-right: 1.75rem;
    }
    .peopleImg {
      width: 10%;
      display: flex;
      align-items: center;
      img {
        width: 1.75rem;
        height: 1.75rem;
      }
    }
    .peopleTitle {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 0.625rem;
      p {
        font-weight: bold;
        font-size: 1.125rem;
      }
    }
    .setting {
      display: flex;
      align-items: center;
      color: #838487;
      height: 1.25rem;
      line-height: 1.25rem;
      .setting-o {
        font-size: 1.25rem;
        margin-right: 0.375rem;
      }
      span {
        font-size: 0.9375rem;
      }
    }
    .peopleContent {
      width: 92%;
      float: right;
      padding-left: 1.6rem;
      padding-right: 1.5rem;
      font-size: 0.8125rem;
      color: #989898;
      line-height: 1.125rem;
    }
    .hasUser {
      color: #666666;
      margin: 0.5rem 0;
    }
    .operationBox {
      height: 2.8125rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      // box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
      border-top: 1px solid #e5e5e5;
      > p:first-child {
        border-right: 1px solid #e5e5e5;
      }
      p {
        width: 50%;
        font-size: 0.875rem;
        color: #338afb;
        text-align: center;
        height: 1.5rem;
        line-height: 1.5rem;
      }
    }
    .line {
      color: #e5e5e5;
    }
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>
