<template>
  <el-container id="repository" :style="{'width': '100%', 'height': mainHeight}">
    <el-aside width="280px" style="overflow: hidden;border-right: 1px solid #F2F2F2">
      <RepositoryMain v-if="reFresh"  ref="repositoryMain" key="repositoryMain"/>
    </el-aside>
    <el-main>
      <component ref="component" :is="mainContent" :uuid="uuid" :key="Math.random()" :refreshTreeParentNode="refreshTreeParentNode" :refreshTreeNode="refreshTreeNode" :treeNode="treeNode"></component>
    </el-main>
  </el-container>
</template>

<script>
  import RepositoryMain from "./RepositoryMain";
  import RepositoryMainList from "./RepositoryMainList";
  import RepositoryList from "./RepositoryList";
    export default {
      name: "Repository",
      components: {RepositoryMain, RepositoryMainList, RepositoryList},
      data(){
        return {
          mainHeight: (parseInt(this.$store.getters.getTopMainHeightFn)) + 'px',
          mainContent: '',
          uuid: '',
          reFresh: false,
          treeNode:{},
        }
      },
      provide: function() {
        return {
          openRepositoryList: this.openRepositoryList,
          transferTreeNode: this.transferTreeNode
        }
      },
      created() {
        this.getRouteParam(this.$route.query);
      },
      methods: {
        getRouteParam(params) {
          if (JSON.stringify(params) == '{}' || !params.id) {// 无搜索，显示全部树和最近列表
            this.reFresh = false;
            this.mainContent = '';
            this.$nextTick(()=>{
              this.reFresh = true;
              this.mainContent = 'RepositoryMainList';
            });
          } else {// 有搜索，定位到符合条件的树，并且点击
            this.$refs.repositoryMain.queryTreeByIdAndPath(params.id, params.versionId, params.path);
          }
        },
        openRepositoryList(id) {
          this.mainContent = '';
          this.uuid = id;
          this.mainContent = 'RepositoryList';
        },
        transferTreeNode(obj){
          this.treeNode = obj;
        },
        refreshTreeParentNode(id) {// 刷新当前节点的父节点，即重新加载id节点
          this.$refs.repositoryMain.refreshParentNode(id);
        },
        refreshTreeNode(id) {// 刷新当前节点的子节点，即重新加载id节点（关闭+展开）
          this.$refs.repositoryMain.refreshNode(id);
        }
      },
      computed: {
        listenTopMainHeight() {
          return this.$store.getters.getTopMainHeightFn;
        },
        listenWsId() {
          return this.$store.getters.getWsIdFn;
        },
        listenTeamId() {
          return this.$store.getters.getTeamIdFn;
        }
      },
      watch : {
        listenTopMainHeight: function (newd, old) {
          this.mainHeight = (parseInt(newd)) + 'px';
        },
        listenWsId: function(newd, old) {
          this.reFresh = false;
          this.mainContent = '';
          this.$nextTick(()=>{
            this.reFresh = true;
            this.mainContent = 'RepositoryMainList';
          });
        },
        listenTeamId: function(newd, old) {
          this.reFresh = false;
          this.mainContent = '';
          this.$nextTick(()=>{
            this.reFresh = true;
            this.mainContent = 'RepositoryMainList';
          });
        }
      },
      beforeRouteUpdate(to, from, next){
        this.getRouteParam(to.query);
        next();
      }
    }
</script>

<style scoped>
  #repository >>> .el-main {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    overflow: auto;
    padding: 0;
  }
</style>
