<template>
    <div>
      <ul class="all-list" v-if='show'>
        <li v-for="(item) in list" :key="item[nodeKey]">
          <div class="tree-item expend">
            <!-- 使用vuex保存选中状态，勾选父组件，自动选中其全部子组件 -->
            <input type="checkbox" :checked="checked.includes(item.id)" @click="changeBox(item)" v-if="showCheck" />
            <div
              class="icon-size"
              @click="toggle(item[nodeKey])"
              
            >
            <span :style="{visibility:(item[props.children] && item[props.children].length)? '':'hidden'}">
              <i class="iconfont icon-zhankai-zhijiao" v-if="!openArr.includes(item[nodeKey])"></i>
                <i class="iconfont icon-shouqi-zhijiao" v-else></i>  
            </span>
            </div>
            <div :id="'right' + item.sort">
                <span class="content" style="
                      word-break: break-word;
                      white-space: normal;
                      height: 100%;
                    ">{{ item[props.name] }}</span>
            </div>
            
          </div>
          <!-- 递归 -->
          <div
            v-show="openArr.includes(item[nodeKey])"
          >
            <leftTree class="item" :list="item[props.children]" :props="props" :nodeKey="nodeKey" :expends="openArr" :inner="true"></leftTree>
          </div>
        </li>
      </ul>
    </div>
</template>
   
  <script>
  export default {
    name: "leftTree",
    data() {
      return {
        // expends: [],
        checkboxIds: [],
        checked:[],
        treeNode:[],
        openArr:this.expends,
        show:true
      };
    },
    props: {
      list: {
        type: Array,
        default:()=>{
            return []
        }
      },
      showCheck:{
        default:false
      },
      props:{
        default:()=>{
            return {
                name:'name',
                children:'children'
            }
        }
      },
      nodeKey:{
        default:'id'
      },
      expends:{
        default:()=>{
            return []
        }
      },
      inner:{}
    },
   mounted() {
    this.getAllNode(this.list)
   },
   watch:{
    expends(val){
        var data = [...new Set(this.openArr.concat(val))]
        this.openNode(data)
    },
    list(){
        this.getAllNode(this.list)
        
    }
   },
    methods: {
        getAllNode(data,parentNode){
            if(data.length>0){
                data.forEach(item => {
                    this.treeNode.push(
                        {
                            nodeKey:item[this.nodeKey],
                            parentNode:parentNode
                        }
                    )
                    if(item.children && item.children.length){
                        this.getAllNode(item.children,item[this.nodeKey])
                    }
                });
            }
            if(this.openArr.length>0){
                this.openNode(this.openArr)
            }
            // var arr = JSON.parse(JSON.stringify(this.expends))
            // this.expends.forEach(item => {
            //     this.parentNode(item)
            // });
        },
        openNode(data){
            var arr = JSON.parse(JSON.stringify(data))
            data.forEach(item=>{
                var a = this.treeNode.find(i=>{
                    return i.nodeKey == item
                })
                if(a){
                    if(a.parentNode==0 || a.parentNode){
                        if(arr.indexOf(a.parentNode)==-1){
                            arr.push(a.parentNode)
                        }
                        this.parentNode(arr,a.parentNode)
                    }
                }
            })
            this.$set(this,'openArr',arr)
            // this.show = false
            // this.$nextTick(()=>{
            //     this.show = true
            // })
            // this.openArr = arr
        },
        parentNode(arr,nodeKey){
            var a = this.treeNode.find(i=>{
                return i.nodeKey == nodeKey
            })    
            if(a){
                if(a.parentNode==0 || a.parentNode){
                    if(arr.indexOf(a.parentNode)==-1){
                        arr.push(a.parentNode)
                    }
                    this.parentNode(arr,a.parentNode)
                }
            }                    
        },
      toggle(i) {
        // 如果有则删除
        if (this.openArr.includes(i)) {
          let index = this.openArr.indexOf(i);
          this.openArr.splice(index, 1);
        } else {
          // 如果没有则添加
          this.openArr.push(i);
        }
      },
   
      changeBox(data) {
        this.checked = data
      }
    },
  };
  </script>
  <style lang='scss' scoped>
  .item {
    // padding-left: 4px;
  }
  .bold {
    font-weight: bold;
  }
  ul {
    line-height: 1.5em;
    list-style-type: none;
    white-space: nowrap;
    position: relative;
  }
  li {
    list-style-type: none;
    padding: 4px;
    user-select: none;
  }
  input[type="checkbox"] {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    margin: 1.5px;
    margin-right: 4px;
    z-index: 0;
  }
   
  .tree-item {
    display: flex;
    // align-items: center;
  }
  .expend {
    position: relative;
  }
   
  .expend::before {
    content: "";
    position: absolute;
    width: 6px;
    // left: 15px;
    top: 9px;
    border-top: 1px dotted #c3c5c8;
  }
   
  .all-list::before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 40px);
    // left: 12px;
    // top: 20px;
    border-left: 1px dotted #c3c5c8;
  }
   
  .item .expend::before {
    content: "";
    position: absolute;
    width: 6px;
    left: -4px;
    top: 9px;
    border-top: 1px dotted #c3c5c8;
  }
   
  .item .all-list::before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 12px);
    // left: 22px;
    top: 0;
    border-left: 1px dotted #c3c5c8;
  }
   
  .item ul {
    height: 100%;
    // padding-left: 2em;
  }
   
  .content {
    // padding-left: 4px;
  }
  .spacing {
    display: inline-block;
    width: 18.5px;
    height: 1em;
  }
  .icon-size {
    display: inline-block;
    width: 30px;
    height: 30px;
    z-index: 10;
    margin-right: 4px;
    margin-left:-20px;
    i{
        font-size: 30px;
    }
  }
   
//   .expend-icon {
//     background: url("../../../assets/tree/expend.png") #05193a no-repeat center;
//     background-size: cover;
//   }
//   .reduce-icon {
//     background: url("../../../assets/tree/reduce.png") #05193a no-repeat center;
//     background-size: cover;
//   }
  </style>