<template>
  <div class="tree-single">
    <div style="display:flex; padding: 5px;"><el-input placeholder="输入关键字进行过滤" size="medium" clearable v-model="filterText"></el-input></div>
    <div class="tree-single-tree">
      <el-tree
        ref="ref_tree"
        :draggable="is_draggable"
        :data="tree_data"
        :show-checkbox="is_check"
        @current-change="currentNodeChange"
        @check-change="checkChange"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        node-key="tree_flame_id"
        :filter-node-method="filterNode"
        :props="defaultProps"
      >
        <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>
</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_draggable: {
      type: Boolean,
      default: false
    },
    is_check: {
      type: Boolean,
      default: true
    },
    ref_level: {
      type: Number,
      default: 0
    },
    filter_data: {
      type: Array
    },
    table_name: {
      type: String
      // required: true
    }
  },
  watch: {
    filterText(val) {
      this.$refs.ref_tree.filter(val);
    },
    show_dialog: function(old_val, new_val) {
      let that = this;
      if (new_val === true) {
        that.loadData();
      }
    }
  },
  computed: {
    // 表对于的后台的模型名称
    ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName'])
  },
  components: {},
  data() {
    return {
      filterText: '',
      tree_data: [],
      display_lable_field_name: 'flame_id',
      display_value_field_name: 'flame_id',
      parent_field_name: 'p_id',
      display_ref_field_names: [],
      all_soure_data: [],

      defaultProps: {
        children: 'children',
        label: 'flame_id'
      }
    };
  },
  created() {},
  mounted() {
    let that = this;
    that.setNodeInfo();
    that.loadData();
  },
  methods: {
    // 设置 树型节点的基本信息 要显示的值及要显示的文本
    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 = {};
      system.allSearch(that.table_name, commit_Data, res => {
        that.all_soure_data = res.items;
        let treeData = tree.getTree(that.all_soure_data, that.display_value_field_name, that.parent_field_name);
        that.tree_data = treeData;
        console.log('tree_data', that.all_soure_data);
        // that.page_size = res.page_size;
        // that.total_number = res.total_results;
      });
    },
    currentNodeChange(val1, val2) {
      let that = this;
      console.log('val1:', val1);
      console.log('val2:', val2);
      that.$emit('current_change', val1, val2);
    },
    checkChange(val1, val2, val3) {
      let that = this;
      let left_tree_select_Nodes = that.$refs.ref_tree.getCheckedNodes(false, true);
      console.log('val3:', left_tree_select_Nodes);
      that.$emit('check_Change', left_tree_select_Nodes);
    },
    // 得到操作后的数据
    getTreeData() {
      let that = this;
      return that.all_soure_data;
    },
    getClickSelectd() {
      let that = this;
      let selectedKeys = that.$refs.ref_tree.getCheckedKeys();
      console.log('selectedKeys', selectedKeys);
      let selectedNodes = that.$refs.ref_tree.getCheckedNodes();
      console.log('selectedNodes', selectedNodes);
    },
    getClickSingleSelectd() {
      let that = this;
      let CurrentNode = that.$refs.ref_tree.getCurrentNode();
      console.log('CurrentNode', CurrentNode);
    },

    handleDragStart(node, ev) {
      console.log('drag start=====', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      // console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      // console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      // console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    },

    handleDrop(draggingNode, dropNode, dropType, ev) {
      let that = this;
      console.log('tree drop: ', draggingNode.label, draggingNode, dropNode.label, dropNode, dropType, event);
      // 拖到的节点原始数据
      let dropNode_data = _.find(that.all_soure_data, function(o) {
        return o['tree_flame_id'] === dropNode.key;
      });
      // 被拖的节点原始数据
      let dragging_data = _.find(that.all_soure_data, function(o) {
        return o['tree_flame_id'] === draggingNode.key;
      });
      console.log('drop_data==', dropNode_data);

      console.log('dragging_data==', dragging_data);

      if (dropType === 'before') {
        console.log('before');
        if (dragging_data !== undefined) {
          dragging_data[that.parent_field_name] = dropNode_data[that.parent_field_name];
        }
      } else if (dropType === 'after') {
        console.log('after');
        if (dragging_data !== undefined) {
          dragging_data[that.parent_field_name] = dropNode_data[that.parent_field_name];
        }
      } else if (dropType === 'inner') {
        if (dragging_data !== undefined) {
          dragging_data[that.parent_field_name] = dropNode_data.tree_flame_id;
        }
      }
      that.$emit('dropChange');
    }
  }
};
</script>

<style lang="scss" scoped>
.tree-single {
  .tree-single-tree {
    display: -webkit-box;
    overflow: scroll;
    width: 100%;
    height: 500px;
  }
}
</style>
