<template>
  <div class="portalDetailWapper">
    <div class="portalDetailTitle">
      <span :class="'title transparent'"
        style="padding:0px;margin-left:32px;">账户信息</span>
      <div class="detailOperations">
        <a-button type="primary" ghost @click='handleReturn'>返回</a-button>
        <a-button type="primary" v-if="$permission('00090402')" @click='handleEdit()'>修改</a-button>
      </div>
   
    </div>
    <div v-if="!showInfo" class="portalDetailContentWapper">
      <div class="portalDetailContentBody">
        <div class="layoutMargin layoutPadding detailsPartSection">
        <a-row :gutter="1" class="detailsPartLine">
            <a-col span="8">
              <DetailsItem :labelSpan='8' :textSpan="16" :label='"姓名"' :text='!detail.name?"暂无":detail.name'></DetailsItem>
            </a-col>
            <a-col span="8">
              <DetailsItem :labelSpan='8' :textSpan="16" :label='"账号"' :text='!detail.phone?"暂无":detail.phone'></DetailsItem>
            </a-col>
            <a-col span="8">
              <DetailsItem :labelSpan='8' :textSpan="16" :label='"邮箱"' :text='!detail.mail?"暂无":detail.mail'></DetailsItem>
            </a-col>
            
          </a-row>
          <a-row :gutter="1" class="detailsPartLine">
             <a-col span="8">
              <DetailsItem :labelSpan='8' :textSpan="16" :label='"手机"' :text='!detail.phone0?"暂无":detail.phone0'></DetailsItem>
            </a-col>
            <a-col span="8">
              <DetailsItem :labelSpan='8' :textSpan="16" :label='"角色名称"' :text='detail.roleNames||"暂无" '></DetailsItem>
            </a-col>
          </a-row>
          <div class="layoutMargin detailsPartLine" v-if="detailReady==2" >
            <a-tree class="portalRoleTree"  checkable :treeData="treeData" v-model="checkedKeys" disabled />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      showInfo: false,
      defaultExpandedKeys: [],
      checkedKeys: [],
      detail: {},
      treeData: [],
      detailReady: 0
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    changeShow(bool){
      if(bool){
        this.showInfo=!this.showInfo
      }
    },
    handleReturn() {
      this.$router.back()
    },
    handleEdit(num) {
      this.$router.push({
        name: 'editStaff',
        query: {
          id: this.$route.query.id,
          // personType:this.$route.query.personType
        }
      })
    },
    getDetail() {
      this.$ajax.get({
        url: this.$api.GET_USER_DETAIL.replace('{id}', this.$route.query.id),
      }).then(res => {
        this.detail = res.data.content
        if (!!this.detail.phone&&this.detail.phone.length>12) {
          this.detail.phone0 = this.detail.phone
          // console.log( this.detail)
        }else{
          this.detail.phone0 = this.detail.phone
        }
        this.getTree()
        this.getDefaultRole(this.detail.roleIds)
      })
    },
    // 查询权限树
    getTree() {
      this.$ajax.get({
        url: this.$api.GET_ALL_ROLE + '?isTree=true'
      }).then(res => {
        const data = res.data.content
        data.forEach((item, index) => {
          this.treeData.push(this.getTreeData(item, index))
        })
        this.detailReady ++
      })
    },
    // 整理权限树
    getTreeData(item, index) {
      const childrenNode = {
        title: item.permName,
        key: item.id,
        value: item.id
      }
      if (item.childList && item.childList.length) {
        childrenNode.children = []
        item.childList.forEach((subItem, subIndex) => {
          const subkey = subItem.id
          childrenNode.children.push(this.getTreeData(subItem, subkey))
        })
      }
      return childrenNode
    },
    getDefaultRole(params) {
      console.log(params)
      let roleIds = params.split(',')
      this.$ajax.get({
        url: this.$api.ROLE_DETAIL.replace('{id}', roleIds)
      }).then(res => {
        if (res.code === '200') {
          const data = res.data.content
          for(let i=0;i<data.length;i++){
            this.checkedKeys.push(data[i].id)
          }
          this.detailReady ++
        }
      })
    }
  }
}
</script>
<style scoped>
	.position { margin-left: 5px; color: #1890ff; cursor: pointer; }
  .underLine { border-bottom: 2px solid #1890ff;}
  .bule { color: #1890ff;}
  .transparent { font-weight: normal; color: rgba(0, 0, 0, 0.5); cursor: pointer;}
</style>
