<template>
  <el-container class="container">
    <myToolBar />
  </el-container>
</template>

<script>
import myToolBar from '@/test-component'
export default {
  name: 'Page-three',
  components: {
    myToolBar
  },
  data() {
    return {
      // 当前公司
      current_tree: {
        name: null,
        date: null
      },
      // 树状数据
      tree_data: [
        {
          name: '公司 1',
          date: '2020-11-15',
          children: [{
            name: '公司 2',
            date: '2020-11-15',
            children: [{
              name: '公司 3',
              date: '2020-11-15',
            }]
          }]
        },
      ],
      // 树状配置
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 显示弹窗
      show_dialog: true,
      // 默认树状
      tree_default: [
        {
          id: 1,
          name: '总公司',
          date: '2020-11-15',
          children: [
            {
              id: 2,
              name: '子公司A',
              date: '2020-11-15',
              children: [
                {
                  id: 4,
                  name: '小公司 1',
                  date: '2020-11-15',
                  children: []
                },
                {
                  id: 5,
                  name: '小公司 2',
                  date: '2020-11-15',
                  children: []
                },
                {
                  id: 6,
                  name: '小公司 3',
                  date: '2020-11-15',
                  children: []
                },
                {
                  id: 7,
                  name: '小公司 4',
                  date: '2020-11-15',
                  children: []
                },
              ]
            },
            {
              id: 3,
              name: '子公司B',
              date: '2020-11-15',
              children: [
                {
                  id: 8,
                  name: '公司 5',
                  date: '2020-11-15',
                  children: []
                },
                {
                  id: 9,
                  name: '公司 6',
                  date: '2020-11-15',
                  children: []
                },
                {
                  id: 10,
                  name: '公司 7',
                  date: '2020-11-15',
                  children: []
                },
              ]
            }
          ]
        },
      ],
      // 所选树状
      tree_selected: []
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log('节点', data);
      let that = this
      that.current_tree = data
    },
    // 关闭弹窗
    handleClose() {
      console.log('关闭弹窗')
    },
    // 递归查询叶子节点
    findLeaf(id, tree) {
      let that = this
      for (let item of tree) {
        if (id === item.id) {
          // console.log('找到了', item)
          return [_.cloneDeep(item)]
        } else if (item.children) {
          // console.log('有子节点', item.id)
          let return_item = that.findLeaf(id, item.children)
          if (return_item) {
            return_item.unshift(_.cloneDeep(item))
            // console.log('返回值', return_item)
            return return_item
          }
        }
      }
    },
    // 向右移动
    moveRight() {
      let that = this
      let selected_ids = that.$refs.tree_default.getCheckedKeys()
      let leaf_list = []
      for (let selected_id of selected_ids) {
        leaf_list.push(that.findLeaf(selected_id, that.tree_default))
      }
      console.log('右移叶子节点', leaf_list)
      let add_list = _.cloneDeep(leaf_list)
      let del_list = _.cloneDeep(leaf_list)
      that.addLeafList(add_list, that.tree_selected)
      that.delLeafList(del_list, that.tree_default)
    },
    // 向左移动
    moveLeft() {
      let that = this
      let selected_ids = that.$refs.tree_selected.getCheckedKeys()
      console.log('左移叶子节点', selected_ids)
      let leaf_list = []
      for (let selected_id of selected_ids) {
        leaf_list.push(that.findLeaf(selected_id, that.tree_selected))
      }
      let add_list = _.cloneDeep(leaf_list)
      let del_list = _.cloneDeep(leaf_list)
      that.addLeafList(del_list, that.tree_default)
      that.delLeafList(add_list, that.tree_selected)
    },
    // 查询叶子节点是否存在
    hasLeaf(leaf_item, tree_level) {
      console.log('查询叶子节点', leaf_item, tree_level)
      let that = this
      let node_exists = false
      for (let level_idx in tree_level) {
        // 存在，返回引索
        if (leaf_item.id === tree_level[level_idx].id) {
          node_exists = true
          return {
            node_exists: node_exists,
            level_idx: level_idx
          }
        }
      }
      // 不存在
      return {node_exists: node_exists}
    },
    // 添加多个叶子节点
    addLeafList(leaf_list, tree) {
      let that = this
      for (let leaf of leaf_list) {
        that.addLeaf(leaf, tree)
      }
    },
    // 添加叶子节点
    addLeaf(leaf, tree) {
      // console.log('加一个节点', leaf, tree)
      let that = this
      for (let i in leaf) {
        // 循环第 i 层
        let result = that.hasLeaf(leaf[i], tree)
        if (result.node_exists) {
          // console.log('节点存在', result, tree[result.level_idx])
          leaf.splice(0, 1)
          that.addLeaf(leaf, tree[result.level_idx].children)
        } else {
          // console.log('节点不存在')
          // 节点不存在，添加节点
          leaf[i].children = []
          tree.push(leaf[i])
          if (i !== leaf.length - 1) {
            leaf.splice(0, 1)
            // console.log('下一级', leaf, tree[tree.length - 1].children)
            that.addLeaf(leaf, tree[tree.length - 1].children)
          }
        }
      }
    },
    // 删除多个叶子节点
    delLeafList(leaf_list, tree) {
      let that = this
      for (let leaf of leaf_list) {
        that.delLeaf(leaf, tree)
      }
    },
    // 删除叶子节点
    delLeaf(leaf, tree) {
      console.log('删除一个节点', leaf, tree)
      let that = this
      for (let i in leaf) {
        // 循环第 i 层
        let result = that.hasLeaf(leaf[i], tree)
        if (result.node_exists) {
          for (let tree_item of tree) {
            console.log('有子集', 'children' in tree_item, tree_item.children, tree)
            if ('children' in tree_item && tree_item.children.length > 0) {
              let new_leaf = _.cloneDeep(leaf)
              new_leaf.splice(0, 1)
              if (that.delLeaf(new_leaf, tree_item.children)) {
                that.delLeaf(leaf, tree)
              }
            } else {
              // 没有子集或子集长度为0
              tree.splice(result.level_idx, 1)
              return true
            }
          }
        }
      }
    }
  },
  mounted() {
    let that = this
  }
}
</script>

<style lang="scss" scoped>
  .container {
    flex-shrink: 1;
  }
  .aside {
    height: 100%;
  }
  // 树状穿梭框
  .tree-transfer {
    height: 400px;
    display: flex;
    // align-items: center;
    .tree {
      width: calc((100% - 120px - #{$spacing-normal * 2}) / 2);
      border: 1px solid $theme-gray-3;
      border-radius: $rounded-corner-normal;
    }
    .btns {
      padding: $spacing-normal;
      width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .btn {
        margin-top: $spacing-normal;
        margin-left: 0;
      }
    }
  }
</style>