<template>
  <div v-loading="loading">
    <div class="white-box">
        <div class="filter-user" @keyup.enter="enterToGetData()" >
            <el-input v-model="mainUserName" size="small" style="width:300px;">
                <template slot="prepend">顶级会员</template>
            </el-input>
            <el-input v-model="expandDeep" size="small" style="width:150px;">
                <template slot="prepend">展开深度</template>
            </el-input>
            <el-input v-model="periodNum" size="small" style="width:150px;" v-show="false">
                <template slot="prepend">期数</template>
            </el-input>
            <el-button type="primary" size="small" @click="getMainData()">确定</el-button>
        </div>
        <el-tree :props="props" :data="treeData" node-key="USER_ID" @node-click="getChildData" ref="tree" :indent="0"
                 default-expand-all :height="tool.getTableHeight(true)">
                <span :id="'node_'+data.USER_ID" :class="'custom-tree-node '+data.className"
                      slot-scope="{ node, data }">
                    <span :class="'el-icon-loading '+ data.displayNone"></span>
                    <span :class="data.icon"></span>
                    <span>
                      <el-tag type="danger">层数：{{countTopDeep(data.TOP_NETWORK_DEEP,topDeep)}}</el-tag> <el-tag>会员编号：{{ node.label }}</el-tag> <el-tag>姓名：{{data.REAL_NAME}}</el-tag> <el-tag type="danger">区位：{{data.RELATIVE_LOCATION}}</el-tag> <el-tag type="success">级别：{{data.DEC_LV_NAME}}</el-tag> <el-tag type="warning">聘级：{{data.EMP_LV_NAME}}</el-tag> <el-tag>加入期数：{{data.PERIOD_AT}}</el-tag></span>
                </span>
        </el-tree>
    </div>
  </div>
</template>

<script>
    import network from '@/utils/network'
    import tool from '@/utils/tool'
    import store from '@/utils/vuexStore'
    import Pagination from '@/components/Pagination'
    import baseInfo from '@/utils/baseInfo'

    export default {
        name: 'atlas_network',
        components: {Pagination},
        mounted() {
            this.getData()
            store.state.socket.onMessageCallback = this.onMessageCallback
        },
        data() {
            return {
                loading: true,
                tabActiveName: 'first',
                //relation
                props: {
                    label: 'USER_NAME',
                    children: 'children',
                    //isLeaf: 'leaf',
                    icon: 'icon',
                },
                treeData: null,
                expandDeep: 5,
                topDeep: 0,
                mainUserName: '',
                periodNum: null,
                listPeriodNum: null,
                allData: null,
                tableHeaders: null,
                tableData: null,
                currentPage: 1,
                totalPages: 1,
                totalCount: 1,
                pageSize: 20,
                tool: tool,
                filterForm: {
                    userName: null,
                    deep: 5,
                    periodNum: null,
                },
                listTopDeep: 0,
            }
        },
        methods: {
            getData() {
                this.$message({
                    message: '正在获取数据，请稍后',
                })
                //this.periodNum = baseInfo.nowPeriodNum()
                //this.filterForm.periodNum = baseInfo.nowPeriodNum()
                this.getMainData(null,true)
            },
            getMainData (userName = null, getList = false) {
                this.$message.closeAll()
                this.$message({
                    message: '正在获取数据，请稍后',
                })
                let thisObj = this
                let requestData = {
                    periodNum: this.periodNum
                }
                if (this.mainUserName !== null) {
                    requestData = {userName: this.mainUserName,periodNum: this.periodNum}
                }
                network.getData('atlas/main-user-info', requestData).then(response => {
                    thisObj.treeData = response
                    thisObj.topDeep = Number(response[0].TOP_NETWORK_DEEP)
                    thisObj.listPeriodNum = response[0].listPeriodNum
                    if(getList) thisObj.getListData()
                    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/network', {
                    id: userId,
                    deep: thisObj.expandDeep,
                    periodNum: this.periodNum
                }).then(response => {
                    thisObj.$refs.tree.updateKeyChildren(userId, response.allData)
                    thisObj.listPeriodNum = response.periodNum
                    thisData.displayNone = 'display-none'
                    thisData.isExpanded = true
                })
            },
            countTopDeep(deep,topDeep){
                return Number(deep)-Number(topDeep)
            },
            handleCurrentChange (page) {
                this.getListData(page, this.pageSize)
            },
            handleSizeChange (pageSize) {
                this.getListData(this.currentPage, pageSize)
            },
            handleFilter () {
                this.getListData(1, this.pageSize)
                this.tabActiveName = 'two'
            },
            handleShow(row) {
                this.loading = true
                this.filterForm.userName = row.SEE_USER_NAME
                this.getListData(1, this.pageSize)
                this.tabActiveName = 'two'
            },
            getListData (page, pageSize) {
                let obj = this
                network.getPageData(this, 'atlas/network-list', page, pageSize, this.filterForm, function (response) {
                    obj.allData = response
                    obj.listTopDeep = response.listTopDeep
                })
            },
            onMessageCallback(data) {
                //this.getData(this.currentPage, this.pageSize, false)
            },
            handleExport(){
                this.$confirm(`确定要导出当前数据吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return network.getData(`atlas/network-list-export`, this.filterForm)
                }).then(response => {
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                }).catch(response => {

                })
            },
            enterToGetData (ev) {
                this.getMainData()
            },
        }
    }
</script>

<style>
    .filter-user{font-size: 14px;margin-bottom: 20px;}
    .filter-user:after{content: '';display: table;
        clear: both;}
    .filter-user .el-input-group{float: left;margin-right: 15px;}
    .el-tree {
        padding-bottom: 20px;
        font-size: 14px;
        overflow-x: auto;
    }

    .el-tree .el-tag {
        height: 20px;
        line-height: 18px;vertical-align: middle;
    }
    .el-tree-node{position: relative;}

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

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

    .el-tree-node:before {
        position: absolute;
        content: '';
        top: 0px;
        left: -4px;
        height: 100%;
        border-left: 1px solid #ccc;
    }
    .el-tree-node:last-child:before{height: 15px;}

    .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: -4px;
        border-bottom: 1px solid #ccc;
    }

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