<template>
  <div class="page_employeeList">
    <van-sticky>
      <div class="editRoleTitle">
        <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
        <span class="titleName">员工列表</span>
        <span @click="save()">保存</span>
      </div>
    </van-sticky>
    <div class="allCheckBox">
      <div class="allCheck">
        <van-checkbox v-model="allChecked" @click="checkAll"></van-checkbox>
        <div style="margin-left:1.25rem">全选</div>
      </div>
      <van-checkbox-group
        v-model="result"
        ref="checkboxGroup"
        @change="onChange"
      >
        <div class="checkOne" v-for="(item, index) in admin_user" :key="index">
          <van-checkbox :name="item.id" @change="onChange"></van-checkbox>
          <div class="checkUserBox">
            <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>{{ item.user_name }}</p>
          </div>
        </div>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script>
  import {setRem} from "@/libs/functionRem";
  import {AddUserRole, GetAllStaff, GetRoleInfo} from "@/api/admin_user";

  export default {
    data() {
      return {
        allChecked: false,
        isSubSuperAdmin: false,
        result: [],
        admin_user: [],
        name: "",
        is_system: "",

      };
    },
    methods: {
      save() {
        if (this.result.length == 0) {
          this.$toast({
            message: "至少选择一个用户"
          });
          return;
        }

        let params = {
          id: this.$route.query.id,
          ids: this.result.join(",")
        };
        AddUserRole(params).then(response => {
          if (response.data.state === 1) {
            this.$router.go(-1);
          } else {
            this.$toast({
              message: response.data.msg
            });
          }
        });
      },
      GetAllStaff: function () {
        GetAllStaff().then(response => {
          if (response.data.state === 1) {
            this.admin_user = response.data.data.admins;
            this.isSubSuperAdmin = response.data.data.isSubSuperAdmin;

            // console.log(this.admin_user);
            for (let i = 0; i < this.admin_user.length; i++) {
              if (this.admin_user[i].role_ids.length > 0) {
                let isExist = -1;
                let ids = this.admin_user[i].role_ids.split(",");
                isExist = ids.indexOf(this.$route.query.id.toString());
                if (isExist >= 0) {
                  this.admin_user.splice(i, 1);
                  i = i - 1;
                }
              }
            }
            for (let i = 0; i < this.admin_user.length; i++) {
              if (this.isSubSuperAdmin) { //如果当前用户是子管理员,则将管理员剔除到待添加员工列表
                if (this.admin_user[i].user_id == this.$store.getters.user.org.creator) {
                  this.admin_user.splice(i, 1);
                  i = i - 1;
                } else {
                  if (this.admin_user[i].is_sub_admin && this.admin_user[i].user_id != this.$store.getters.user.admin.id) {
                    this.admin_user.splice(i, 1);
                    i = i - 1;
                  }
                }
              } else { //如果当前用户是超级管理员，而且当前编辑角色是子管理员的话，需要将超级管理员剔除到待添加员工列表
                if (this.name == "子管理员" && this.is_system == 1) {
                  if (this.admin_user[i].user_id == this.$store.getters.user.org.creator) {
                    this.admin_user.splice(i, 1);
                    i = i - 1;
                  }
                }
              }
            }
            for (let i = 0; i < this.admin_user.length; i++) {
              if (this.admin_user[i].status != 1){
                this.admin_user.splice(i, 1);
                i = i - 1;
              }
            }
          } else {
            this.$toast({
              message: response.data.msg
            });
          }
        });
      },

      checkAll() {
        if (this.allChecked == false) {
          for (let i = 0; i < this.admin_user.length; i++) {
            this.result.push(this.admin_user[i].id);
          }
          this.allChecked = true;
        } else {
          this.result = [];
        }
      },
      onChange() {
        if (this.result.length == this.admin_user.length) {
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }
      }, GetRoleInfo(role_id) {
        let params = {
          id: role_id,
        }
        GetRoleInfo(params).then(response => {
          if (response.data.state === 1) {

            this.name = response.data.data.role.name
            this.desc = response.data.data.role.intro
            this.is_system = response.data.data.role.is_system
            this.GetAllStaff();


          } else {

            this.$toast({
              message: response.data.msg
            });
          }
        }).catch(error => {
          this.loading = false

        });
        ;

      }
    },
    created() {
      //获取没被禁用的用户
      this.GetRoleInfo(this.$route.query.id)
      setRem();
    }
  };
</script>

<style lang="scss" scoped>
  .page_employeeList {
    height: 100%;
    overflow-y: auto;
    background: #fafafa;

  .editRoleTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

  span {
    font-size: 1rem;
  }

  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 1.5rem;
  }

  .titleName {
    font-size: 1.125rem !important;
    font-weight: 600;
  }

  .allCheckBox {

  .allCheck {
    height: 2.8125rem;
    display: flex;
    align-items: center;
    background: #fff;
    padding-left: 0.75rem;
    margin: 1rem 0;
    font-size: 1rem;
  }

  .checkOne {
    background: #fff;
    height: 3.75rem;
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
  }

  .checkUserBox {
    display: flex;
    align-items: center;
    font-size: 1rem;

  img {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.75rem 0 1.25rem;
  }

  }
  }
  }
  ::-webkit-scrollbar {
    width: 0;
  }
</style>
