<template>
  <section class="AiTreeMenu">
    <b>{{ title }}</b>
    <el-input v-if="!hideInput" size="small" class="searchInput" v-model="searchText" :placeholder="searchPlaceholder"
              suffix-icon="iconfont iconSearch" @change="handleSearch" clearable/>
    <div class="treePanel" v-if="$slots.default">
      <slot/>
    </div>
    <div class="bottomBar" v-if="$slots.bottom">
      <slot name="bottom"/>
    </div>
    <div v-else class="mar-t8"/>
  </section>
</template>

<script>
export default {
  name: "AiTreeMenu",
  props: {
    title: String,
    search: String,
    searchPlaceholder: {type: String, default: "请输入..."},
    hideInput: Boolean
  },
  data() {
    return {
      searchText: "",
      origin: [],
      root: ""
    }
  },
  methods: {
    handleSearch(v) {
      this.$emit("update:search", v)
      if (this.$slots.default) {
        this.$emit('search', this.searchText)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.AiTreeMenu {
  background: #FAFAFB;
  border-radius: 2px 2px 0 0;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 264px;
  overflow: hidden;
  font-size: 14px;

  & > b {
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #222;
    flex-shrink: 0;
    height: 40px;
    background: #EEEFF1;
    border-bottom: 1px solid #E5E5E5;
  }

  :deep( .searchInput ) {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;

    input {
      border-radius: 0;
    }

    .el-input__suffix {
      transform: translateX(-12px);
      color: #8899BB;
    }
  }

  .treePanel {
    flex: 1;
    min-height: 0;
    height: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: auto;

    & > * {
      margin: 0 8px;
    }

    :deep(.el-tree) {
      height: 100%;
      background: #FAFAFB;

      .el-tree-node__children {
        overflow-x: auto;
      }

      .el-tree-node__label {
        // overflow: hidden;
        // text-overflow: ellipsis;
      }

      .el-tree-node__expand-icon {
        color: #8899BB;

        &.is-leaf {
          color: transparent;
        }
      }

      .is-current > .el-tree-node__content {
        min-width: fit-content;
        background: $primaryColor;
        color: #fff;
      }
    }
  }

  .bottomBar {
    flex-shrink: 0;
    min-height: 0;
    width: 100%;
  }
}
</style>
