<template>
  <div class="member-management" id="screenSet">
    <el-row type="flex" justify="space-around" class="mm-nav">
      <el-col :span="20">
        <el-button :type="areabtn" round class="margin-l" @click="checkTab(0)" v-show='isAraeEdit' >可访问本圈的地区</el-button>
        <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">
        <el-button type="info" @click="goManger" v-if="role == 1" class="manger-btn">设置管理员</el-button>
        <el-button   @click="download" class="down-btn">导出人员明细</el-button>
      </el-col>
    </el-row>
    <div class="member-main">
      <region
      v-show="tab == 0"
      :circleId='circleId'
      :roleType='roleType'
      @setOrgAndPeople="setOrgAndPeople"
    ></region>
      <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 region from '@/components/yqrange/member-management/region'
import { getCircleRole, getTotalNumber, downLoadMember } 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: 0,
      areabtn: 'primary',
      plebtn: '',
      orgbtn:'',
      orgTotal: 0,
      pleTotal: 0,
      role: 0,
      isAraeEdit:false,//是否显示可访问本圈的地区
    }
  },
  components: {
    org,
    renyaun,
    region
  },
  created() {
    this.getRole()
    let idType = localStorage.getItem("storageIdType");
    if(idType == 1){
      //内部可以访问本圈的地区
      this.isAraeEdit = true
      this.tab = 0
      this.areabtn = 'primary'
    }else{
      this.isAraeEdit = false
      this.tab = 1
      this.orgbtn = 'primary'
    }
  },
  // 挂载到Dom完成时
  mounted: function() {
    // commonUtil.resizeHeight();
    this.getTotalNum();
  },
  methods: {
    getTotalNum(){
      let param = {
        circleId: this.circleId,
        districtIds: '000',
        idType: this.roleType,
      }
      getTotalNumber(param).then(res => {
        if (res.code == '000000') {
          const { orgTotal, peopleTotal } = res.data;
          this.orgTotal = orgTotal;
          this.pleTotal = peopleTotal;
        }
      }).catch(err => {
        console.log('网络出现点儿问题，稍后重试')
      })
    },
    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 = ''
        this.areabtn = ''
      }else if (v ==2) {
        this.orgbtn = ''
        this.plebtn = 'primary'
        this.areabtn = ''
      } else {
        this.areabtn = 'primary'
        this.orgbtn = ''
        this.plebtn = ''
      }
    },
    setOrgTotal(n) {
      // this.orgTotal = n
    },
    setPleTotal(n) {
      // this.pleTotal = n
    },
    //刷新机构和人员
    setOrgAndPeople(){
      this.$refs.org.initRange();
      this.$refs.renyaun.initRange();
    },
    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()
    },
    // 下载成员明细
    download() {
      let param = {
        circleId: this.circleId,
        countryFlag:true,
        name:"",
        orgName:"",
        pageNo:1,
        pageSize:10,
        source:0
      }
      downLoadMember(param).then(res => {
        if (res.data) {
          this.downloadFile(res.data.attachments.base64,res.data.attachments.name);
        }
      }).catch(err => {
        console.log('网络出现点儿问题，稍后重试')
      })
    },
     /* 文件下载*/
    downloadFile(base64,name) {
      let a = document.createElement('a');
      let href = 'data:application/xls;base64,' + base64;
      a.setAttribute('href',href);
      a.setAttribute('download',name);
      a.click();
    },
  }
}
</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;
      .manger-btn{
        margin-bottom: 20px;
      }
    }
    .inlin {
      margin-left: 10px;
    }
    .text {
      color: #606266;
      font-size: 14px;
      cursor: pointer;
      padding: 10px;
    }
  }
  .member-main {
    margin-top: 20px;
  }
}
</style>
