<template>
  <div class="member-management screenSet" 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>
        <el-link href="https://element.eleme.io" target="_blank" class="black">黑名单</el-link>
      </el-col>
      <el-col :span="4" class="mm-r">
        <el-link href="https://element.eleme.io" target="_blank" >设置管理员</el-link>
      </el-col>
    </el-row>
    <div class="member-main">
      <org
        v-show="tab == 1"
        :circleId='circleId'
        :roleType='roleType'
        @setOrgTotal="setOrgTotal"
      ></org>
      <renyaun
        v-show="tab == 2"
        :circleId='circleId'
        :roleType='roleType'
        @setPleTotal="setPleTotal"
      ></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/renyaun'
export default {
  props: {
    circleId: {
      type: Number | String,
      default: 1
    },
    roleType: {
      type: Number | String,
      default: 1
    },
  },
  data() {
    return {
      tab: 1,
      orgbtn: 'primary',
      plebtn: '',
      orgTotal: 0,
      pleTotal: 0
    }
  },
  components: {
    org,
    renyaun
  },
  created() {},
  // 挂载到Dom完成时
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    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
    }
  }
}
</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;
    }
  }
  .member-main {
    margin-top: 20px;
  }
}
</style>
