<template>
    <div class="ht-base-transfer-tree">
        <div class="tree-transfer ht-transfer ht-transfer-customize-list">
            <div class="ht-transfer-list">
                <div class="ht-transfer-list-header">
                    <span class="ht-transfer-list-header-selected">
                        <span>{{RecordNumLeft}}项</span>
                        <span class="ht-transfer-list-header-title">
                        {{transferTitle[0]}}
                        </span>
                    </span>
                </div>
                <div class="ht-transfer-list-body">
                    <div class="ht-transfer-list-body-customize-wrapper">
                        <ht-base-tree ref='transferTreeLeft' :data="leftNode" show-checkbox @on-check-change="checkChangeLeft" v-if="flag"></ht-base-tree>
                    </div>
                </div>
            </div>
            <div class="ht-transfer-operation">
                <ht-base-button style="display: block" @click="arrowRight" v-bind:disabled="disLeft">
                    <ht-base-icon type='LiRa_right'></ht-base-icon>
                </ht-base-button>
                <ht-base-button @click="arrowLeft" v-bind:disabled="disRight">
                    <ht-base-icon type='LiRa_left'></ht-base-icon>
                </ht-base-button>
            </div>
            <div class="ht-transfer-list">
                <div class="ht-transfer-list-header">
                    <span class="ht-transfer-list-header-selected">
                        <span>{{RecordNumRight}}项</span>
                        <span class="ht-transfer-list-header-title">
                            {{transferTitle[1]}}
                        </span>
                    </span>
                </div>
                <div class="ht-transfer-list-body" v-if="notData">
                    <div class="ht-transfer-list-body-not-found">
                        <div class="ht-empty ant-empty-normal ht-empty-small">
                            <div class="ht-empty-image">

                                <img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K">
                            </div>
                            <p class="ht-empty-description">
                                暂无数据
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ht-transfer-list-body" v-if="haveData">
                    <ul class="ht-transfer-list-content">
                        <div class="LazyLoad is-visible" style="height: 32px;">
                                <ht-base-checkbox style='display: block; min-height: 32px;  padding: 6px 12px;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;' v-for="(item,index) in rightNode" :key="index" @on-change="checkChangeRight" v-if="update" ref="rightCheckboxStatus">{{item.title}}</ht-base-checkbox>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseTransferTree',
    props:{
        transferTitle:{
            type:Array,
            default:[]
        },
        leftNode:{
            type:Array,
            default:[]
        },
        rightNode:{
            type:Array,
            default:[]
        }
    },
      data(){
        return{
            flag:true,
            update:false,
            disRight:true,
            disLeft:true,
            notData:true,
            haveData:false,
            selectRightNode:[],
            selectLeftNode:[],
            RecordNumLeft:this.leftNode[0].totalNum,
            leftNodeTotal:this.leftNode[0].totalNum,
            RecordNumRight:0
        }
      },
      methods:{
          checkChangeLeft(currentArr){
            this.selectLeftNode=currentArr;
            //选择tree节点时RecordNum相应做改变
              if(this.selectLeftNode.length>0){
                  this.disLeft=false;
                  this.RecordNumLeft=this.selectLeftNode.length+'/'+this.leftNodeTotal;
              }else{
                  this.disLeft=!this.disLeft;
                  this.RecordNumLeft=0;
              }
          },
          checkChangeRight(){
              let arr=[];
              this.rightNode.forEach((item,index)=>{
                  if(this.$refs['rightCheckboxStatus'][index]['checkboxClasses'][1]['ivu-checkbox-checked']==true){
                      arr.push(item);
                      this.selectRightNode=arr;
                  }else{
                      this.selectRightNode.splice(index,1);
                  }
              })
              if(this.selectRightNode.length>0){
                  this.disRight=false;
                  this.RecordNumRight=this.selectRightNode.length+'/'+this.rightNode.length
              }else{
                  this.disRight=!this.disRight;
                  this.formData.RecordNumRight=0;
              }
          },
          //将源目标数据移到右侧目标列操作
          arrowRight(){
              //判断左侧源目标是否有选中数据
              this.$emit('arrowChange',this.selectLeftNode)
              this.$nextTick(()=>{
                  this.flag=false;
                  // 将所有左侧源目标选中项的disabled掉
                  let _this = this;
                  this.leftNode.forEach(item => {
                      if(item.children){
                          item.children.forEach(i => {
                              if(i.children){
                                  i.children.forEach(j => {
                                      _this.rightNode.forEach(m => {
                                          if(item.title == m.title){
                                              item.disabled = true;
                                          }
                                          if(i.title == m.title){
                                              i.disabled = true;
                                          }
                                          if(j.title == m.title){
                                              j.disabled = true;
                                          }
                                      })
                                  })
                              }
                          })
                      }
                  });
                  this.$nextTick(()=>{
                      this.flag = true;
                  })
                  //赋值给右侧总数据项
                  this.RecordNumRight=this.rightNode.length;
                  this.RecordNumLeft=this.leftNodeTotal-this.rightNode.length;
                  this.disLeft=!this.disLeft;
                  if(this.rightNode.length>0){
                      this.notData=false;
                      this.haveData=true;
                      this.update=true;
                  }
              })
          },
          //将右侧目标列数据移到左侧原目标中操作
          arrowLeft(){
            //将右侧选择的数据与左侧节点进行判断，如果相同则将左侧节点复选框恢复正常状态
              let _this = this;
              this.leftNode.forEach(item => {
                  if(item.children){
                      item.children.forEach(i => {
                          if(i.children){
                              i.children.forEach(j => {
                                  _this.selectRightNode.forEach(m => {
                                      if(item.title == m.title){
                                          item.disabled = false;
                                          item.checked=false;
                                      }
                                      if(i.title == m.title){
                                          i.disabled = false;
                                          i.checked=false;
                                      }
                                      if(j.title == m.title){
                                          j.disabled = false;
                                          j.checked=false;
                                      }
                                  })
                              })
                          }
                      })
                  }
              });
              this.update=false;
              this.disRight=!this.disRight;
              //删除选择右侧数据
              if(this.selectRightNode.length==this.rightNode.length){
                 for(var i in this.selectRightNode){
                     this.rightNode.splice(i,this.rightNode.length)
                 }
              }else{
                  for(var i in this.rightNode){
                      for(var k in this.selectRightNode){
                          if(this.rightNode[i].title==this.selectRightNode[k].title){
                              this.rightNode.splice(i,this.selectRightNode.length);
                          }
                      }
                  }
              }
              this.$nextTick(()=>{
                  this.update=true;
              })
              //赋值给右侧总数据项
              this.RecordNumRight=this.rightNode.length;
              this.RecordNumLeft=this.leftNodeTotal-this.rightNode.length;
              if(this.RecordNumRight>0){
                  this.notData=false;
                  this.haveData=true;
              }else{
                  this.notData=true;
                  this.haveData=false;
              }
          }
      }
  }
</script>
<style>
    .ht-base-transfer-tree {

    }
</style>

