<template>
 <div class="content-main common-scroll">
    <div class="content-body">
      <Tabs :value="currentTabs" @on-click="tabsClick" class="common-tabs">
        <TabPane v-for="tab in tabsData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
      </Tabs>
      <line-manage v-show="currentTabs=='线路管理'" ref="lineManage"></line-manage>
      <Row :gutter="8" style="width:100%;height: calc(100% - 50px);" v-show="currentTabs=='站点管理'">
        <i-col span="5" style="height:100%">
          <div class="station-tree">
            <div class="station-tree-body">
               <tree-filter :defaultData="stationData" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-filter>
            </div>
          </div>
        </i-col>
        <i-col span="19" style="height:100%">
          <div class="right-main">
            <station-manage @changeTree="changeTree" ref="stationManage"></station-manage>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
import LineManage from './LineManage.vue'
import StationManage from './StationManage.vue'
export default {
  name: "LineStationManage",
  components:{
    LineManage,StationManage
  },
  data() {
    return {
		  stationData: [],
      tabsData: [{label:'线路管理'},{label:'站点管理'}],
      currentTabs: '线路管理',
      saveId: null
    };
  },
  created() {
    this.currentTabs = sessionStorage.getItem('currentTabs') || '线路管理'
    if (sessionStorage.getItem('currentTabs') == '站点管理') {
       this.$nextTick(()=> {
        this.currentTabs = sessionStorage.getItem('currentTabs')
        this.$refs.stationManage.getTableData()
        this.$refs.stationManage.getType()
        this.getMetroLevel()
      })
    } else {
      this.getMetroLevel()
      this.$nextTick(()=> {
        this.$refs.lineManage.getTableData()
      })
    }
  },
  // 离开当前路由之前的钩子函数 
  beforeRouteLeave(to, form, next) {
    sessionStorage.removeItem('currentTabs')
    next()
  },
  methods: {
    // 获取树形数据
    getMetroLevel () {
      this.$get('metroapi/lineStation/lineStationTree').then(res => {
				if (res.httpCode == 1) {
          this.stationData = res.data
          if (this.saveId) {
           this.stationData = this.getParentIdList(this.stationData,this.saveId)
          }
				}
		  })
    },
    getParentIdList(list, id) {
        if (!list || !id) {
            return ''
        }
        let findParent = (data, currentdId, nodeId) => {
            for (var i = 0, length = data.length; i < length; i++) {
                let node = data[i];
                node.expand = false
                node.selected = false
                node.disabled = false
                if (node.nodeId === currentdId) {
                    node.expand = true
                    if (node.nodeId == id) {     
                      node.expand = true
                      this.currentOrgId = node.nodeId
                      node.selected = true
                      node.disabled = true
                      // this.$refs.treeManage.getOrgData(node.nodeId)
                      if(node.children) {
                        findParent(node.children, currentdId, node.nodeId);
                      }       
                    }
                    if (!node.nodeId) {
                      break
                    }
                    findParent(list, nodeId);
                    // break
                } else {
                    if (node.children) {
                      findParent(node.children, currentdId, node.nodeId);
                    }
                    continue
                }
            }
            return list;
        }
        return findParent(list, id);
    },
    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
    getTree(arr) {
      return arr.map((v,index) => {
        v.disabled = false
        v.selected = false
        if (index==0) {
          v.expand = true
        } else {
          v.expand = false
        }
        if (v.children) v.children = this.getTree(v.children);
        return v;
      });
    },
    treeChange(arr,level,currentNodeId) {
      this.saveId = currentNodeId
      this.$nextTick(()=> {
        this.getParams('stationManage',arr,level)
        this.$refs.stationManage.tableParams.pageNum = 1
        this.$refs.stationManage.getTableData()
      })
		},
    getParams (name,arr,level) {
     if (level == 2) {
        this.$refs[name].tableParams.lineId = arr[arr.length-1]
        this.$refs[name].tableParams.stationId = ''
      } else if (level == 3) {
        this.$refs[name].tableParams.lineId = arr[arr.length-2]
        this.$refs[name].tableParams.stationId = arr[arr.length-1]
      } else {
        this.$refs[name].tableParams.lineId = ''
        this.$refs[name].tableParams.stationId = ''
      }
    },
    tabsClick (name) {
      this.saveId = null
      sessionStorage.setItem("currentTabs",name)
      this.currentTabs = name
      if (this.currentTabs == '线路管理') {
         this.$nextTick(()=> {
           this.stationData = this.getTree(this.stationData)
           this.$refs.lineManage.getTableData()
        })
      } else {
        this.$nextTick(()=> {
          this.$refs.stationManage.tableParams.lineId = ''
          this.$refs.stationManage.tableParams.stationId = ''
          this.getMetroLevel()
          this.$refs.stationManage.getTableData()
          this.$refs.stationManage.getType()
        })
      }
    },
    changeTree (operateType) {
      if (operateType == 'del') {
        this.saveId = null
      }
      this.getMetroLevel()
    }
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
  position: relative;
}
.content-body {
  width: 100%;
  height: 100%;
  background: #06214D;
  padding: 10px;
}
.common-search {
  width: 100%;
}
>>> .common-search .ivu-input {
  background-color: #06214D;
  border: 1px solid #2355A6;
  border-radius: 15px;
  color: #fff;
  height: 32px;
}
>>> .common-search .ivu-input:focus {
    border-color: #0185ea;
}
.station-tree {
  height: 100%;
  padding: 10px;
}
.station-tree-body {
  border: 1px solid #204384;
  height: 100%;
  padding: 10px;
}
.station-tree-center {
  height: calc(100% - 32px);
  padding-top: 10px;
}
.station-tree-left {
  height: 100%;
  overflow: auto;
}
.station-tree-left-notree {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  fon-size: 14px;
}
.right-main {
  height: 100%;
  padding: 10px 0;
}
</style>