<template>
  <div v-loading="loading">
    <div class="white-box">
      <div style="margin-bottom: 10px;">
        顶级会员：
        <el-input v-model="mainUserName" size="mini" style="width:200px;"
                  v-on:change.native="getMainData(mainUserName)"></el-input>
        展开深度：
        <el-input v-model="expandDeep" size="mini" style="width:60px;"></el-input>
      </div>
      <el-tree :props="props" :data="treeData" node-key="USER_ID" @node-click="getChildData" ref="tree" :indent="0"
               default-expand-all>
                <span :id="'node_'+data.USER_ID" :class="'custom-tree-node '+data.className"
                      slot-scope="{ node, data }">
                    <span :class="'fa fa-circle-o-notch fa-spin '+ data.displayNone"></span>
                    <span :class="data.icon"></span>
                    <span>{{ node.label }} <el-tag>姓名：{{data.REAL_NAME}}</el-tag> <el-tag type="success">级别：{{baseDecLevels[data.DEC_LV]['LEVEL_NAME']}}</el-tag> <el-tag
                      type="warning">聘级：{{baseEmpLevels[data.EMP_LV]['LEVEL_NAME']}}</el-tag> <el-tag type="danger">团队人数：{{data.REC_NUM}}</el-tag></span>
                </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import network from '@/utils/network'
import baseInfo from '@/utils/baseInfo'

export default {
  name: 'index',
  created () {
    this.getMainData()
  },
  data () {
    return {
      props: {
        label: 'USER_NAME',
        children: 'children',
        //isLeaf: 'leaf',
        icon: 'icon',
      },
      treeData: null,
      expandDeep: 2,
      mainUserName: '',
      baseDecLevels: baseInfo.decLevels(),
      baseEmpLevels: baseInfo.empLevels(),
      loading: true,
    }
  },
  methods: {
    getMainData (userName = null) {
      let thisObj = this
      let requestData = {}
      if (userName !== null) {
        requestData = {userName: userName}
      }
      network.getData('atlas/main-user-info', requestData).then(response => {
        thisObj.treeData = response
        thisObj.loading = false
      }).catch(response => {
        thisObj.loading = false
      })
    },
    getChildData (data, node) {
      let thisObj = this
      let userId = data.USER_ID
      let thisData = data
      if (thisData.leaf) {
        return ''
      }
      if (thisData.isExpanded) {
        return ''
      }
      if (thisData.children !== null && thisData.children.length > 0) {
        return ''
      }
      thisData.displayNone = ''
      network.getData('atlas/index', {id: userId, deep: thisObj.expandDeep}).then(response => {
        thisObj.$refs.tree.updateKeyChildren(userId, response)
        thisData.displayNone = 'display-none'
        thisData.isExpanded = true
      })

    }
  },
}
</script>

<style>
  .el-tree {
    font-size: 14px;
  }

  .el-tree .el-tag {
    height: 20px;
    line-height: 18px;
  }

  .el-tree-node__content {
    height: 30px;
    line-height: 30px;
  }

  .el-tree-node__children {
    position: relative;
    padding: 0 0 0 16px;
  }

  .el-tree-node__children:before {
    position: absolute;
    content: '';
    top: 0;
    left: 8px;
    bottom: 15px;
    border-left: 1px dashed #ccc;
  }

  .custom-tree-node {
    position: relative;
    padding-left: 5px;
  }

  .first-node:before {
    display: none;
  }

  .custom-tree-node:before {
    position: absolute;
    width: 8px;
    content: '';
    top: 15px;
    left: -8px;
    border-bottom: 1px dashed #ccc;
  }

  .el-tree-node__expand-icon {
    display: none !important;
  }
</style>