<template>
  <div>
    <div style="margin-bottom: 10px;">
      <div class="pull-right">
        <el-button size="small" @click="goBack()">后退</el-button>
        <el-button type="primary" size="small" @click="view(user.PARENT_USERNAME)">返回上级</el-button>
        <el-button type="success" size="small" @click="view()">返回顶级</el-button>
      </div>
      搜索：
      <el-input v-model="mainUserName" size="mini" style="width:200px;"
                v-on:change.native="view(mainUserName)"></el-input>
    </div>
    <ul class="floor first-floor">
      <li class="ignore">
        <div class="userC ignore el-button--primary" @click="view(user.USER_NAME)"><h4>{{user.USER_NAME}}</h4>
          【{{user.REAL_NAME}}】
          <div class="dec-lv">级别:{{getDecLevel(user.DEC_LV)}}</div>
          <div class="emp-lv">聘级:{{getEmpLevels(user.EMP_LV)}}</div>
        </div>
        <ul class="floor">
          <mi-atlas v-for="item in atlas" :model="item" :locArr="locArr" :deep="deep" :maxDeep="maxDeep"
                    :key="item.id"></mi-atlas>
        </ul>
      </li>
    </ul>
  </div>
</template>

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

export default {
  name: 'network-line',
  data () {
    return {
      maxDeep: 2,
      deep: 1,
      locArr: [1, 2, 3],
      atlas: [],
      loading: true,
      user: {},
      mainUserName: '',
      list: []
    }
  },
  components: {MiAtlas},
  watch: {
    '$route' (to, from) {
      this.getMainData(to.query.username)
    }
  },
  created () {
    this.getMainData(this.$route.query.username)
  },
  methods: {
    view (userName = null) {
      if (userName) {
        this.$router.push({path: `/atlas/network-line?username=${userName}`})
      } else {
        this.$router.push({path: `/atlas/network-line`})
      }
    },
    goBack () {
      window.history.go(-1)
    },
    getDecLevel (level) {
      return level ? baseInfo.decLevels()[level]['LEVEL_NAME'] : ''
    },
    getEmpLevels (level) {
      return level ? baseInfo.empLevels()[level]['LEVEL_NAME'] : ''
    },
    getMainData (userName = null) {
      console.log(userName)
      this.atlas = []
      let thisObj = this
      let requestData = {}
      if (userName !== null) {
        requestData = {userName: userName}
      }
      network.getData('atlas/main-user-info', requestData).then(response => {
        if (response[0].USER_ID) {
          thisObj.user = response[0]
          thisObj.getChildData(response[0])
          thisObj.loading = false
        } else {
          this.$message.error('无此会员【' + userName + '】')
          thisObj.goBack()
        }
      }).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 ''
      }
      network.getData('atlas/network', {id: userId, deep: thisObj.maxDeep}).then(response => {
        thisObj.list = response
        thisData.displayNone = 'display-none'
        thisData.isExpanded = true
        thisObj.setAtlas()
      })
    },
    setAtlas () {
      let oriList = ''
      let _this = this
      for (let loc in this.locArr) {
        oriList = _this.list.filter(function (item, index, array) {
          return item.LOCATION == _this.locArr[loc]
        })
        if (oriList.length > 0) {
          _this.atlas.push(...oriList)
        } else {
          _this.atlas.push(...[{LOCATION: this.locArr[loc], children: []}])
        }
      }
    }
  }
}
</script>
<style lang="css">
  .userC.ignore, .userR.ignore {
    width: 140px;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }

  .userR.ignore {
    line-height: 150px;
    text-align: center
  }

  .userC {
    font-size: 14px;
    text-align: center;
    color: rgba(255, 255, 255, .75);
    word-break: break-all;
    cursor: pointer;
  }

  .userC h4 {
    margin: 0;
    font-size: 16px;
    padding: 10px;
    white-space: normal;
    color: #fff;
    word-break: break-all;
  }

  .floor {
    margin: 0;
    padding: 0;
    display: flex
  }

  .floor li.ignore {
    list-style: none outside none;
    padding: 20px 0;
    position: relative;
    flex: 1;
  }

  .floor li.ignore:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 10px;
    height: 170px;
    width: 1px;
    background: #ddd;
  }

  .floor li.ignore:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 1px;
    background: #ddd;
  }

  .floor li.ignore:first-child:before {
    content: '';
    position: absolute;
    left: 50%;
    right: 0;
    top: 10px;
    height: 1px;
    background: #ddd;
  }

  .floor li.ignore:last-child:before {
    content: '';
    position: absolute;
    left: 0;
    right: 50%;
    top: 10px;
    height: 1px;
    background: #ddd;
  }

  .floor.last-floor li.ignore:after {
    height: 160px;
  }

  .floor.first-floor > li.ignore:first-child:before {
    display: none;
  }

  .floor.first-floor > li.ignore:first-child:after {
    top: 20px;
    height: 160px;
  }

</style>