<template>
  <div class="page_staffManagement">
    <van-sticky>
      <div class="staffManagementTitle">
        <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
        <span class="titleName">员工管理</span>
        <div class="iconBox" @click="goAddStaff()">
          <van-icon class="iconOne add" name="plus" />
        </div>
      </div>
    </van-sticky>
    <van-tabs v-model="active" sticky>
      <van-tab title="在职员工">
        <div class="staffBox" v-if="admin_user.length > 0">
          <div
            class="staffOne"
            v-for="(item,index) in admin_user"
            :key="index"
            v-if="admin_user.length > 0"
            @click="goEditStaff(item.user_id)"
          >
            <img v-if="item.avatar.length > 0" :src="item.avatar" alt />
            <img
              v-if="item.avatar.length == 0"
              src="../../../../../assets/images/default_avatar.jpg"
              alt
            />
            <p>
              <span>{{item.user_name}}</span>
              <i class="iconfont icon-bianji bianji"></i>
            </p>
          </div>
        </div>
        <div class="noData" v-if="admin_user.length == 0">
          <img src="../../../../../assets/images/none.png" alt />
        </div>
      </van-tab>

      <van-tab title="禁用员工">
        <div class="staffBox" v-if="del_admin_user.length > 0">
          <div
            class="staffOne"
            v-for="(item,index) in del_admin_user"
            :key="index"
            v-if="del_admin_user.length > 0"
            @click="goEditStaff(item.user_id)"
          >
            <img v-if="item.avatar.length > 0" :src="item.avatar" alt />
            <img
              v-if="item.avatar.length == 0"
              src="../../../../../assets/images/default_avatar.jpg"
              alt
            />
            <p>
              <span>{{item.user_name}}</span>
              <i class="iconfont icon-bianji bianji"></i>
            </p>
          </div>
        </div>
        <div class="noData" v-if="del_admin_user.length == 0">
          <img src="../../../../../assets/images/none.png" alt />
        </div>
      </van-tab>
    </van-tabs>
    <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 { setRem } from "@/libs/functionRem";
import { GetAllStaff } from "@/api/admin_user";

export default {
  data() {
    return {
      loading:false,
      active: 0,
      admin_user: [],
      del_admin_user: []
    };
  },
  methods: {
    GetAllStaff: function() {
      this.loading =true
        GetAllStaff().then(response => {
          this.loading =false

          if (response.data.state === 1) {

          for(let i = 0; i < response.data.data.admins.length; i++){
            if(response.data.data.admins[i].status == 1){
              this.admin_user.push(response.data.data.admins[i])

            }else{
              this.del_admin_user.push(response.data.data.admins[i])

            }
          }


          for(let i = 0; i < this.admin_user.length; i++) {
            if(response.data.data.isSubSuperAdmin){ //当前用户为子管理员，不展示管理员和其他子管理信息
              if((this.admin_user[i].is_sub_admin && this.admin_user[i].user_id != this.$store.getters.user.admin.id) || this.admin_user[i].user_id == response.data.data.org_creator){
                this.admin_user.splice(i,1)
                i = i - 1;
              }
            }
          }


          for(let i = 0; i < this.del_admin_user.length; i++) {
            if(response.data.data.isSubSuperAdmin){ //当前用户为子管理员，不展示管理员和其他子管理信息
              if(this.del_admin_user[i].is_sub_admin && this.del_admin_user[i].user_id != this.$store.getters.user.admin.id){
                this.del_admin_user.splice(i,1)
                i = i - 1;
              }
            }
          }

          } else {
          this.$toast({
            message: response.data.msg
          });
        }
      }).catch(error => {
          this.loading = false
        });;
    },
    goEditStaff: function(id) {
      this.$router.push({ path: "/staff/editstaff?id=" + id });
    },
    goAddStaff: function() {
      this.$router.push({ path: "/staff/addstaff" });
    }
  },
  created() {
    setRem();
    this.GetAllStaff();
  }
};
</script>

<style lang="scss" scoped>
.page_staffManagement {
  height: 100%;
  overflow-y: auto;
  background: #fafafa;
  .staffManagementTitle {
    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;
  }
  .staffBox {
    padding-left: 0.875rem;
    background: #fff;
    >div:last-child{
      p{
        border: none;
      }
    }
    .staffOne {
      display: flex;
      align-items: center;
      height: 3.75rem;
      font-size: 1rem;
      img {
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 0.875rem;
        border-radius: 50%;
      }
      p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 0.875rem;
        flex: 1;
        height: 100%;
        // box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid #e5e5e5;
      }
      .bianji {
        font-size: 1.25rem;
        color: #cccccc;
      }
    }
  }
  .noData {
    width: 9.375rem;
    height: 9.375rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>

<style lang="scss">
  .wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .van-loading__text{
      color: #fff;
    }
  }
.page_staffManagement {
  .van-tabs__line {
    background: #5b98ff;
    width:3.375rem !important;
  }
  .van-tab--active{
    font-size: 1rem;
    color: #000;
    font-weight: bold;
  }
}
</style>
