<template>
  <div class="el-select-tree">
    <el-popover
      ref="elPopover"
      v-model="visible"
      transition="el-zoom-in-top"
      popper-class="el-select-tree__popover"
      trigger="click"
      :disabled="disabled"
      :placement="placement"
      :width="popoverWidth"
      @after-enter="handleScroll()"
    >
      <div class="card-board">
        <el-input
          v-model="keyword"
          :placeholder="searchPlaceholder"
          :size="size"
          clearable>
        </el-input>
        <!-- scrollbar wrap -->
        <el-scrollbar
          wrap-class="el-select-dropdown__wrap"
          view-class="el-select-dropdown__list"
          ref="scrollbar"
        >
          <tree
            ref="tree"
            v-model="valueInner"
            @change="change"
            :canFilter="canFilter"
            :filterText="keyword"
            :checkStrictly="checkStrictly"
            :defaultExpandAll=true
            :data="treeData">
          </tree>
        </el-scrollbar>
      </div>

      <!-- trigger input -->
      <el-input
        v-model="selectedLabel"
        ref="reference"
        slot="reference"
        readonly
        :style="selectStyle"
        :validate-event="false"
        :size="size"
        :class="{
          'is-active': visible,
          'is-selected': selectedLabel,
          'is-clearable': clearable
        }"
        :disabled="disabled"
        :placeholder="placeholder"
      >
        <i
          v-if="clearable"
          @click.stop="clear()"
          slot="suffix"
          class="el-input__icon el-input__icon-close el-icon-circle-close"
        ></i>
        <i
          slot="suffix"
          class="el-input__icon el-input__icon-arrow-down el-icon-arrow-down"
        ></i>
      </el-input>
    </el-popover>
  </div>
</template>

<script>
import {
  TreeMixin,
} from '@/mixins/tree'

import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      canFilter: true
    }
  },
  name: 'org-tree',
  mixins: [TreeMixin],
  computed: {
    ...mapGetters('tree', [
      'treeData',
    ])
  },
}
</script>

<style lang="scss">
@import '@/styles/variables';

.el-select-tree {
  border: 1px dotted;
  display: inline-block;
  .el-input__icon {
    cursor: pointer;
    transition: transform 0.3s;
    &-close {
      display: none;
    }
  }
  .el-input__inner {
    cursor: pointer;
    padding-right: 30px;
  }
  .el-input {
    &:hover:not(.is-disabled) {
      .el-input__inner {
        // border-color: $--input-border-color-hover;
      }
      &.is-selected.is-clearable {
        .el-input__icon {
          &-close {
            display: inline-block;
          }
          &-arrow-down {
            display: none;
          }
        }
      }
    }
    &.is-active {
      .el-input__icon-arrow-down {
        transform: rotate(-180deg);
      }
      .el-input__inner {
        // border-color: $--button-primary-border-color;
      }
    }
  }
  &__popover {
    padding: 0 !important;

    // extends el-select-dropdown - start
    // border: $--select-dropdown-border !important;
    // border-radius: $--border-radius-base !important;
    // extends el-select-dropdown - end

    .popper__arrow {
      left: 35px !important;
    }

    .el-tree-node__expand-icon.is-leaf {
      cursor: pointer;
    }
  }
  &__list {
    overflow-y: auto;

    // scroll style - start
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
    }
    // scroll style - end
  }
  &__item {
    position: relative;
    white-space: nowrap;
    // padding-right: $spacing-medium;
    &.is-selected {
      // color: $--select-option-selected-font-color;
      font-weight: bolder;
    }
    &.is-disabled {
      // color: $--font-color-disabled-base;
      cursor: not-allowed;
    }
  }
}
</style>