<template>
  <div class="tree-single">
    <div class="left-tree">
      <div style="display:flex; padding: 5px;"><el-input placeholder="输入关键字进行过滤" size="medium" clearable v-model="left_filterText"></el-input></div>
      <div class="tree-single-tree">
        <el-tree
          ref="ref_left_tree"
          :data="left_tree_data"
          :show-checkbox="is_check"
          node-key="tree_flame_id"
          default-expand-all
          :filter-node-method="filterNode"
          :props="defaultProps"
          @check-change="leftCheckChange"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <span v-for="ref_field_name in display_ref_field_names" :key="ref_field_name">
                <span style="color:red;">{{ data[ref_field_name] }}</span>
                <span>-</span>
              </span>
              <span>{{ node.label }}</span>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="operation">
      <el-button class="button" type="primary" icon="el-icon-d-arrow-right" @click="clickAllRight">全部右移</el-button>
      <el-button class="button" type="warning" :disabled="is_right_move_button" icon="el-icon-arrow-right" @click="clickSelectedRight">选中右移</el-button>
      <el-button class="button" type="primary" icon="el-icon-d-arrow-left" @click="clickAllLeft">全部左移</el-button>
      <el-button class="button" type="warning" :disabled="is_left_move_button" icon="el-icon-arrow-left" @click="clickSelectedLeft">选中左移</el-button>
    </div>
    <div class="right-tree">
      <!-- @current-change="currentNodeChange"
      @check-change="checkChange" -->
      <div style="display:flex; padding: 5px;"><el-input placeholder="输入关键字进行过滤" size="medium" clearable v-model="left_filterText"></el-input></div>
      <div class="tree-single-tree">
        <el-tree
          ref="ref_right_tree"
          :data="right_tree_data"
          :show-checkbox="is_check"
          node-key="tree_flame_id"
          default-expand-all
          :filter-node-method="filterNode"
          :props="defaultProps"
          @check-change="rightCheckChange"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <span v-for="ref_field_name in display_ref_field_names" :key="ref_field_name">
                <span style="color:red;">{{ data[ref_field_name] }}</span>
                <span>-</span>
              </span>
              <span>{{ node.label }}</span>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import system from '../../api/system.js';
import tree from '../../utils/TreeNode.js';
import _ from 'lodash';
export default {
  name: 'tree-single',
  props: {
    show_dialog: {
      type: Boolean,
      default: false
      // required: true
    },
    is_check: {
      type: Boolean,
      default: true
    },
    filter_data: {
      type: Array
    },
    // right_data:{
    //   type:Array,
    // },
    table_name: {
      type: String
      // required: true
    }
  },
  watch: {
    left_filterText(val) {
      this.$refs.ref_left_tree.filter(val);
    },
    // right_data(newV,oldV) {
    //   let that = this;
    //   console.log('right_data===',newV,oldV);
    //   that.right_soure_data = newV;
    // },
    immediate: true
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName'])
  },
  components: {},
  data() {
    return {
      left_filterText: '',
      // 左边的树的数据
      left_tree_data: [],
      // 右边的树的数据
      right_tree_data: [],
      // 表中原始数据
      all_soure_data: [],
      right_data: [],
      // 右边的原始数据
      right_soure_data: [],
      // 左边的原始数据
      left_soure_data: [],
      is_right_move_button: true,
      is_left_move_button: true,
      display_lable_field_name: 'flame_id',
      display_value_field_name: 'flame_id',
      display_ref_field_names: [],
      parent_field_name: 'p_id',
      defaultProps: {
        children: 'children',
        label: 'flame_id'
      }
    };
  },
  created() {},
  mounted() {
    let that = this;
    that.setNodeInfo();
    that.loadData();
  },
  methods: {
    // 设置右边树的数据
    setRightData(data) {
      let that = this;
      that.right_data = data;
      that.right_soure_data =[];
      that.right_data.forEach(e => {
        that.right_soure_data.push(e);
      });
      if (that.all_soure_data.length === 0) {
        that.loadData();
      } else {
        that.computeTree();
      }
    },
    // 设置 树型节点的基本信息 要显示的值及要显示的文本
    setNodeInfo() {
      let that = this;
      let table_info = that.getOneTableInfoByTableName(that.table_name);
      console.log('table_info====', table_info);
      if (table_info !== null && table_info !== undefined) {
        that.display_lable_field_name = table_info.display_label_field_name;
        that.display_value_field_name = table_info.display_value_field_name;
        that.defaultProps.label = that.display_lable_field_name;
        let display_ref_field_names = table_info.display_ref_field_names;
        if (display_ref_field_names != null) {
          console.log('display_ref_field_names==', display_ref_field_names);
          that.display_ref_field_names = table_info.display_ref_field_names.split(',');
          // 移出前后台的空格
          for (let i = 0; i < that.display_ref_field_names.length; i++) {
            that.display_ref_field_names[i] = that.display_ref_field_names[i].trim();
          }
          console.log('display_ref_field_names=========', that.display_ref_field_names);
        }
      } else {
        that.display_lable_field_name = 'flame_id';
        that.display_value_field_name = 'flame_id';
        that.defaultProps.label = 'flame_id';
        that.display_ref_field_names = [];
      }
    },
    // 过滤方法
    filterNode(value, data) {
      let that = this;
      console.log('filer_data', data);
      if (!value) return true;
      return data[that.display_lable_field_name].indexOf(value) !== -1;
    },
    loadData() {
      let that = this;
      let commit_Data = {};
      // that.table_name= 'sys_flame_org';
      system.allSearch(that.table_name, commit_Data, res => {
        // that.table_data = res.items;
        that.all_soure_data = res.items;
        console.log('ALL01', that.all_soure_data);
        tree.getTree(that.all_soure_data, that.display_value_field_name, that.parent_field_name);
        // that.all_soure_data = tree.getTreeChildNumber(that.all_soure_data, that.display_value_field_name, that.parent_field_name);
        // console.log('ALL02', that.all_soure_data);
        that.computeTree();
      });
    },
    // 全部右移
    clickAllRight() {
      let that = this;
      that.right_soure_data = [];
      that.all_soure_data.forEach(e => {
        that.right_soure_data.push(e);
      });
      that.computeTree();
      that.$emit('change', that.right_soure_data);
    },
    rightCheckChange() {
      let that = this;
      let left_tree_select_Nodes = that.$refs.ref_left_tree.getCheckedNodes(false, false);
      that.is_right_move_button = left_tree_select_Nodes.length === 0;
      let right_tree_select_Nodes = that.$refs.ref_right_tree.getCheckedNodes(false, false);
      that.is_left_move_button = right_tree_select_Nodes.length === 0;
      that.$emit('checkchange', left_tree_select_Nodes.length, right_tree_select_Nodes.length);
    },
    // 选中的左移
    clickSelectedLeft() {
      let that = this;
      // 得到左边树选中的节点，包括半选状态的数据

      let left_tree_select_Nodes = that.$refs.ref_right_tree.getCheckedNodes(false, false);
      console.log('right_tree_select_Nodes-1', left_tree_select_Nodes);

      left_tree_select_Nodes.forEach(e => {
        let index = -1;
        for (let i = 0; i < that.right_soure_data.length; i++) {
          if (e[that.display_value_field_name] === that.right_soure_data[i][that.display_value_field_name]) {
            index = i;
            break;
          }
        }
        if (index !== -1) {
          that.right_soure_data.splice(index, 1);
        }
        console.log('right', that.right_soure_data);
      });
      that.computeTree();
      that.is_left_move_button = true;
      that.$emit('change', that.right_soure_data);
    },
    // 左边的数据勾选发生变化时事件
    leftCheckChange() {
      let that = this;
      let left_tree_select_Nodes = that.$refs.ref_left_tree.getCheckedNodes(false, true);
      that.is_right_move_button = left_tree_select_Nodes.length === 0;
      let right_tree_select_Nodes = that.$refs.ref_right_tree.getCheckedNodes(false, true);
      // that.$emit('checkchange', left_tree_select_Nodes,right_tree_select_Nodes);
      that.$emit('checkchange', left_tree_select_Nodes.length, right_tree_select_Nodes.length);
    },
    // 选中的右移
    clickSelectedRight() {
      let that = this;
      // 得到左边树选中的节点，包括半选状态的数据

      let left_tree_select_Nodes = that.$refs.ref_left_tree.getCheckedNodes(false, true);
      console.log('left_tree_select_Nodes-1', left_tree_select_Nodes);

      // 得到左边树半选状态的数据
      // that.left_half_checked_data = that.$refs.ref_left_tree.getHalfCheckedNodes();
      // console.log('left_HalfCheckedNodes', that.left_half_checked_data);

      // 将选中的节数据，放入到 右边的树的原始数据中
      left_tree_select_Nodes.forEach(e => {
        let find = false;
        let find_flame_id = e[that.display_value_field_name];
        // 除出右边已经存在的节点
        for (let i = 0; i < that.right_soure_data.length; i++) {
          let r_flame_id = that.right_soure_data[i][that.display_value_field_name];
          if (find_flame_id === r_flame_id) {
            find = true;
            break;
          }
        }
        if (find === false) {
          let ee = _.cloneDeep(e);
          ee.children = [];
          // console.log('eee', ee);
          that.right_soure_data.push(ee);
        }
      });
      console.log('left_tree_select_Nodes-2', left_tree_select_Nodes);
      that.computeTree();
      that.is_right_move_button = true;
      that.$emit('change', that.right_soure_data);
    },
    // 全部左移
    clickAllLeft() {
      let that = this;
      that.right_soure_data = [];
      that.computeTree();
      that.$emit('change', that.right_soure_data);
    },
    // 计算通过右边树的原始数据得到左边树的原始数据
    computeTree() {
      let that = this;
      that.left_soure_data = [];

      console.log('Oldall_soure_data', that.all_soure_data);
      console.log('left_soure_data--1', that.left_soure_data);

      that.right_tree_data = tree.getTree(that.right_soure_data, that.display_value_field_name, that.parent_field_name);
      // 1 先从所有数据中 除去右边树中有数据，
      that.all_soure_data.forEach(e => {
        // 要找到主键
        let find_flame_id = e[that.display_value_field_name];
        let find = false;
        console.log('查询:', e['config_name'], e.child_number);
        // 在右边树中找到是否存节点的数据
        for (let i = 0; i < that.right_soure_data.length; i++) {
          let r_flame_id = that.right_soure_data[i][that.display_value_field_name];
          // console.log('r_flame_id====',r_flame_id);
          if (r_flame_id === find_flame_id) {
            console.log('右边的:', that.right_soure_data[i]['config_name'], that.right_soure_data[i].child_number);
            if (e.child_number === that.right_soure_data[i].child_number) {
              find = true;
            } else {
              find = false;
            }
            break;
          }
        }
        if (find === false) {
          let ee = _.cloneDeep(e);
          ee.children = [];
          that.left_soure_data.push(ee);
        }
      });
      that.left_tree_data = tree.getTree(that.left_soure_data, that.display_value_field_name, that.parent_field_name);
      that.$emit('checkchange', 0, 0);
    }
  }
};
</script>

<style lang="scss" scoped>
.tree-single {
  display: flex;
  justify-content: space-between;
  .left-tree {
    width: calc((100% - 155px) / 2);
    border: 1px solid #ebeef5;
  }
  .operation {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px;
    .button {
      margin: 4px;
    }
  }
  .right-tree {
    width: calc((100% - 155px) / 2);
    border: 1px solid #ebeef5;
  }
  .tree-single-tree {
    display: -webkit-box;
    overflow: scroll;
    width: 100%;
    height: 500px;
  }
  .el-tree {
    margin: 0 auto auto;
  }
}
</style>
