<template>
  <div class="wl-transfer transfer" :style="{ width, height }">
    <div class="component-transfer">
      <!-- 左侧穿梭框 原料框 -->
      <div class="transfer-left">
        <div class="transfer-title">
          <el-checkbox v-if="from_checked_all" :indeterminate="from_is_indeterminate" v-model="from_check_all"
            @change="fromAllBoxChange"></el-checkbox>
          <span>{{ fromTitle }}</span>
          <slot name="title-left"></slot>
        </div>
        <!-- 内容区 -->
        <div class="transfer-main">
          <slot name="from"></slot>
          <el-input v-if="filter" @input="onQueryChanged"  clearable size="small" :placeholder="placeholder" v-model.trim="filterFrom"
            :prefix-icon="Search" class="filter-tree"></el-input>
          <el-tree ref="fromTree" v-loading="fromTreeDataLoading" show-checkbox :lazy="lazy" :indent="indent"
            :draggable="draggable" :allow-drag="allowDrag" :allow-drop="allowDrop" :icon-class="iconClass"
            :node-key="node_key" :load="leftloadNode" :data="self_from_data" :accordion="accordion"
            :props="selfDefaultProps" :default-expand-all="openAll" :highlight-current="highLight"
            :check-strictly="checkStrictly" :render-content="renderContentLeft" :filter-node-method="filterNodeFrom"
            :check-on-click-node="checkOnClickNode" :render-after-expand="renderAfterExpand"
            :expand-on-click-node="expandOnClickNode" :default-checked-keys="defaultCheckedKeys"
            :default-expanded-keys="from_expanded_keys" @check="fromTreeChecked">
            <template #default="{ node, data }">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <slot name="content-left" :node="node" :data="data">
                  <ellipsis-tooltip :content="node.label" class-name="w100f"
                    :refName="'tooltipOver' + node.id"></ellipsis-tooltip>
                </slot>
              </span>
            </template>
          </el-tree>
          <slot name="left-footer"></slot>
        </div>
      </div>
      <!-- 穿梭区 按钮框 -->
      <div class="transfer-center">

        <template v-if="button_text">
          <p class="transfer-center-item">
            <el-button type="primary" @click="addToAims(true)" :disabled="from_disabled || props.readOnly" v-preReClick>
              {{ fromButton || "添加" }}
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-button>
          </p>
          <p class="transfer-center-item">
            <el-button type="primary" @click="removeToSource" :disabled="to_disabled || props.readOnly"
              :icon="ArrowLeft" v-preReClick>{{
    toButton
    || "移除" }}</el-button>
          </p>
        </template>

        <template v-else>
          <p class="transfer-center-item">
            <el-button type="primary" @click="addToAims(true)" :icon="ArrowRight"
              :disabled="from_disabled || props.readOnly" v-preReClick></el-button>
          </p>
          <p class="transfer-center-item">
            <el-button type="primary" @click="removeToSource" :disabled="to_disabled || props.readOnly"
              :icon="ArrowLeft" v-preReClick></el-button>
          </p>
        </template>
      </div>
      <!-- 右侧穿梭框 目标框 -->
      <div class="transfer-right">
        <div class="transfer-title">
          <el-checkbox :indeterminate="to_is_indeterminate" v-model="to_check_all"
            @change="toAllBoxChange"></el-checkbox>
          <span>{{ toTitle }}</span>
          <slot name="title-right"></slot>
        </div>
        <!-- 内容区 -->
        <div class="transfer-main">
          <slot name="to"></slot>
          <el-input v-if="filter" clearable size="small" v-model.trim="filterTo" :placeholder="placeholder"
            :prefix-icon="Search" class="filter-tree"></el-input>
          <el-tree slot="to" ref="toTree" show-checkbox :indent="indent" :draggable="draggable" :allow-drag="allowDrag"
            :allow-drop="allowDrop" :icon-class="iconClass" :lazy="lazyRight" :data="self_to_data" :node-key="node_key"
            :load="rightloadNode" :props="selfDefaultProps" :default-expand-all="openAll" :highlight-current="highLight"
            :check-strictly="checkStrictly" :filter-node-method="filterNodeTo" :render-content="renderContentRight"
            :check-on-click-node="checkOnClickNode" :render-after-expand="renderAfterExpand"
            :expand-on-click-node="expandOnClickNode" :default-expanded-keys="to_expanded_keys" @check="toTreeChecked">

            <template #default="{ node, data }">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <slot name="content-right" :node="node" :data="data">
                  <ellipsis-tooltip :content="node.label" class-name="w100f"
                    :refName="'tooltipOver' + node.id"></ellipsis-tooltip>
                </slot>
              </span>
            </template>
          </el-tree>
          <slot name="right-footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="TreeTransfer">

import { ref, watch, computed } from "vue";
import { Search, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";

import { differenceBy } from "lodash-es";
import EllipsisTooltip from "../EllipsisTooltip.vue";


const flattenDeep = (arr, childs) => {
  arr = arr || [];
  var childs = childs || 'Children';
  return arr.reduce(function (flat, item) {
    return flat.concat(item, item[childs] ? flattenDeep(item[childs], childs) : []);
  }, []);
};
const onQueryChanged = (query: string) => {
  fromTree.value!.filter(query);
};
const findParents = (item, arr, options = { id: 'id', parentId: 'parentId', root: 0 }) => {
  let _parents: any = [];
  return (function findParent(item) {
    if (item[options.parentId] === options.root) return _parents;
    const parent = arr.find((i) => i[options.id] === item[options.parentId]);
    if (parent) {
      _parents.push(parent);
      return findParent(parent);
    } else {
      return _parents;
    }
  })(item);
};

const $emit = defineEmits(["add-btn", "remove-btn", "left-check-change", "right-check-change"]);

const props = defineProps({
  // 宽度
  width: {
    type: String,
    default: "100%",
  },
  // 高度
  height: {
    type: String,
    default: "320px",
  },
  // 标题
  title: {
    type: Array,
    default: () => ["源列表", "目标列表"],
  },
  from_checked_all: {
    type: Boolean,
    default: true
  },
  fromTreeDataLoading: {
    type: Boolean,
    default: false,
  },
  readOnly: {
    type: Boolean,
    default: false,
  },
  // 穿梭按钮名字
  button_text: Array,
  // 源数据
  from_data: {
    type: Array,
    default: () => [],
  },
  // 选中数据
  to_data: {
    type: Array,
    default: () => [],
  },
  // el-tree 配置项
  defaultProps: Object,
  // el-tree node-key 必须唯一
  node_key: {
    type: String,
    default: "guid",
  },
  // 自定义 pid参数名
  pid: {
    type: String,
    default: "pid",
  },
  // 自定义根节点pid的值，用于结束递归
  rootPidValue: {
    type: [String, Number],
    default: 0,
  },
  // 是否启用筛选
  filter: {
    type: Boolean,
    default: true,
  },
  // 是否展开所有节点
  openAll: {
    type: Boolean,
    default: false,
  },
  // 左侧自定义树节点
  renderContentLeft: Function,
  // 右侧自定义树节点
  renderContentRight: Function,
  // 穿梭后是否展开节点
  transferOpenNode: {
    type: Boolean,
    default: true,
  },
  // 源数据 默认选中节点
  defaultCheckedKeys: {
    type: Array<any>,
    default: () => [],
  },
  // 源数据 默认展开节点
  defaultExpandedKeys: {
    type: Array,
    default: () => [],
  },
  // 筛选placeholder
  placeholder: {
    type: String,
    default: "输入关键字进行搜索",
  },
  // 自定义筛选函数
  filterNode: Function,
  // 默认穿梭一次默认选中数据
  defaultTransfer: {
    type: Boolean,
    default: false,
  },
  // 是否开启arrayToTree
  arrayToTree: {
    type: Boolean,
    default: false,
  },
  // 是否启用懒加载
  lazy: {
    type: Boolean,
    default: false,
  },
  // 是否右侧树也启用懒加载
  lazyRight: {
    type: Boolean,
    default: false,
  },
  // 懒加载的回调函数
  lazyFn: Function,
  // 是否高亮当前选中节点，默认值是 false。
  highLight: {
    type: Boolean,
    default: false,
  },
  // 是否遵循父子不关联
  checkStrictly: {
    type: Boolean,
    default: false,
  },
  // 父子不关联模式
  checkStrictlyType: {
    type: String,
    default: "authorization",
    validator: function (value: string) {
      /**
       * @name 父子不关联的三种模式，第一种适合业务授权场景，后两种不存在快速选中需要手选
       * @param authorization授权模式：左侧选择子节点自动带着父节点；右侧选择父节点自动带着子节点；此模式两侧可能存在相同的非叶子节点
       * @param puppet木偶模式：纯父子不关联穿梭，但要保持完整的树形结构，只自动带上穿梭到对面拼接所需的骨架结构；此模式两侧可能存在相同的非叶子节点
       * @param modular积木模式：纯父子不关联穿梭，也不保持完整的树形结构，像积木一样右侧要形成树形则需要把左侧拆除，左侧拆的越多右侧形成的树结构越完整；此模式左右两侧保证严格的唯一性
       */
      return ["authorization", "puppet", "modular"].indexOf(value) !== -1;
    },
  },
  // 是否每次只打开一个同级树节点
  accordion: {
    type: Boolean,
    default: false,
  },
  // 是否在第一次展开某个树节点后才渲染其子节点
  renderAfterExpand: {
    type: Boolean,
    default: true,
  },
  // 是否在点击节点的时候展开或者收缩节点
  expandOnClickNode: {
    type: Boolean,
    default: true,
  },
  // 是否在点击节点的时候选中节点
  checkOnClickNode: {
    type: Boolean,
    default: false,
  },
  // 相邻级节点间的水平缩进，单位为像素
  indent: {
    type: Number,
    default: 16,
  },
  // 	自定义树节点的图标
  iconClass: String,
  // 是否开启拖拽节点功能
  draggable: Boolean,
  // 判断节点能否被拖拽
  allowDrag: Function,
  // 拖拽时判定目标节点能否被放置
  allowDrop: Function,
});

const from_is_indeterminate = ref(false); // 源数据是否半选
const from_check_all = ref(false); // 源数据是否全选
const from_expanded_keys: any = ref([]) // 源数据展开节点
const from_disabled = ref(true); // 添加按钮是否禁用
const from_check_keys: any = ref([]); // 源数据选中key数组 以此属性关联穿梭按钮，总全选、半选状态
const from_array_clone = ref([]); // 左侧数据一维化后存储为json格式
const to_check_all = ref(false); // 目标数据是否全选
const to_is_indeterminate = ref(false); // 目标数据是否半选
const to_expanded_keys: any = ref([]); // 目标数据展开节点
const to_disabled = ref(true) // 移除按钮是否禁用
const to_check_keys: any = ref([]); // 目标数据选中key数组 以此属性关联穿梭按钮，总全选、半选状态
const to_array_clone = ref([]) // 右侧数据一维化后存储为json格式
const filterFrom = ref(""); // 源数据筛选
const filterTo = ref("") // 目标数据筛选
const strictly_parents = ref([]) // 当使用父子不关联时，将左侧数据向右侧移动时，为了保证在右侧能形成树结构，必须将父节点也移动
const strictly_transferred = ref([]) // 父子不关联时已经穿梭过的节点记录，用于第一次拼接父节点穿梭后，其他子节点不再拼接父节点
//fromtree节点
const fromTree = ref();
//totree节点
const toTree = ref();

// 左侧数据
const self_from_data = computed(() => {
  const _form_data = props.from_data;
  if (props.checkStrictly) {
    from_array_clone.value = flattenDeep(_form_data, selfDefaultProps.value.children);
  }
  return _form_data;
});
// 右侧数据
const self_to_data = computed(() => {
  const _to_data = props.to_data;
  if (props.checkStrictly) {
    to_array_clone.value = flattenDeep(_to_data, selfDefaultProps.value.children);
  }
  return _to_data;
});
// 左侧菜单名
const fromTitle = computed(() => {
  let [text] = props.title;
  return text;
});
// 右侧菜单名
const toTitle = computed(() => {
  let [, text] = props.title;
  return text;
})

const fromTreeDataLoading = computed(() => {
  return props.fromTreeDataLoading;
})
// 上部按钮名
const fromButton = computed(() => {
  if (Array.isArray(props.button_text)) {
    return props.button_text[0];
  }
  return "";
})
// 下部按钮名
const toButton = computed(() => {
  if (Array.isArray(props.button_text)) {
    return props.button_text[1];
  }
  return "";
})
// 配置项
const selfDefaultProps: any = computed(() => {
  return {
    label: "label",
    children: "children",
    isLeaf: 'isLeaf',
    ...props.defaultProps,
  };
})

// 左侧 状态监测
watch(() => from_check_keys.value, (val) => {
  if (val.length > 0) {
    // 穿梭按钮是否禁用
    from_disabled.value = false;
    // 总半选是否开启
    from_is_indeterminate.value = true;
    // 总全选是否开启 - 根据选中节点中为根节点的数量是否和源数据长度相等
    let allCheck = false;
    if (!props.checkStrictly) {
      const roots = val.filter((item) => item[props.pid] === props.rootPidValue);
      allCheck = roots.length === self_from_data.value.length;
    } else {
      allCheck = val.length === from_array_clone.value.length;
    }
    if (allCheck) {
      // 关闭半选 开启全选
      from_is_indeterminate.value = false;
      from_check_all.value = true;
    } else {
      from_is_indeterminate.value = true;
      from_check_all.value = false;
    }
  } else {
    from_disabled.value = true;
    from_is_indeterminate.value = false;
    from_check_all.value = false;
  }
});
// 右侧 状态监测
watch(() => to_check_keys.value, (val) => {
  if (val.length > 0) {
    // 穿梭按钮是否禁用
    to_disabled.value = false;
    // 总半选是否开启
    to_is_indeterminate.value = true;
    // 总全选是否开启 - 根据选中节点中为根节点的数量是否和源数据长度相等
    let allCheck = false;
    if (!props.checkStrictly) {
      const roots = val.filter((item) => item[props.pid] === props.rootPidValue);
      allCheck = roots.length === self_to_data.value.length;
    } else {
      allCheck = val.length === to_array_clone.value.length;
    }
    if (allCheck) {
      // 关闭半选 开启全选
      to_is_indeterminate.value = false;
      to_check_all.value = true;
    } else {
      to_is_indeterminate.value = true;
      to_check_all.value = false;
    }
  } else {
    to_disabled.value = true;
    to_is_indeterminate.value = false;
    to_check_all.value = false;
  }
});
// 左侧 数据筛选
watch(() => filterFrom.value, (val) => {
  fromTree.value.filter(val);
});
// 右侧 数据筛选
watch(() => filterTo.value, (val) => {
  toTree.value.filter(val);
});
// 监视默认选中
watch(() => props.defaultCheckedKeys, async (val: any[]) => {
  from_check_keys.value = val || [];
  if (props.defaultTransfer && from_check_keys.value.length) {
    await nextTick();
    addToAims(false);
  }
}, {
  immediate: true
}
),
  watch(() => props.defaultExpandedKeys, (val: any[]) => {
    let _form = new Set(from_expanded_keys.value.concat(val));
    from_expanded_keys.value = [..._form];
    let _to = new Set(to_expanded_keys.value.concat(val));
    to_expanded_keys.value = [..._to];
  }, {
    immediate: true
  }
  );
// -------------------------------提供输出函数---------------------
// 添加按钮
const addToAims = (emit) => {
  let start = new Date().valueOf();
  // 获取选中通过穿梭框的keys - 仅用于传送纯净的id数组到父组件同后台通信
  let keys = fromTree.value.getCheckedKeys();
  // 获取半选通过穿梭框的keys - 仅用于传送纯净的id数组到父组件同后台通信
  let harfKeys = fromTree.value.getHalfCheckedKeys();
  // 选中节点数据
  let allArrayCheckedNodes = fromTree.value.getCheckedNodes();
  let arrayCheckedNodes: any = [];
  let arrayHalfCheckedNodes: any = [];
  if (filterFrom.value) {
    allArrayCheckedNodes.forEach((n) => {
      if (n.children?.find((child) => fromTree.value.getNode(child[selfDefaultProps.value?.value || 'id'])?.visible == false)) {
        arrayHalfCheckedNodes.push(n);
      } else if (fromTree.value.getNode(n[selfDefaultProps.value?.value || 'id'])?.visible) {
        arrayCheckedNodes.push(n);
      }
    });
  } else {
    arrayCheckedNodes = allArrayCheckedNodes;
  }
  // 半选中节点数据
  arrayHalfCheckedNodes = arrayHalfCheckedNodes.concat(fromTree.value.getHalfCheckedNodes());
  // 自定义参数读取设置
  let children__ = selfDefaultProps.value.children || "children";
  let pid__ = props.pid || "pid";
  let id__ = props.node_key || "id";
  let root__ = props.rootPidValue || 0;
  // 将目标侧数据拉平为一维数组，查询速度比每个节点去目标侧递归查询快
  to_array_clone.value = flattenDeep(
    self_to_data.value,
    selfDefaultProps.value.children
  );

  // 父子不关联的写法
  if (props.checkStrictly) {
    from_array_clone.value = flattenDeep(
      self_from_data.value,
      selfDefaultProps.value.children
    );
    // 清空由左向右移动时自动补充的父节点
    strictly_parents.value = [];
    checkStrictlyAdd(arrayCheckedNodes, { children__, pid__, id__, root__ });
  } else {
    // 第一步：排除在对面已经存在的半选节点，然后将需穿梭半选节点的children设置为[]并穿梭;
    arrayHalfCheckedNodes.forEach((i) => {
      let harfInTarget = to_array_clone.value.some((t) => t[id__] === i[id__]);
      if (harfInTarget) return;
      let _parent = root__ !== i[pid__] ? i[pid__] : null;
      toTree.value.append(
        Object.assign({}, i, {
          [children__]: [],
        }),
        _parent
      );
    });
    // 第二步：先将对面存在的节点抛弃
    let notInTargetNodes = differenceBy(arrayCheckedNodes, to_array_clone.value, id__);
    // 第三步：若a节点的父节点也在选中节点中，则将a节点也抛弃，最后将剩余的节点穿梭
    notInTargetNodes.forEach((i) => {
      let parentInHere = notInTargetNodes.some((t) => t[id__] === i[pid__]);
      if (parentInHere) return;
      let _parent = root__ !== i[pid__] ? i[pid__] : null;
      toTree.value.append(i, _parent);
    });
    // 左侧删掉选中数据
    arrayCheckedNodes.map((item) => fromTree.value.remove(item));

  }

  // 处理完毕按钮恢复禁用状态
  from_check_keys.value = [];
  // 清空对面选中
  toTree.value.setCheckedKeys([]);
  to_check_all.value = false;
  to_is_indeterminate.value = false;

  // 目标数据节点展开
  if (props.transferOpenNode) {
    to_expanded_keys.value = keys;
  }
  // 传递信息给父组件
  const all_move_nodes = [...arrayCheckedNodes, ...strictly_parents.value];

  emit &&
    $emit("add-btn", self_from_data.value, self_to_data.value, {
      keys,
      nodes: all_move_nodes,
      harfKeys,
      halfNodes: arrayHalfCheckedNodes,
    });

  // 处理完毕取消选中
  fromTree.value.setCheckedKeys([]);
  if (filterFrom.value) {
    fromTree.value.filter(filterFrom.value);
  }
};
// 移除按钮
const removeToSource = () => {

  // 获取选中通过穿梭框的keys - 仅用于传送纯净的id数组到父组件同后台通信
  let keys = toTree.value.getCheckedKeys();
  // 获取半选通过穿梭框的keys - 仅用于传送纯净的id数组到父组件同后台通信
  let harfKeys = toTree.value.getHalfCheckedKeys();
  // 获取选中通过穿梭框的nodes 选中节点数据
  let allArrayCheckedNodes = toTree.value.getCheckedNodes();
  let arrayCheckedNodes: any = [];
  let arrayHalfCheckedNodes: any = [];
  if (filterTo.value) {
    allArrayCheckedNodes.forEach((n) => {
      if (n.children?.find((child) => toTree.value.getNode(child[selfDefaultProps.value?.value || 'id'])?.visible == false)) {
        arrayHalfCheckedNodes.push(n);
      } else if (toTree.value.getNode(n[selfDefaultProps.value?.value || 'id'])?.visible) {
        arrayCheckedNodes.push(n);
      }
    });
  } else {
    arrayCheckedNodes = allArrayCheckedNodes;
  }
  // 半选中节点数据
  arrayHalfCheckedNodes = arrayHalfCheckedNodes.concat(toTree.value.getHalfCheckedNodes());
  // 自定义参数读取设置
  let children__ = selfDefaultProps.value.children || "children";
  let pid__ = props.pid || "pid";
  let id__ = props.node_key || "id";
  let root__ = props.rootPidValue || 0;
  // 将目标侧数据拉平为一维数组，查询速度比每个节点去目标侧递归查询快
  from_array_clone.value = flattenDeep(
    self_from_data.value,
    selfDefaultProps.value.children
  );

  // 父子不关联的写法
  if (props.checkStrictly) {
    to_array_clone.value = flattenDeep(
      self_to_data.value,
      selfDefaultProps.value.children
    );

    checkStrictlyRemove(arrayCheckedNodes, { children__, pid__, id__, root__ });
  } else {
    // 第一步：排除在对面已经存在的半选节点，然后将需穿梭半选节点的children设置为[]并穿梭;
    arrayHalfCheckedNodes.forEach((i) => {
      let harfInTarget = from_array_clone.value.some((t) => t[id__] === i[id__]);
      if (harfInTarget) return;
      let _parent = root__ !== i[pid__] ? i[pid__] : null;
      fromTree.value.append(
        Object.assign({}, i, {
          [children__]: [],
        }),
        _parent
      );
    });
    // 第二步：先将对面存在的节点抛弃
    let notInTargetNodes = differenceBy(
      arrayCheckedNodes,
      from_array_clone.value,
      id__
    );
    // 第三步：若a节点的父节点也在选中节点中，则将a节点也抛弃，最后将剩余的节点穿梭
    notInTargetNodes.forEach((i) => {
      let parentInHere = notInTargetNodes.some((t) => t[id__] === i[pid__]);
      if (parentInHere) return;
      let _parent = root__ !== i[pid__] ? i[pid__] : null;
      fromTree.value.append(i, _parent);
    });

    // 右侧删掉选中数据
    arrayCheckedNodes.map((item) => toTree.value.remove(item));
  }

  // 处理完毕按钮恢复禁用状态
  to_check_keys.value = [];
  // 清空对面选中
  fromTree.value.setCheckedKeys([]);
  from_check_all.value = false;
  from_is_indeterminate.value = false;
  // 目标数据节点展开
  if (props.transferOpenNode && !props.lazy) {
    from_expanded_keys.value = keys;
  }

  // 传递信息给父组件
  $emit("remove-btn", self_from_data.value, self_to_data.value, {
    keys,
    nodes: arrayCheckedNodes,
    harfKeys,
    halfNodes: arrayHalfCheckedNodes,
  });
  // 处理完毕取消选中
  toTree.value.setCheckedKeys([]);
  if (filterTo.value) {
    toTree.value.filter(filterTo.value);
  }
};
/**
 * @name 父子不关联-授权模式的add
 * @param {Array} nodes 选中节点
 * @param {Object} options 配置项{ children__, pid__, id__, root__ }
 */
const checkStrictlyAdd = (nodes, options) => {
  // 第一步：将对面存在的节点抛弃
  let notInTargetNodes = differenceBy(nodes, to_array_clone.value, options.id__);
  // 第一步：整理选中数据，不知道子节点是都都选中，先将子节点都置空，下一步再组装避免判断每个节点的的子节点应不应该穿梭
  const new_nodes = notInTargetNodes.map((i) => {
    let new_node = Object.assign({}, i, {
      [options.children__]: [],
    });
    return new_node;
  });
  // 第三步：组装能选中数据中能父子关联的，将子节点插入父节点后只需穿梭父节点
  const assembly_data = new_nodes.reduce((pre: any, item, idx, arr) => {
    const find_parent: any = arr.find((i) => i[options.id__] == item[options.pid__]);
    // 没找到父节点，将节点保留
    if (!find_parent) return pre.concat(item);
    // 找到父节点的，将节点推入父节点的children，不保留此节点
    find_parent[options.children__].push(item);
    return pre;
  }, []);
  // 第四步：穿梭组装好的数据
  assembly_data.forEach((i) => {
    toTree.value.append(i, i[options.pid__]);
  });
  // 第五步：移除叶子节点，移除后全选的父节点没了子节点自己也变成了叶子节点，继续移除
  loopRemoveCheckedLeafNodes(options);
};
// 一直移除左侧选中叶子节点，直到选中节点中不再有叶子节点
const loopRemoveCheckedLeafNodes = (options) => {
  const leafNodes = fromTree.value.getCheckedNodes(true);
  if (!leafNodes.length) return;
  for (const i of leafNodes) {
    fromTree.value.remove(i);
  }
  loopRemoveCheckedLeafNodes(options);
};
/**
 * @name 父子不关联-授权模式的remove
 * @param {Array} nodes 选中节点
 * @param {Object} options 配置项{ children__, pid__, id__, root__ }
 */
const checkStrictlyRemove = (nodes, options) => {
  // 第一步：将对面存在的节点抛弃
  let notInTargetNodes = differenceBy(nodes, from_array_clone.value, options.id__);
  // 第一步：整理选中数据，不知道子节点是都都选中，先将子节点都置空，下一步再组装避免判断每个节点的的子节点应不应该穿梭
  const new_nodes = notInTargetNodes.map((i: any) => {
    let new_node = Object.assign({}, i, {
      [options.children__]: [],
      __childrenLength: Array.isArray(i[options.children__])
        ? i[options.children__].length
        : 0,
    });
    return new_node;
  });
  // 第三步：组装能选中数据中能父子关联的，将子节点插入父节点后只需穿梭父节点
  const assembly_data = new_nodes.reduce((pre: any, item, idx, arr) => {
    const find_parent: any = arr.find((i) => i[options.id__] == item[options.pid__]);
    // 没找到父节点，将节点保留
    if (!find_parent) return pre.concat(item);
    // 找到父节点的，将节点推入父节点的children，不保留此节点
    find_parent[options.children__].push(item);
    return pre;
  }, []);
  // 第四步：穿梭组装好的数据
  assembly_data.forEach((i) => {
    deepFindParent(i, options);
  });
  // 第五步：移除本侧选中节点
  nodes.forEach((i) => {
    toTree.value.remove(i);
  });
};
// 递归查找对面存在能穿梭的父节点
const deepFindParent = (node, options) => {
  if (node[options.pid__] === options.root__) {
    fromTree.value.append(node);
    return;
  }
  const parentInThere = from_array_clone.value.some(
    (i) => i[options.id__] === node[options.pid__]
  );
  if (parentInThere) {
    fromTree.value.append(node, node[options.pid__]);
  } else {
    const parentHere = to_array_clone.value.find(
      (i) => i[options.id__] === node[options.pid__]
    );
    const _parent = Object.assign({}, parentHere, { [options.children__]: [node] });
    deepFindParent(_parent, options);
  }
};
// 异步加载左侧
const leftloadNode = (node, resolve) => {
  props.lazyFn && props.lazyFn(node, resolve, "left");
};
// 异步加载右侧
const rightloadNode = (node, resolve) => {
  props.lazyFn && props.lazyFn(node, resolve, "right");
};
// 源树选中事件 - 是否禁用穿梭按钮
const fromTreeChecked = async (nodeObj, treeObj) => {
  from_check_keys.value = treeObj.checkedNodes;
  // 父子不关联-授权模式
  if (
    props.checkStrictly &&
    props.checkStrictlyType == "authorization" &&
    from_check_keys.value.some((i) => i[props.node_key] === nodeObj[props.node_key])
  ) {
    authorizationAutoCheckLeft(nodeObj);
  }
  await nextTick();
  $emit("left-check-change", nodeObj, treeObj, from_check_all.value, fromTree.value.getNode(nodeObj[props.node_key]));
};
// 父子不关联-授权模式-左侧选中子节点自动选中父节点
const authorizationAutoCheckLeft = (node) => {
  // 查询所有父节点
  const parents = findParents(node, from_array_clone.value, {
    id: props.node_key,
    parentId: props.pid,
    // children: selfDefaultProps.value.children,
    root: <number>props.rootPidValue,
  });
  if (!parents.length) return;
  // 过滤掉已经选中过的父节点
  const autoAddParents = differenceBy(parents, from_check_keys.value, props.node_key);
  autoAddParents.forEach((i) => {
    fromTree.value.setChecked(i, true);
    from_check_keys.value.push(i);
  });
};
// 目标树选中事件 - 是否禁用穿梭按钮
const toTreeChecked = async (nodeObj, treeObj) => {
  to_check_keys.value = treeObj.checkedNodes;
  // 父子不关联-授权模式
  if (
    props.checkStrictly &&
    props.checkStrictlyType == "authorization" &&
    to_check_keys.value.some((i) => i[props.node_key] === nodeObj[props.node_key])
  ) {
    authorizationAutoCheckRight(nodeObj);
  }
  await nextTick();
  $emit("right-check-change", nodeObj, treeObj, to_check_all.value);
};
// 父子不关联-授权模式-右侧选中父节点自动选中子节点
const authorizationAutoCheckRight = (nodeObj) => {
  // 查询所有子节点
  const children = flattenDeep([nodeObj], selfDefaultProps.value.children);
  if (!children.length) return;
  // 过滤掉已经选中过的子节点
  const autoAddChildren = differenceBy(children, to_check_keys.value, props.node_key);
  autoAddChildren.forEach((i) => {
    to_check_keys.value.push(i);
    toTree.value.setChecked(i, true);
  });
};
// 源数据 总全选checkbox
const fromAllBoxChange = (val) => {
  if (!self_from_data.value.length) return;
  if (val) {
    from_check_keys.value = props.checkStrictly
      ? flattenDeep(self_from_data.value, selfDefaultProps.value.children)
      : self_from_data.value;
    fromTree.value.setCheckedNodes(from_check_keys.value);
  } else {
    fromTree.value.setCheckedNodes([]);
    from_check_keys.value = [];
  }
  $emit("left-check-change", null, null, from_check_all.value);
};
// 目标数据 总全选checkbox
const toAllBoxChange = (val) => {
  if (!self_to_data.value.length) return;
  if (val) {
    to_check_keys.value = props.checkStrictly
      ? flattenDeep(self_to_data.value, selfDefaultProps.value.children)
      : self_to_data.value;
    toTree.value.setCheckedNodes(to_check_keys.value);
  } else {
    toTree.value.setCheckedNodes([]);
    to_check_keys.value = [];
  }
  $emit("right-check-change", null, null, to_check_all.value);
};
// 源数据 筛选
const filterNodeFrom = (value, data) => {
  if (props.filterNode) {
    return props.filterNode(value, data, "form");
  }
  
  if (!value) return true;
  if(data.children) {
    fromTree.value.getNode(data).expand()
  }
  return data[selfDefaultProps.value.label].includes(value)
};
// 目标数据筛选
const filterNodeTo = (value, data) => {
  if (props.filterNode) {
    return props.filterNode(value, data, "to");
  }
  
  if (!value) return true;
  return data[selfDefaultProps.value.label].includes(value)
};

// 以下为提供方法 ----------------------------------------------------------------方法--------------------------------------
/**
 * @name 清空选中节点
 * @param {String} type left左边 right右边 all全部 默认all
 */
const clearChecked = (type = "all") => {
  if (type === "left") {
    fromTree.value.setCheckedKeys([]);
    from_is_indeterminate.value = false;
    from_check_all.value = false;
  } else if (type === "right") {
    toTree.value.setCheckedKeys([]);
    to_is_indeterminate.value = false;
    to_check_all.value = false;
  } else {
    fromTree.value.setCheckedKeys([]);
    toTree.value.setCheckedKeys([]);
    from_is_indeterminate.value = false;
    from_check_all.value = false;
    to_is_indeterminate.value = false;
    to_check_all.value = false;
  }
};
/**
 * @name 获取选中数据
 */
const getChecked = () => {
  // 左侧选中信息
  let leftKeys = fromTree.value.getCheckedKeys();
  let leftHarfKeys = fromTree.value.getHalfCheckedKeys();
  let leftNodes = fromTree.value.getCheckedNodes();
  let leftHalfNodes = fromTree.value.getHalfCheckedNodes();
  // 右侧选中信息
  let rightKeys = toTree.value.getCheckedKeys();
  let rightHarfKeys = toTree.value.getHalfCheckedKeys();
  let rightNodes = toTree.value.getCheckedNodes();
  let rightHalfNodes = toTree.value.getHalfCheckedNodes();
  return {
    leftKeys,
    leftHarfKeys,
    leftNodes,
    leftHalfNodes,
    rightKeys,
    rightHarfKeys,
    rightNodes,
    rightHalfNodes,
  };
};
/**
 * @name 设置选中数据
 * @param {Array} leftKeys 左侧ids
 * @param {Array} rightKeys 右侧ids
 */
const setChecked = (leftKeys = [], rightKeys = []) => {
  fromTree.value.setCheckedKeys(leftKeys);
  toTree.value.setCheckedKeys(rightKeys);
};
/**
 * @name 清除搜索条件
 * @param {String} type left左边 right右边 all全部 默认all
 */
const clearFilter = (type = "all") => {
  if (type === "left") {
    filterFrom.value = "";
  } else if (type === "right") {
    filterTo.value = "";
  } else {
    filterFrom.value = "";
    filterTo.value = "";
  }
};

// defineExpose({
//   addToAims
// })
</script>

<style lang="scss" scoped>
.wl-transfer {
  position: relative;
  overflow: hidden;

  .el-tree {
    width: 100%;
    display: inline-block !important;
  }

  .transfer-left {
    position: absolute;
    top: 0;
    left: 0;
  }

  .transfer-right {
    position: absolute;
    top: 0;
    right: 0;
  }

  .transfer-right-item {
    height: calc((100% - 41px) / 2);
  }

  .transfer-right-small {
    height: 41px;
  }

  .transfer-right-only {
    height: 100%;
  }

  .transfer-main {
    padding: 10px;
    height: calc(100% - 37px);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;

    .el-input {

      line-height: 32px;
      height: 32px;
    }
  }

  .transfer-main>.el-tree {
    height: calc(100% - 42px);
    overflow: auto;
  }

  .transfer-left,
  .transfer-right {
    border: 1px solid #d9d9d9;
    width: 45%;
    height: 100%;
    box-sizing: border-box;
    vertical-align: middle;

    .remove-tree-item {
      position: absolute;
      right: 24px;
    }
  }

  .transfer-center {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 10%;
    transform: translateY(-50%);
    text-align: center;
  }

  .transfer-center-item {
    padding: 10px;
    overflow: hidden;

    .el-button--primary.is-disabled,
    .el-button--primary.is-disabled:active,
    .el-button--primary.is-disabled:focus,
    .el-button--primary.is-disabled:hover {
      color: #fff;
      background-color: #ebedf0;
      border-color: #ebedf0;
    }
  }

  .transfer-title {
    border-bottom: 1px solid #d9d9d9;
    padding: 0 15px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #212121;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
  }

  .transfer-title .el-checkbox {
    margin-right: 10px;
  }

  .filter-tree {
    margin-bottom: 10px;
  }
}
</style>