<template>

  <!--<el-container>-->
  <!--<el-header>Header</el-header>-->
  <!--<el-container>-->

  <!--&lt;!&ndash;左面&ndash;&gt;-->
  <!--<el-aside width="200px">-->
  <!--<el-input-->
  <!--placeholder="输入关键字进行过滤"-->
  <!--v-model="filterText">-->
  <!--</el-input>-->
  <!--<el-tree-->
  <!--:data="data"-->
  <!--:props="defaultProps" @node-click="handleNodeClick"-->
  <!--:filter-node-method="filterNode"-->
  <!--ref="tree2"-->
  <!--&gt;-->
  <!--</el-tree>-->
  <!--</el-aside>-->
  <!--<el-main>-->
  <!--<component :is=" comName "></component>-->
  <!--</el-main>-->
  <!--</el-container>-->
  <!--</el-container>-->
  <div>
    <el-row :gutter="10">
      <el-col class="header_title":xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <!--<el-button class="header_title_menu"@click="clickTitle()">Click</el-button>-->
        <!--<el-button v-show="_mobile" class="menu_"@click="clickMenu()">Click</el-button>-->
        <van-button type="primary" @click="showPopup">
          展示弹出层
        </van-button>

        <van-popup v-model="show">内容</van-popup>
      </el-col>
    </el-row>

    <el-row :gutter="5" class="row_">


      <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5" class="left_" v-show="_pc">

        <transition name="slide-fade">
          <div >
            <div class="list-content bg-purple " >
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
              </el-input>
              <el-tree
                :data="data"
                :props="defaultProps" @node-click="handleNodeClick"
                :filter-node-method="filterNode"
                ref="tree2"
              >
              </el-tree>
            </div>


            <!--<div class="transition-box">el-collapse-transition</div>-->
            <!--<div class="transition-box">el-collapse-transition</div>-->
          </div>
        </transition>
        </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="left_" v-show="leftLayout">

        <transition name="slide-fade">
          <div >
            <div class="list-content bg-purple " >
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
              </el-input>
              <el-tree
                :data="data"
                :props="defaultProps" @node-click="handleNodeClick"
                :filter-node-method="filterNode"
                ref="tree2"
              >
              </el-tree>
            </div>


            <!--<div class="transition-box">el-collapse-transition</div>-->
            <!--<div class="transition-box">el-collapse-transition</div>-->
          </div>
        </transition>
      </el-col>
      <!--垫底占位-->
      <el-col  :xs="5" :sm="5" :md="5" :lg="5" :xl="5" v-show="_pc">
        <div class="list-content">
        </div>
      </el-col>



      <el-col :xs=mainw :sm=mainw :md=mainw :lg=mainw :xl=mainw>
        <div class="list-content bg-purple-light">
          <component :is="comName"></component>
        </div>
      </el-col>
      <!--<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>-->
      <!--<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>-->
    </el-row>
  </div>
</template>
<style scoped>
  /*标题*/
  .header_title{
    position: fixed;
    top: 0rem;

    width: 100%;
    height: 2rem;
    background: orange;
    z-index: 999;
  }
  /*标题按钮*/
  .header_title_menu{

  }
  .left_{
    position: fixed;
    left: 0rem;
  }


  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    height: 100vh;
  }

  /* 屏幕小于 375 px　则是下面的样式 */
  /*@media screen and (max-device-width: 600px) {*/
    /*.menu_ {*/
      /*background-color: #91e64f;*/
      /*color: #333;*/
      /*text-align: center;*/
      /*height: 100vh;*/
      /*width: 200px;*/
    /*}*/
  /*}*/

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    /*text-align: center;*/
    height: 100vh;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  /*.el-container:nth-child(5) .el-aside,*/
  /*.el-container:nth-child(6) .el-aside {*/
  /*line-height: 260px;*/
  /*}*/

  /*.el-container:nth-child(7) .el-aside {*/
  /*line-height: 320px;*/
  /*}*/
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 4rem;
  }

  .list-content {
    border-radius: 4px;
    min-height: 100vh;
  }

  .row_ {
    margin-top: 2rem;
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
<script>
  export default {
    components: {
      HelloWorld: () => import('./documents/HelloWorld'),
      element_ui: () => import('./documents/element_ui'),
      vueStart: () => import('./documents/vueStart'),
      xgplayerDoc: () => import('./documents/xgplayerDoc'),
      lifeDoc: () => import('./documents/lifeDoc'),
      imageDoc: () => import('./documents/imageDoc'),
      componentImportDoc: () => import('./documents/componentImportDoc'),

      ParentMessageChildrenRefsDoc: () => import('./documents/parentMessageChildrenRefsDoc'),
      childrenMessageParentEmitDoc: () => import('./documents/childrenMessageParentEmitDoc'),


    },
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      }
    },
    data() {
      return {
        show: false,
        filterText: '',
        comName: 'HelloWorld',//当前 component 中的 :is 帮i的那个的组件的名称
        show3 : true,
        mainw : 19,

        _pc : false,
        _mobile : false,
        leftLayout : false,
        data: [
          {
            label: '首页',
            index: 'HelloWorld'
          },
          {
            label: 'Vue',
            children: [
              {
                label: '开始',
                children: [{
                  label: 'webStorm创建Vue',
                  index: 'vueStart'
                }]
              },
              {
                label: '引用UI样式',
                children: [
                  {
                    label: 'element-ui',
                    index: 'element_ui'
                  }
                ]
              },
              {
                label: '基础',
                children: [
                  {
                    label: '生命周期',
                    index: 'lifeDoc'
                  }
                ]
              },
              {
                label: '功能',
                children: [
                  {
                    label: '插入视频',
                    index: 'xgplayerDoc'
                  },
                  {
                    label: '加入图片',
                    index: 'imageDoc'
                  },
                ]
              },
              {
                label: '组件通讯',
                children: [
                  {
                    label: '父到子',
                    children: [
                      {
                        label: '$refs模式',
                        index: 'parentMessageChildrenRefsDoc'
                      },
                    ]
                  },
                  {
                    label: '子到父',
                    children: [
                      {
                        label: '$emit模式',
                        index: 'childrenMessageParentEmitDoc'
                      },
                    ]

                  },
                ]
              },

            ]
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }

    },
    mounted() {
    },
    created() {
      if (this.utils.isMobile()) {
        // alert("手机")
        this.showMobile()
      }else{
        // alert("PC")
        this.showPC()
      }

    },
    methods: {
      showPopup() {
        this.show = true;
      },
      showPC(){
        this._pc = true;
        this._mobile = false;


      },
      showMobile(){
        this._pc = false;
        this._mobile = true;
        this.switchs()
      },
      switchs(){
        if (this._mobile) {
            this.mainw = 24
        }else {
          this.mainw = 19
        }
      },
      clickTitle(){

      },
      clickMenu(){
        this.leftLayout = !this.leftLayout
      },
      handleNodeClick(data) {
        if (data.index) {
          console.log(data.index);


          this.comName = data.index;
        }

      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    }
  };
</script>
