<template>
  <div class="member-management" id="screenSet">
    <el-row type="flex" justify="space-around" class="mm-nav" align="middle">
      <el-col :span="20">
        <el-button :type="orgbtn" round class="margin-l" @click="checkTab(1)">可访问本圈的机构 ({{orgTotal}})</el-button>
        <el-button :type="plebtn" round class="margin-l" @click="checkTab(2)">可访问本圈的人员 ({{pleTotal}})</el-button>
        <span class="text inlin" @click="goBalck">黑名单</span>
      </el-col>
      <el-col :span="4" class="mm-r">
        <span class="text" @click="goManger" v-if="role == 1">设置管理员</span>
      </el-col>
    </el-row>
    <div class="member-main">
      <org
        v-show="tab == 1"
        :circleId='circleId'
        :roleType='roleType'
        @setOrgTotal="setOrgTotal"
        @refreshRenYuan='refreshRenYuan'
        ref='org'
      ></org>
      <renyaun
        v-show="tab == 2"
        :circleId='circleId'
        :roleType='roleType'
        @setPleTotal="setPleTotal"
        ref='renyaun'
      ></renyaun>
    </div>
  </div>
</template>

<script>
import * as commonUtil from "@/utils/utils";
import org from '@/components/yqrange/member-management/org'
import renyaun from '@/components/yqrange/member-management/renyuan'
import { getCircleRole } from '@/utils/yqrange/rangeApi'
export default {
  props: {
    circleId: {
      type: Number | String,
      default: 1
    },
    roleType: {
      type: Number | String,
      default: 1
    },
    circleName: {
      type: String
    }
  },
  data() {
    return {
      tab: 1,
      orgbtn: 'primary',
      plebtn: '',
      orgTotal: 0,
      pleTotal: 0,
      role: 0
    }
  },
  components: {
    org,
    renyaun
  },
  created() {
    this.getRole()
  },
  // 挂载到Dom完成时
  mounted: function() {
    // commonUtil.resizeHeight();
  },
  methods: {
    getRole() {
      getCircleRole(this.circleId).then((res) => {
        if(res.code == '000000') {
          // 0普通人 1 管理员 2主管理员 3内部管理员 4 高级管理员
          if (res.data.circleRoleId > 1) {
            this.role = 1
          }
        }
          
      })
    },
    checkTab(v) {
      this.tab = v
      if (v == 1) {
        this.orgbtn = 'primary'
        this.plebtn = ''
      } else {
        this.orgbtn = ''
        this.plebtn = 'primary'
      }
    },
    setOrgTotal(n) {
      this.orgTotal = n
    },
    setPleTotal(n) {
      this.pleTotal = n
    },
    goManger() {
      this.$router.push(`/admin-manage?circleId=${this.circleId}&circleName=${this.circleName}`)
    },
    goBalck() {
      this.$router.push(`/blacklist-manage?circleId=${this.circleId}&circleName=${this.circleName}`)
    },
    // getRole() {
    //   if (localStorage.getItem("highMainManager") == 1 || localStorage.getItem("mainManager") == 1 || localStorage.getItem("storageIdType") == 1) {
    //     this.role = 1
    //   } else {
    //     this.role = 0
    //   }
    // },
    refreshRenYuan() {
      this.$refs.renyaun.initRange()
    }
  }
}
</script>

<style lang="scss" scoped>
.member-management {
  padding: 10px;
  background: #fff;
  .mm-nav {
    .margin-l {
      margin-left: 20px;
    }
    .black {
      margin-left: 30px;
    }
    .mm-r {
      text-align: right;
      padding-right: 20px;
    }
    .inlin {
      margin-left: 10px;
    }
    .text {
      color: #606266;
      font-size: 14px;
      cursor: pointer;
      padding: 10px;
    }
  }
  .member-main {
    margin-top: 20px;
  }
}
</style>
