<template>
  <div>
    <div style="margin-bottom:20px;display: grid;grid-template-columns: 80px auto;">
      <span style="margin-top:20px;color: white;">选择目录：</span>
      <el-tree class="myTree" :data="treeDatas" node-key="id" show-checkbox :expand-on-click-node="false" :default-expanded-keys="[fl_type]"
        highlight-current :props="defaultProps" :check-strictly="true" ref="tree" @check-change="handleCheckChange"
        :default-checked-keys="clientDetails_check_type"
        :indent=1>
      </el-tree>
    </div>
    <div class="fileCopyDiv">
      <div class="copyDiv">
        <el-button type="primary"  @click="copyTransfer()">转移</el-button>
        <!-- <el-button type="primary" @click="Transfer()">转移</el-button>   -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    treeData: {
      type: Array
    },
    treeId:{
      type: Array
    },
    flType:{
      type:Number
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeDatas: [],
      clientDetails_check_type: [],
      fl_type:0,
    };
  },
  methods: {
    handleCheckChange(node, isSelected) {
      if (isSelected) {
        this.clientDetails_check_type.push(node.id);
      } else {
        this.clientDetails_check_type = this.clientDetails_check_type.filter(item => {
          return item != node.id
        })
      }
    },
    copyTransfer(){
      if(this.clientDetails_check_type.length==0){
        this.$message({
          type: "warning",
          message: "至少选择一个目录",
        });
        return
      }
      this.$emit("onSubmit", {data:this.clientDetails_check_type});
    },
    // Transfer(){
    //   this.$emit("onSubmit", {data:this.clientDetails_check_type});
    // }

  },
  watch: {
    treeData: {
      handler(newVal, oldVal) {
        this.treeDatas = newVal;
      },
      immediate: true
    },
    flType:{
      handler(newVal, oldVal) {
        this.fl_type = newVal;
      },
      immediate: true
    },
    treeId:{
      handler(newVal, oldVal) {
        this.clientDetails_check_type = newVal;
      },
      immediate: true
    }
  }
};
</script>
<style lang="scss" scope>
.fileCopyDiv {
  height: 100px;
}

.copyDiv {
  display: flex;
  justify-content: space-evenly;
}
</style>
