export default {
  props: {
    loadData: {
      type: Function,
      require: true,
    },

    defaultExpandedKeys: {
      default: false,
      type: Boolean
    },
  },

  data() {
    return {
      loading: false,

      data: [],
      list: [],

      searchValue: '',

      expandedKeys: [],
      autoExpandParent: true
    }
  },

  created() {
    this.onLoadData()
  },

  methods: {
    onLoadData() {
      this.loading = true

      this.loadData().then((res) => {
        const data = this.generateKey(res)
        this.list = []
        this.generateList(data)
        if (this.defaultExpandedKeys) {
          this.expandedKeys = this.list.map(p => p.key)
        }
        this.data = data

        this.loading = false
      })
    },

    onReloadData() {
      this.onLoadData()
    },

    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    onSearch(value) {
      const expandedKeys = this.list
        .map(p => {
          if (p.title.indexOf(value) > -1) {
            return this.getParentKey(p.key, this.data)
          }
          return null
        })
        .filter((p, i, self) => p && self.indexOf(p) === i)

      this.searchValue = value
      this.expandedKeys = expandedKeys
      this.autoExpandParent = true

    },

    onSelect(selectedKeys) {
      const selectedIds = []
      selectedKeys.forEach(p => {
        const data = this.list.find(m => m.key === p)
        selectedIds.push(data.id)
      })
      this.$emit('select', selectedIds)
    },

    generateKey(data, level) {
      const n = level || [0]
      n.push(0)
      data.forEach((p, i) => {
        n[n.length - 1] = i
        p.key = n.join('-')
        p.scopedSlots = { title: 'title' }
        if (p.children) {
          this.generateKey(p.children, Object.assign([], n))
        }
      })
      return data
    },

    generateList(data) {
      // 这里获取不到Key
      for (let i = 0; i < data.length; i++) {
        const { key, id, title, children } = data[i]
        this.list.push({ key, id, title });
        if (children) {
          this.generateList(children);
        }
      }
    },

    getParentKey(key, tree) {
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
          if (node.children.some(item => item.key === key)) {
            parentKey = node.key;
          } else if (this.getParentKey(key, node.children)) {
            parentKey = this.getParentKey(key, node.children);
          }
        }
      }
      return parentKey;
    },
  },

  render() {

    const swiperOptions = {
      direction: 'vertical',
      slidesPerView: 'auto',
      freeMode: true,
      scrollbar: true,
      mousewheel: true,
    }

    const props = {
      treeData: this.data,
      expandedKeys: this.expandedKeys,
      autoExpandParent: this.autoExpandParent,
    }

    const on = {
      expand: this.onExpand,
      select: this.onSelect
    }

    const scopedSlots = {
      title: ({ title }) => {
        return (
          <div>
            {
              title.indexOf(this.searchValue) > -1 ?
                <span>
                  {title.substr(0, title.indexOf(this.searchValue))}
                  <span style="color: #f50">{this.searchValue}</span>
                  {title.substr(title.indexOf(this.searchValue) + this.searchValue.length)}
                </span>
                :
                <span>{title}</span>
            }
          </div>

        );
      }
    }

    return (
      <a-layout class="yo-tree-layout">
        <a-layout-sider width="240px">
          <a-layout-header>
            <div class="header-actions">
              <a-input-search allowClear={true} placeholder="请输入检索关键字" onSearch={this.onSearch} />
            </div>
          </a-layout-header>
          <swiper options={swiperOptions}>
            <a-spin style={{ height: '100%' }} spinning={this.loading}>
              <a-icon slot="indicator" type="loading" spin />
              <swiper-slide>
                <a-tree {...{ props, on, scopedSlots }} />
              </swiper-slide>
            </a-spin>
          </swiper>
        </a-layout-sider>
        <a-layout-content>
          {this.$scopedSlots.default ? this.$scopedSlots.default() : null}
        </a-layout-content>
      </a-layout>
    )
  }
}