<template>
  <div :class="$style.treeContent">
    <a-input-search v-model="searchStr" allow-clear @change="onSearchChange" />
    <a-spin :spinning="spinning">
      <a-tree
        :tree-data="treeData"
        :load-data="onLoadData"
        :selected-keys="selectedKeys"
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        @select="onSelect"
        @expand="onExpand"
      >
        <template slot="title" slot-scope="{ title }">
          <span v-if="title.indexOf(searchStr) > -1">
            {{ title.substr(0, title.indexOf(searchStr)) }}
            <span :class="$style.searchColor">{{ searchStr }}</span>
            {{ title.substr(title.indexOf(searchStr) + searchStr.length) }}
          </span>
          <span v-else>{{ title }}</span>
        </template>
      </a-tree>
    </a-spin>
  </div>
</template>

<script>
import FlowamendService from './flowamend-service'
import components from './_import-components/sd-flow-tree-import'

export default {
  name: 'SdFlowTree',
  metaInfo: {
    title: 'SdFlowTree',
  },
  components,
  data() {
    return {
      treeData: [],
      selectedKeys: [],
      spinning: false,
      searchStr: '',
      searchDataList: [],
      expandedKeys: [],
      autoExpandParent: true,
    }
  },
  created() {
    this.getRootNode()
  },
  methods: {
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    getRootNode() {
      FlowamendService.getTreeNode({ parentCatId: '' }).then((res) => {
        if (res.data?.length) {
          res.data.forEach((item) => {
            item.title = item.text
            item.key = item.id
            item.scopedSlots = { title: 'title' }
            this.expandedKeys.push(item.key)
          })
          this.treeData = res.data
        }
      })
    },
    onLoadData(treeNode) {
      if (treeNode.dataRef.children) {
        return Promise.resolve()
      }
      const params = {
        parentCatId: treeNode.dataRef.id,
      }
      return FlowamendService.getTreeNode(params).then((res) => {
        if (res.data.length) {
          res.data.forEach((item) => {
            item.title = item.text
            item.key = item.id
            item.isLeaf = item.leaf
            item.scopedSlots = { title: 'title' }
          })
          treeNode.dataRef.children = [...res.data]
          this.treeData = [...this.treeData]
          this.searchDataList = this.flatter(this.treeData)
        } else treeNode.dataRef.isLeaf = true
      })
    },
    // 将treeData扁平化
    flatter(dataSource, parentKey) {
      const flatArr = []
      dataSource.forEach((item) => {
        const { children, ...items } = item
        flatArr.push({ ...items, parentKey })
        if (item.children) flatArr.push(...this.flatter(item.children, item.key))
      })
      return flatArr
    },
    onSelect(key) {
      this.selectedKeys = key
      this.$emit('selected', key[0])
    },
    onSearchChange(e) {
      this.searchStr = e.target.value
      const expandedKeys = this.searchDataList
        .filter((s) => s.title.indexOf(e.target.value) > -1)
        .map((m) => m.parentKey)
      Object.assign(this, {
        expandedKeys,
        searchStr: e.target.value,
        autoExpandParent: true,
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.search-color {
  color: $orange-6;
}
</style>
