<template>
  <div class="x-meta-search-list">
    <x-search-option
      v-bind="$attrs"
      :dynamicTags="dynamicTags"
      :search-option-type="searchOptionType"
      v-model="state"
      :disabled="disabled"
      :trigger-on-focus="false"
      :placeholder="getPlaceholder()"
      @blur="handleBlur"
      @focus="handleFocus"
      @select="handleSelect"
      @click-icon="clickIcon"
      @remove-tag="removeTag"
      @input="handleInput"
      :row-key="rowKey"
      :row-name="rowName"
      :debounce="getDebounce">
      <template v-slot:search-option="{ item }">
        <slot name="search-option" :item="item"></slot>
      </template>
    </x-search-option>
    <x-tree-dialog
      ref="dialog"
      v-bind="$attrs"
      v-on="$listeners"
      :data="data"
      :props='realProps'
      :node-key="rowKey"
      :filter-node-method='filterNodeMethod'
      :condition-config="conditionConfig"
      :visible.sync="dialogVisible"
      width="75%"
      :buttonConfig="buttonConfig"
      :show-checkbox="searchOptionType !== 'singleSelect'"
      @node-dbclick="handleDbclick">
    </x-tree-dialog>
  </div>
</template>

<script>
import {XSearchOption, XTreeDialog} from '@newpearl/ui';
import searchDialogMixin, {SINGLE_SELECT} from '../../mixins/search-dialog-mixin';
import * as appUtils from '../../util/appUtils';
import {FIELD_TYPE_INPUT} from '../x-condition/x-condition-constant';
export default {
  name: 'XSearchTree',
  components: {
    [XSearchOption.name]: XSearchOption,
    [XTreeDialog.name]: XTreeDialog
  },
  mixins: [searchDialogMixin],
  props: {
    props: Object,
    data: Array
  },
  data () {
    return {
      buttonConfig: {
        list: [
          {
            name: '查询',
            click: this.search
          },
          {
            name: '返回数据',
            click: this.returnData
          },
          {
            name: '返回所有数据',
            click: this.returnAllData
          }
        ]
      },
      conditionConfig: {
        model: {
          filterText: ''
        },
        labelWidth: '0px',
        list: [
          {
            field: 'filterText',
            placeholder: '通过关键字过滤树节点',
            type: FIELD_TYPE_INPUT
          }
        ]
      }
    };
  },
  methods: {
    handleDbclick({data}) {
      console.log(data);
      this.dialogSelectCallback([data]);
    },
    filterData (arr, data, value) {
      if (!Array.isArray(data)) {
        return;
      }
      const rowName = this.realRowName;
      for (const item of data) {
        if (item[rowName] && item[rowName].indexOf(value) > -1) {
          arr.push(item);
        }
        this.filterData(arr, item.children, value);
      }
    },
    search() {
      this.$refs.dialog.setCheckedKeys([]);
    },
    returnData() {
      if (this.searchOptionType === SINGLE_SELECT) {
        const checkedNode = this.$refs.dialog.getCurrentNode();
        if (!checkedNode) {
          this.dialogSelectCallback([]);
        } else {
          this.dialogSelectCallback([checkedNode]);
        }
        return;
      }
      this.dialogSelectCallback(this.$refs.dialog.getCheckedNodes());
    },
    returnAllData() {
      const data = this.data;
      if (!Array.isArray(data) || data.length < 1) {
        this.dialogSelectCallback([]);
        return;
      }
      const arr = [];
      this.flatData(data, arr);
      this.selectData = arr;
      this.dialogSelectCallback(arr);
    },
    async showDialog(flag, value) {
      if (this.validate && await this.validate(this) === false) {
        return;
      }
      if (flag && !appUtils.isEmpty(value) && this.searchOptionType === SINGLE_SELECT) {
        this.conditionConfig.model.filterText = value;
        const arr = [];
        this.filterData(arr, this.data, value);
        if (arr.length === 1) {
          this.dialogSelectCallback(arr);
          return;
        }
      }
      this.dialogVisible = true;
    },
    filterNodeMethod(value, data) {
      if (appUtils.isEmpty(value)) {
        return true;
      }
      return data[this.realProps.label].indexOf(value) !== -1;
    },
    flatData (data, arr) {
      for (let i = 0; i < data.length; i++) {
        arr.push(data[i]);
        const children = data[i][this.realProps.children];
        if (Array.isArray(children)) {
          this.flatData(children, arr);
        }
      }
    }
  },
  computed: {
    realProps() {
      const defaultConfig = {
        // 自定义树形图展示的变量
        children: 'children',
        label: this.realRowName
      };
      if (this.props) {
        Object.assign(defaultConfig, this.props);
      }
      return defaultConfig;
    }
  }
};
</script>
