<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>
