<template>

   <div>

     <div class="all-div" v-if="model.name">

       <div class="itemRow" :style="{ marginLeft:model.level*20+'px' }">

         <span v-show="model.children.length" @click="expandOrCollapse">

           <img v-if="model.isOpen" src="../../static/img/down.png">

           <img v-else src="../../static/img/right.png">

         </span>

         <div class="hover-div" @mouseover="flag=true" @mouseout="flag=false">

           <span @click="jump(model.url)">{{model.name}}</span>

           <span v-show="flag==true" @click="add"><img src="../../static/img/add.png"></span>

           <span v-show="flag==true" @click="remove(model)"><img src="../../static/img/delete.png"></span>

           <span v-show="flag==true" @click="edit"><img src="../../static/img/edit.png"></span>

           <!--<span class="asce" v-show="model.children.length" @click="orderAsce">↑</span>

         <span class="desc" v-show="model.children.length" @click="orderDesc">↓</span>-->

         </div>

       </div>

     </div>

     <navigation v-if="model.isOpen" v-for="row in model.children" :key="row.name" :model="row" :length="model.children.length"></navigation>

   </div>

 </template>

 <script>

   export default {

     name: 'navigation',

     // 使用`编辑树`组件需要传递的数据

     props: {

       // 编辑树对象

       model: {

         type: Object

       },

       length: {

         type: Number

       }

     },

     data () {

       return {

         flag:false

       }

     },

     methods: {

       // 添加节点

       add(){

         let val = prompt("请输入要添加的节点的名称：");

         if (val) {

           this.model.children.push({

             name: val,

             level: this.model.level + 1,

             isOpen: true,

             children: []

           });

         }

       },

       // 移除节点

       remove(model){

         var self = this;

         alert('确认删除吗?');

         if (self.$parent.model) {

           self.$parent.model.children.forEach((item, index) => {

             if (item.name == model.name) {

             self.$parent.model.children.splice(index, 1);

           }

         })

         }

       },

       // 编辑节点名称

       edit(){

         var self = this;

         let rename = prompt('请输入修改后的节点名称：');

         // 使用正则进行重命名的差错校验

         if (!rename.length) {

           alert('请输入正确的节点名称');

           return;

         }

         self.model.name = rename;

       },

       /**

        * 展开/收起功能

        */

       expandOrCollapse(){

         this.model.isOpen = !this.model.isOpen;

       },

       jump(url){

         var self = this;

         self.$router.push({path:url})

       }

       /*// 升序排列

        orderAsce(){

        function compare(property) {

        return function (a, b) {

        var value1 = a[property];

        var value2 = b[property];

        return value1 - value2;

        }

        }

        this.model.children.sort(compare('name'));

        },

        // 降序排列

        orderDesc(){

        this.orderAsce();

        this.model.children.reverse();

        }*/

     },

   }

 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->

 <style scoped>

   .all-div{

     margin-left: 6%;

   }

   .itemRow {

     text-align: left;

     padding-top: 2%;

     padding-bottom: 2%;

   }

   .itemRow span,.itemRow img{

     cursor: pointer;

   }

   .itemRow span{

     font-size: 1.1vw;

   }

   .hover-div{

     display:inline-block;

   }

 </style>

 <template>

   <div id="all">

     <tree :model="root" :length="length"></tree>

   </div>

 </template>

 <style scoped>

   #all{

     width:100%;

     height: 100%;

   }

 </style>

 <script>

   import tree from './tree.vue'

   export default{

     data(){

       return{

         root:{

           name:"根节点",

           level:0,

           isOpen:true,

           children:[

             {

               name:"节点1",

               level:1,

               url:"/homePage/middle/navLeftFirst",

               isOpen:false,

               children:[

                 {

                   name:"节点1-1",

                   level:2,

                   isOpen:true,

                   children:[]

                 },

                 {

                   name:"节点1-2",

                   level:2,

                   isOpen:true,

                   children:[]

                 }

               ]

             },

             {

               name:"节点2",

               level:1,

               url:"/homePage/middle/navLeftSecond",

               isOpen:false,

               children:[

                 {

                   name:"节点2-1",

                   level:2,

                   isOpen:true,

                   children:[]

                 },

                 {

                   name:"节点2-2",

                   level:2,

                   isOpen:true,

                   children:[]

                 }

               ]

             }

           ]

         },

         length:2

       }

     },

     components:{

       tree

     }

   }

 </script>