<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <a-card :class="[$style.treewrap, $style.ywlxtree, { [$style.collapse]: fold }]">
        <a-input-search v-model="searchStr" allow-clear @change="onSearchChange" />
        <a-spin :spinning="spinning" :class="$style.spin">
          <a-empty v-if="empty" />
          <a-tree
            :class="$style.tree"
            :selected-keys="selectedKeys"
            :expanded-keys="expandedKeys"
            :tree-data="treeData"
            :replace-fields="{ key: 'id' }"
            :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>
        <a-button type="primary" :class="$style.fold" @click="foldClick">
          <a-icon :type="icontype" />
        </a-button>
      </a-card>
      <div :class="$style.rightcard">
        <template v-if="!spinning">
          <a-empty v-if="empty" />
          <sd-task-list v-else :creatable="false" v-bind="listProps" />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/common/services/axios-instance'
import todoListService from '@/todo/todo-list-service'
import components from './_import-components/sd-task-search-import'
const setSelectable = (arr) => {
  arr.forEach((a) => {
    if (a.children) setSelectable(a.children)
    a.selectable = a.leaf
    a.title = a.text
    a.scopedSlots = { title: 'title' }
  })
}
const getSearchKey = (arr, str) => {
  let keys = []
  arr.forEach((a) => {
    if (a.children) keys = [...getSearchKey(a.children, str), ...keys]
    if (a.text.indexOf(str) > -1) keys.push(a.id)
  })
  return keys
}
export default {
  name: 'SdTaskSearch',
  metaInfo: {
    title: '业务查询',
  },
  components,
  data() {
    return {
      empty: false,
      fold: false,
      searchStr: '',
      selectedKeys: [],
      treeData: [],
      spinning: true,
      autoExpandParent: true,
      expandedKeys: [],
      icontype: 'left',
      searchFold: false,
      listProps: {},
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    foldClick() {
      this.fold = !this.fold
      if (this.fold) {
        this.icontype = 'right'
      } else {
        this.icontype = 'left'
      }
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    getTreeData() {
      this.spinning = true
      axios
        .get('api/framework/v1/businessquery/auth-businesstypes')
        .then((res) => {
          if (res.data.length) {
            setSelectable(res.data)
            this.treeData = res.data
            const defaultSelected = res.data[0]?.leaf ? res.data[0] : res.data[0]?.children?.[0]
            this.selectedKeys.push(defaultSelected?.id)
            this.expandedKeys.push(res.data[0]?.id)
            this.getListDef(defaultSelected)
          } else this.empty = true
        })
        .finally(() => {
          this.spinning = false
        })
    },
    openTask(record) {
      todoListService.openTaskItem(record)
    },
    onSelect(selectedKeys, info) {
      if (selectedKeys.length) {
        this.getListDef(info.node.dataRef)
        this.selectedKeys = selectedKeys
      }
    },
    getListDef(node) {
      if (!node) return
      this.listProps = {
        moduleId: node.props?.moduleId,
        filter: [
          {
            dataType: 'str',
            name: 'businessTypeId',
            op: 'eq',
            stringValue: node.id,
          },
        ],
      }
    },
    onSearchChange(e) {
      if (this.searchStr) {
        this.expandedKeys = getSearchKey(this.treeData, this.searchStr)
        this.autoExpandParent = true
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      display: flex;
      flex: 1;
      flex-direction: column;
      width: calc(100% - 20%);
      height: 100%;
      > div:first-child {
        margin-bottom: 10px;
      }
      > div:last-child {
        flex: 1;
        min-height: auto;
      }
      :global(.ant-table-title) {
        display: none;
      }
      form + div {
        float: right;
      }
    }
  }
}
.search-color {
  color: $orange-6;
}
.ywlxtree {
  :global(.ant-tree-title) {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :global(.ant-input-search) {
    margin: 8px 0;
    overflow: hidden;
  }
  .active {
    color: $primary-color;
  }
}
.tree {
  :global(li .ant-tree-node-content-wrapper-open),
  :global(li .ant-tree-node-content-wrapper-close) {
    cursor: default;
    &:hover {
      background: transparent;
    }
  }
}
.treewrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 20%;
  min-height: 100%;
  margin-right: $padding-lg;
  transition: width 0.2s;
  .fold {
    position: absolute;
    top: calc(50% - 30px);
    right: -15px;
    z-index: 2;
    width: 15px;
    height: 75px;
    padding: 0;
    border-radius: 0 10px 10px 0;
  }
  :global(.ant-tree) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :global(.ant-card-body) {
    overflow: auto;
    background: $white;
  }
}
.collapse {
  width: 0;
  :global(.ant-card-body) {
    background: transparent;
    :global(.ant-empty) {
      display: none;
    }
  }
}
.spin {
  width: 100%;
}
</style>
