<template>
  <div
    ref="reference"
    :class="[
      'el-cascader',
      realSize && `el-cascader--${realSize}`,
      { 'is-disabled': isDisabled },
      {'el-cascader__multiple': multiple}
    ]"
    v-clickoutside="handleClose"
    @mouseenter="inputHover = true"
    @mouseleave="inputHover = false"
    @click="() => toggleDropDownVisible(readonly ? undefined : true)"
    @keydown="handleKeyDown">
    <el-input
      ref="input"
      v-model="multiple ? presentText : inputValue"
      :size="realSize"
      :placeholder="presentTags.length ? '' : tempPlaceHolder"
      :readonly="readonly"
      :disabled="isDisabled"
      :validate-event="false"
      :class="{ 'is-focus': dropDownVisible }"
      @input="inputFilter"
      @focus="handleFocus"
      @blur="handleBlur">
      <template slot="suffix">
        <div class="close-svg" v-show="clearBtnVisible">
          <el-svg
            key="clear"
            class="el-input__icon el-range__close-icon"
            icon-class="date-close"
            @click.stop.native="handleClear"></el-svg>
        </div>

        <i
          v-show="filterable ? (!clearBtnVisible && !visible && !dropDownVisible) : !clearBtnVisible"
          key="arrow-down"
          :class="[
            'el-input__icon',
            'el-icon-arrow-down',
            dropDownVisible && 'is-reverse'
          ]"
          @click.stop="toggleDropDownVisible()"></i>
        <i v-show="!clearBtnVisible && filterable && (visible || dropDownVisible)" class="el-cascader__caret el-input__icon el-icon-search"></i>

      </template>
    </el-input>

    <div class="el-cascader-tags-modal" :class="{'modal-is-active': dropDownVisible}" v-if="multiple && presentTags.length"></div>
    <div v-if="multiple" class="el-cascader__tags" ref="tags">
      <el-tag
        v-for="tag in presentTags"
        :key="tag.key"
        :size="realSize"
        :hit="tag.hitState"
        :closable="tag.closable"
        disable-transitions
        @close="deleteTag(tag)">
        <span>{{ tag.text }}</span>
      </el-tag>
      <input
        v-if="filterable && !isDisabled"
        ref="filterable"
        v-model.trim="inputValue"
        type="text"
        :class="presentTags.length ? 'el-cascader__search-input' : 'el-cascader__search-only'"
        :style="presentTags.length ? 'width: 12px;' : ''"
        :placeholder="presentTags.length ? '' : tempPlaceHolder"
        @input="e => handleInput(inputValue, e)"
        @click.stop="toggleDropDownVisible(true)"
        @blur="handleFilterableBlur"
        @focus="filterInputIsFocus = true"
        @keydown.delete="handleDelete">
    </div>

    <transition name="el-zoom-in-top" @after-leave="handleDropdownLeave">
      <div
        v-show="dropDownVisible"
        ref="popper"
        :class="['el-popper', 'el-cascader__dropdown', popperClass]">
        <el-cascader-panel
          :class="multiple? 'el-cascader-panel-multiple' : 'el-cascader-panel-single'"
          ref="panel"
          v-show="!filtering"
          v-model="checkedValue"
          :options="options"
          :props="config"
          :border="false"
          :render-label="$scopedSlots.default"
          @expand-change="handleExpandChange"
          @close="toggleDropDownVisible(false)"></el-cascader-panel>
        <el-scrollbar
          ref="suggestionPanel"
          v-if="filterable"
          v-show="filtering"
          tag="ul"
          class="el-cascader__suggestion-panel"
          view-class="el-cascader__suggestion-list"
          @keydown.native="handleSuggestionKeyDown">
          <template v-if="suggestions.length">
            <li
              v-for="(item, index) in suggestions"
              :key="item.uid"
              :class="[
                'el-cascader__suggestion-item',
                item.checked && 'is-checked'
              ]"
              :tabindex="-1"
              @click="handleSuggestionClick(index)">
              <span>{{ item.text }}</span>
              <i v-if="item.checked" class="el-icon-check"></i>
            </li>
          </template>
          <slot v-else name="empty">
            <li class="el-cascader__empty-text">{{ t('el.cascader.noMatch') }}</li>
          </slot>
        </el-scrollbar>
      </div>
    </transition>
  </div>
</template>

<script>
import Popper from 'modesign-ui/src/utils/vue-popper';
import Clickoutside from 'modesign-ui/src/utils/clickoutside';
import Emitter from 'modesign-ui/src/mixins/emitter';
import Locale from 'modesign-ui/src/mixins/locale';
import Migrating from 'modesign-ui/src/mixins/migrating';
import ElInput from 'modesign-ui/packages/input';
import ElTag from 'modesign-ui/packages/tag';
import ElScrollbar from 'modesign-ui/packages/scrollbar';
import ElCascaderPanel from 'modesign-ui/packages/cascader-panel';
import AriaUtils from 'modesign-ui/src/utils/aria-utils';
import ElSvg from 'modesign-ui/packages/svg';
import { t } from 'modesign-ui/src/locale';
import { isEqual, isEmpty, kebabCase } from 'modesign-ui/src/utils/util';
import { isUndefined, isFunction } from 'modesign-ui/src/utils/types';
import { isDef } from 'modesign-ui/src/utils/shared';
import { addResizeListener, removeResizeListener } from 'modesign-ui/src/utils/resize-event';
import debounce from 'throttle-debounce/debounce';

const { keys: KeyCode } = AriaUtils;
const MigratingProps = {
  expandTrigger: {
    newProp: 'expandTrigger',
    type: String
  },
  changeOnSelect: {
    newProp: 'checkStrictly',
    type: Boolean
  },
  hoverThreshold: {
    newProp: 'hoverThreshold',
    type: Number
  }
};

const PopperMixin = {
  props: {
    placement: {
      type: String,
      default: 'bottom-start'
    },
    appendToBody: Popper.props.appendToBody,
    visibleArrow: {
      type: Boolean,
      default: false // 级联选择器没有三角箭头
    },
    arrowOffset: Popper.props.arrowOffset,
    offset: Popper.props.offset,
    boundariesPadding: Popper.props.boundariesPadding,
    popperOptions: Popper.props.popperOptions
  },
  methods: Popper.methods,
  data: Popper.data,
  beforeDestroy: Popper.beforeDestroy
};

const InputSizeMap = {
  medium: 36,
  small: 32,
  mini: 28
};

export default {
  name: 'ElCascader',

  directives: { Clickoutside },

  mixins: [PopperMixin, Emitter, Locale, Migrating],

  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },

  components: {
    ElInput,
    ElTag,
    ElScrollbar,
    ElCascaderPanel,
    ElSvg
  },

  props: {
    value: {},
    tagCount: {
      type: Number || String,
      default: () => 1
    },
    options: Array,
    props: {
      type: Object,
      default: () => {
        return {};
      }
    },
    size: String,
    placeholder: {
      type: String,
      default: () => t('el.cascader.placeholder')
    },
    disabled: Boolean,
    clearable: Boolean,
    filterable: Boolean,
    filterMethod: Function,
    separator: {
      type: String,
      default: ' / '
    },
    showAllLevels: {
      type: Boolean,
      default: true
    },
    collapseTags: Boolean,
    debounce: {
      type: Number,
      default: 300
    },
    beforeFilter: {
      type: Function,
      default: () => (() => {})
    },
    popperClass: String,
    showAnyLevel: {
      type: Boolean,
      default: false
    },
    labels: {
      type: Array,
      default: ()=>{
        return []
      }
    }
  },

  data() {
    return {
      dropDownVisible: false,
      checkedValue: this.value,
      inputHover: false,
      inputValue: null,
      presentText: null,
      presentTags: [],
      checkedNodes: [],
      filtering: false,
      suggestions: [],
      inputInitialHeight: 0,
      pressDeleteCount: 0,
      visible: false,
      spanValue: '',
      tempPlaceHolder: '',
      tagsWidth: 0, // 标签的总宽度
      cascaderWidth: 0,
      hasClickCount: 0,
      filterInputIsFocus: false
    };
  },

  computed: {
    showAll() {
      return this.showAllLevels && !this.props.multiple;
    },
    realSize() {
      const _elFormItemSize = (this.elFormItem || {}).elFormItemSize;
      return this.size || _elFormItemSize || (this.$ELEMENT || {}).size;
      // return this.size || _elFormItemSize || (this.$Scrm || {}).size;
    },
    isDisabled() {
      return this.disabled || (this.elForm || {}).disabled || (this.elForm || {}).readable;
    },
    config() {
      const config = this.props || {};
      const { $attrs } = this;

      Object
        .keys(MigratingProps)
        .forEach(oldProp => {
          const { newProp, type } = MigratingProps[oldProp];
          let oldValue = $attrs[oldProp] || $attrs[kebabCase(oldProp)];
          if (isDef(oldProp) && !isDef(config[newProp])) {
            if (type === Boolean && oldValue === '') {
              oldValue = true;
            }
            config[newProp] = oldValue;
          }
        });

      return config;
    },
    multiple() {
      return this.config.multiple;
    },
    leafOnly() {
      return !this.config.checkStrictly;
    },
    readonly() {
      return !this.filterable || this.multiple;
    },
    clearBtnVisible() {
      //#region 初始写法
      // if (!this.clearable || this.isDisabled || this.filtering || !this.inputHover) {
      //   return false;
      // }
      //#endregion
      if (!this.clearable || this.isDisabled || !this.inputHover) {
        return false;
      }

      return this.multiple
        ? !!this.checkedNodes.filter(node => !node.isDisabled).length
        : !!this.presentText;
    },
    panel() {
      return this.$refs.panel;
    }
  },

  watch: {
    disabled() {
      this.computePresentContent();
    },
    value(val) {
      if (!isEqual(val, this.checkedValue)) {
        this.checkedValue = val;
        this.computePresentContent();
      }
      if (this.multiple && (!val || val.length === 0)) {
        // 零售版重置级联选择器时要将偏移量去掉
        this.handleClear();
      }
    },
    checkedValue(val) {
      const { value, dropDownVisible } = this;
      const { checkStrictly, multiple } = this.config;

      if (!isEqual(val, value) || isUndefined(value)) {
        this.computePresentContent();
        // hide dropdown when single mode
        if (!multiple && !checkStrictly && dropDownVisible) {
          this.toggleDropDownVisible(false);
        }

        this.$emit('input', val);
        this.$emit('change', val);
        this.dispatch('ElFormItem', 'el.form.change', [val]);
      }
    },
    options: {
      handler: function() {
        this.$nextTick(this.computePresentContent);
      },
      deep: true
    },
    presentText(val) {
      this.inputValue = val;
    },
    presentTags(val, oldVal) {
      this.$nextTick(()=>{
        if(val.length){
          if(this.$refs && this.$refs.filterable) {
            this.$refs.filterable.style.marginLeft = '2px';
          }
        }else {
          if(this.$refs && this.$refs.filterable) {
            this.$refs.filterable.style.marginLeft = '1px';
          }
        }
        this.calcFilterableInputWidth()
      })

      if (this.multiple && (val.length || oldVal.length)) {
        this.$nextTick(() => {
          this.updateStyle();
          if (this.$refs.tags) {
            this.cascaderWidth = this.$refs.reference.getBoundingClientRect().width;
            this.tagsWidth = this.$refs.tags.getBoundingClientRect().width;
            this.$refs.tags.style.transform = this.tagsTranslate();
          }
        });
      }
    },
    filterable() {
      this.$nextTick(() => {
        this.updateStyle();
        if (this.$refs.tags) {
          this.cascaderWidth = this.$refs.reference.getBoundingClientRect().width;
          this.tagsWidth = this.$refs.tags.getBoundingClientRect().width;
          this.$refs.tags.style.transform = this.tagsTranslate();
        }
      });
    },
    filtering(val) {
      this.$nextTick(this.updatePopper);
    },
    tagCount() {
      this.computePresentTags()
    }
  },

  mounted() {
    const { input } = this.$refs;
    if (input && input.$el) {
      this.inputInitialHeight = input.$el.offsetHeight || InputSizeMap[this.realSize] || 40;
    }

    if (!this.isEmptyValue(this.value)) {
      this.computePresentContent();
    }

    this.filterHandler = debounce(this.debounce, () => {
      const { inputValue } = this;

      if (!inputValue) {
        this.filtering = false;
        return;
      }

      const before = this.beforeFilter(inputValue);
      if (before && before.then) {
        before.then(this.getSuggestions);
      } else if (before !== false) {
        this.getSuggestions();
      } else {
        this.filtering = false;
      }
    });

    addResizeListener(this.$el, this.updateStyle);
  },

  beforeDestroy() {
    removeResizeListener(this.$el, this.updateStyle);
  },

  methods: {
    tagsTranslate() {
      this.tagsWidth = this.$refs.tags.getBoundingClientRect().width;
      let total = this.tagsWidth;
      if(!this.filterInputIsFocus && this.$refs.filterable) {
        total = this.tagsWidth - this.$refs.filterable.getBoundingClientRect().width + 2;
      }
      if (this.tagsWidth === 0 || (this.multiple && !this.presentTags.length)) {
          return {}
      }
      if (total <= this.cascaderWidth - 36) {
        return 'translate(0, -50%)';
      } else {
        return `translate(-${total - this.cascaderWidth + 36}px, -50%)`;
      }
    },
    getMigratingConfig() {
      return {
        props: {
          'expand-trigger': 'expand-trigger is removed, use `props.expandTrigger` instead.',
          'change-on-select': 'change-on-select is removed, use `props.checkStrictly` instead.',
          'hover-threshold': 'hover-threshold is removed, use `props.hoverThreshold` instead'
        },
        events: {
          'active-item-change': 'active-item-change is renamed to expand-change'
        }
      };
    },
    toggleDropDownVisible(visible) {
      if (this.isDisabled) return;

      const { dropDownVisible } = this;
      const { input } = this.$refs;
      visible = isDef(visible) ? visible : !dropDownVisible;
      if (visible !== dropDownVisible) {
        this.dropDownVisible = visible;
        if (visible) {
          this.$nextTick(() => {
            this.updatePopper();
            this.panel.scrollIntoView();
          });
        }
        input.$refs.input.setAttribute('aria-expanded', visible);
        this.$emit('visible-change', visible);
      }
      if (this.filterable && this.multiple) {
        if(visible) {
          this.$nextTick(()=>{
            this.$refs.filterable.focus();
            this.filterInputIsFocus = true
            this.calcFilterableInputWidth()
            if(this.hasClickCount === 0) {
              this.tagsWidth += 12;
            }
            this.hasClickCount++
          })
        } else {
          this.filterInputIsFocus = false
          this.$refs.filterable.style.width = 0;
        }
      }
    },
    handleDropdownLeave() {
      this.filtering = false;
      this.inputValue = this.presentText;
    },
    resizeFilterableInput(val) {
      if (val && val.trim() && this.$refs.filterable.style.width === '12px') {
        this.$refs.filterable.style.width = '60px';
        this.tagsWidth += 48;
        this.$refs.tags.style.transform = this.tagsTranslate();
      } else if ((!val || !val.trim()) && this.$refs.filterable.style.width === '60px') {
        this.$refs.filterable.style.width = '12px';
        this.tagsWidth -= 48;
        this.$refs.tags.style.transform = this.tagsTranslate();
      }
    },
    handleKeyDown(event) {
      switch (event.keyCode) {
        case KeyCode.enter:
          this.toggleDropDownVisible();
          break;
        case KeyCode.down:
          this.toggleDropDownVisible(true);
          this.focusFirstNode();
          event.preventDefault();
          break;
        case KeyCode.esc:
        case KeyCode.tab:
          this.toggleDropDownVisible(false);
          break;
      }
    },
    handleFocus(e) {
      this.visible = true;
      if (this.filterable && !this.multiple) {
        this.spanValue = this.inputValue;
        this.$refs.input.$el.style.color = 'transparent';
        this.inputValue = '';
        if (this.value && this.value[0]) {
          this.tempPlaceHolder = this.spanValue;
        }
      }
      this.$emit('focus', e);
    },
    inputFilter(val) {
      if (val) {
        this.filterHandler();
      } else {
        this.filtering = false;
      }
    },
    handleBlur(e) {
      this.visible = false;
      if (this.filterable && !this.multiple) {
        this.inputValue = this.spanValue;
        this.$refs.input.$el.style.color = 'var(--color-neutral-9)';
        this.spanValue = '';
        if (this.value && this.value[0]) {
          this.tempPlaceHolder = '';
        }
      }
      this.$emit('blur', e);
    },
    handleInput(val, event) {
      this.resizeFilterableInput(val);
      if (this.filterable && !this.multiple && !this.tempPlaceHolder) {
        this.$refs.input.$el.style.color = 'var(--color-neutral-9)';
        this.spanValue = '';
        this.inputValue = '';
        this.presentText = '';
        this.panel.clearCheckedNodes();
        this.tempPlaceHolder = this.placeholder;
      }
      !this.dropDownVisible && this.toggleDropDownVisible(true);

      if (event && event.isComposing) return;
      if (val) {
        this.filterHandler();
      } else {
        this.filtering = false;
      }
    },
    handleClear() {
      this.presentText = '';
      this.panel.clearCheckedNodes();
      this.tempPlaceHolder = this.placeholder;
      if(this.multiple && this.filterable) {
        this.$refs.tags.style.transform = `translate(0, -50%)`;
      }
    },
    handleExpandChange(value) {
      this.$nextTick(this.updatePopper.bind(this));
      this.$emit('expand-change', value);
      this.$emit('active-item-change', value); // Deprecated
    },
    focusFirstNode() {
      this.$nextTick(() => {
        const { filtering } = this;
        const { popper, suggestionPanel } = this.$refs;
        let firstNode = null;

        if (filtering && suggestionPanel) {
          firstNode = suggestionPanel.$el.querySelector('.el-cascader__suggestion-item');
        } else {
          const firstMenu = popper.querySelector('.el-cascader-menu');
          firstNode = firstMenu.querySelector('.el-cascader-node[tabindex="-1"]');
        }

        if (firstNode) {
          firstNode.focus();
          !filtering && firstNode.click();
        }
      });
    },
    computePresentContent() {
      // nextTick is required, because checked nodes may not change right now
      this.$nextTick(() => {
        if (this.config.multiple) {
          this.computePresentTags();
          this.presentText = this.presentTags.length ? '' : null;
        } else {
          this.computePresentText();
        }
      });
    },
    isEmptyValue(val) {
      const { multiple } = this;
      const { emitPath } = this.panel.config;
      if (multiple || emitPath) {
        return isEmpty(val);
      }
      return false;
    },
    computePresentText() {
      const { checkedValue, config } = this;
      if (!this.isEmptyValue(checkedValue)) {
        const node = this.panel.getNodeByValue(checkedValue);
        if(!node && this.labels.length > 0) {
          this.presentText = this.labels.join(this.separator);
          return
        }
        if(this.showAnyLevel) {
          if (node) {
            this.presentText = node.getText(this.showAll, this.separator);
            return;
          }
        } else {
          if (node && (config.checkStrictly || node.isLeaf)) {
            this.presentText = node.getText(this.showAll, this.separator);
            return;
          }
        }
      }
      this.presentText = null;
    },
    computePresentTags() {
      const { isDisabled, leafOnly, showAll, separator, collapseTags } = this;
      const checkedNodes = this.getCheckedNodes(leafOnly);
      const tags = [];

      const genTag = node => ({
        node,
        key: node.uid,
        text: node.getText(showAll, separator),
        hitState: false,
        closable: !isDisabled && !node.isDisabled
      });

      if (checkedNodes.length) {
        let first, second, rest
        if (+this.tagCount === 2) {
          [first, second, ...rest] = checkedNodes;
        } else {
          [first, ...rest] = checkedNodes;
        }
        // const [first, second, ...rest] = checkedNodes;
        const restCount = rest.length;
        tags.push(genTag(first));
        if (second) {
          tags.push(genTag(second));
        }

        if (restCount) {
          if (collapseTags) {
            tags.push({
              key: -1,
              text: `+${restCount}`,
              closable: false
            });
          } else {
            rest.forEach(node => tags.push(genTag(node)));
          }
        }
      }

      this.checkedNodes = checkedNodes;
      this.presentTags = tags;
    },
    getSuggestions() {
      let { filterMethod } = this;

      if (!isFunction(filterMethod)) {
        filterMethod = (node, keyword) => node.text.includes(keyword);
      }

      const suggestions = this.panel.getFlattedNodes(this.leafOnly)
        .filter(node => {
          if (node.isDisabled) return false;
          node.text = node.getText(this.showAll, this.separator) || '';
          return filterMethod(node, this.inputValue);
        });

      if (this.multiple) {
        this.presentTags.forEach(tag => {
          tag.hitState = false;
        });
      } else {
        suggestions.forEach(node => {
          node.checked = isEqual(this.checkedValue, node.getValueByOption());
        });
      }

      this.filtering = true;
      this.suggestions = suggestions;
      this.$nextTick(this.updatePopper);
    },
    handleSuggestionKeyDown(event) {
      const { keyCode, target } = event;
      switch (keyCode) {
        case KeyCode.enter:
          target.click();
          break;
        case KeyCode.up:
          const prev = target.previousElementSibling;
          prev && prev.focus();
          break;
        case KeyCode.down:
          const next = target.nextElementSibling;
          next && next.focus();
          break;
        case KeyCode.esc:
        case KeyCode.tab:
          this.toggleDropDownVisible(false);
          break;
      }
    },
    handleDelete() {
      const { inputValue, pressDeleteCount, presentTags } = this;
      const lastIndex = presentTags.length - 1;
      const lastTag = presentTags[lastIndex];
      this.pressDeleteCount = inputValue ? 0 : pressDeleteCount + 1;

      if (!lastTag) return;

      if (this.pressDeleteCount) {
        if (lastTag.hitState) {
          this.deleteTag(lastTag);
        } else {
          lastTag.hitState = true;
        }
      }
    },
    handleSuggestionClick(index) {
      const { multiple } = this;
      const targetNode = this.suggestions[index];

      if (multiple) {
        const { checked } = targetNode;
        targetNode.doCheck(!checked);
        this.panel.calculateMultiCheckedValue();
      } else {
        this.checkedValue = targetNode.getValueByOption();
        this.toggleDropDownVisible(false);
      }
    },
    deleteTag(tag) {
      const { checkedValue } = this;
      const current = tag.node.getValueByOption();
      const val = checkedValue.find(n => isEqual(n, current));
      this.checkedValue = checkedValue.filter(n => !isEqual(n, current));
      this.$emit('remove-tag', val);
    },
    updateStyle() {
      const { $el, inputInitialHeight } = this;
      if (this.$isServer || !$el) return;

      const { suggestionPanel } = this.$refs;
      const inputInner = $el.querySelector('.el-input__inner');

      if (!inputInner) return;

      const tags = $el.querySelector('.el-cascader__tags');
      let suggestionPanelEl = null;

      if (suggestionPanel && (suggestionPanelEl = suggestionPanel.$el)) {
        const suggestionList = suggestionPanelEl.querySelector('.el-cascader__suggestion-list');
        suggestionList.style.minWidth = inputInner.offsetWidth + 'px';
      }

      if (tags) {
        //#region input 自动撑高
        // const offsetHeight = Math.round(tags.getBoundingClientRect().height);
        // const height = Math.max(offsetHeight + 6, inputInitialHeight) + 'px';
        // inputInner.style.height = height;
        //#endregion
        // 110668 mounted监听事件，级联多选时，当触发了resize事件，会出现这种情况，我准备把这里的this.updatePopper注释掉，如果后面发现新的问题，再取消注释
        // this.updatePopper();
      }
    },

    /**
     * public methods
    */
    getCheckedNodes(leafOnly) {
      return this.panel.getCheckedNodes(leafOnly);
    },

    handleClose() {
      // if(this.$refs.filterable) {
      //   this.$refs.filterable.style.width = 0;
      //   if(this.hasClickCount > 0){
      //     this.tagsWidth -= 12
      //   }
      //   this.$refs.tags.style.transform = this.tagsTranslate();
      //   this.hasClickCount = 0;
      // }
      this.toggleDropDownVisible(false);
    },

    // 计算搜索的input的宽度
    calcFilterableInputWidth (){
      if(this.multiple) {
        // 需要将ref="tags"下面的tag全部选出来并计算他们的宽度之和，然后与ref="select"的宽度比较
        const tags = this.$refs.tags.querySelectorAll(".el-tag");
        let countWidth = 0;
        tags.forEach(item=>{
          countWidth += item.getBoundingClientRect().width
        })
        const selectWidth = this.$refs.reference.getBoundingClientRect().width
        if(this.$refs.filterable) {
          if(countWidth == 0) {
            this.$refs.filterable.style.width = selectWidth - 52 + "px";
          } else if(selectWidth - countWidth > 52) {
            const difCount = selectWidth - 52 - countWidth
            this.$refs.filterable.style.width = difCount > 12 ? difCount + "px" : '12px';
          } else {
            this.$refs.filterable.style.width = '12px'
          }
        }
      }
    },

    handleFilterableBlur(){
      this.filterInputIsFocus = false
      this.$refs.filterable.style.width = 0;
      // if(this.$refs.filterable.style.width == '60px') {
        this.$refs.tags.style.transform = this.tagsTranslate();
      // }
    },
  },
  created() {
    this.tempPlaceHolder = this.placeholder;
  }
};
</script>

