<template>
  <li class="ignore">
    <div class="userC ignore el-button--primary" v-if="model.ID" @click="view(model.USER_NAME)"><h4>
      {{model.USER_NAME}}</h4>【{{model.REAL_NAME}}】
      <div class="dec-lv">级别:{{baseDecLevels[model.DEC_LV]['LEVEL_NAME']}}</div>
      <div class="emp-lv">聘级:{{baseEmpLevels[model.EMP_LV]['LEVEL_NAME']}}</div>
    </div>
    <div class="userR ignore el-button--success" v-if="!model.ID&&!model.need">待注册</div>
    <div class="userR ignore el-button--info" v-if="!model.ID&&model.need">上层未注册</div>
    <ul :class="floorClass" v-if="nowDeep<=maxDeep">
      <mi-atlas v-for="item in children" :model="item" :locArr="locArr" :deep="nowDeep" :maxDeep=maxDeep
                :key="item.id"></mi-atlas>
    </ul>
  </li>
</template>
<script>
import baseInfo from '@/utils/baseInfo'

export default {
  name: 'mi-atlas',
  data () {
    return {
      open: false,
      isFolder: true,
      children: [],
      nowDeep: '',
      floorClass: 'floor',
      baseDecLevels: baseInfo.decLevels(),
      baseEmpLevels: baseInfo.empLevels(),
    }
  },
  methods: {
    view (userName) {
      this.$router.push({path: `/atlas/network-line?username=${userName}`})
    },
    getMainData: function (userName) {
      this.$emit('getMainData', userName)
    },
  },
  mounted () {
    let oriList = ''
    let _this = this
    for (let loc in this.locArr) {
      if (this.model.children) {
        oriList = this.model.children.filter(function (item, index, array) {
          return item.LOCATION == _this.locArr[loc]
        })
      }
      if (oriList.length > 0) {
        this.children.push(...oriList)
      } else {
        if (this.model.ID) {
          this.children.push(...[{LOCATION: this.locArr[loc], children: []}])
        } else {
          this.children.push(...[{LOCATION: this.locArr[loc], children: [], need: true}])
        }
      }
    }
    this.nowDeep = this.deep + 1
    this.floorClass = this.nowDeep == this.maxDeep ? 'floor last-floor' : 'floor'
  },
  props: {
    'model': {
      default: () => {
        return ''
      }
    },
    'locArr': {
      default: () => {
        return ''
      }
    },
    'deep': {},
    'maxDeep': {},
  }
}
</script>
<style scoped>

</style>
