<template>
  <div ref="mainRef" tabindex="tabindex" @keydown.down.prevent="handleDownChoose" @keyup.enter.prevent="handleEnter" @keydown.up.prevent="handleUpChoose" class="fbg-dropdown-selection" >
    <div @click="handleClick" class="fbg-dropdown-selection-content" ref="selecttionRef">
      <slot name="content" :data="selectedData"><span>{{selectedData.label}}</span></slot>
    </div>
    <i class="fbgiconfont icon-jiantouxia fbg-dropdown-selection-icon" />
    <div class="fbg-dropdown-selection-dropdown" @click="handleSelection" :style="{height: height, display: display}" >
      <ul ref="dropdownRef">    
        <slot />
      </ul>
    </div>
  </div>
</template>
<script>
import util from '../../utils';
import commonExtends from '../common/commonExtend';
export default {
  name: 'FbgDropdown',
  componentName: 'FbgDropdown',
  extends: commonExtends,
  props: {
    value: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      isShow: false,
      height: 0 +'px',
      timer: null,
      display: 'none',
      selectedData: {
        label: '',
        value: ''
      },
      openStatus: false,
      options: [],
      hoverIndex: 0,
      count: 1,
      tabindex: 0,
    }
  },

  created() {
    this.$on('fbg.dropdown.addOption', (option) => {
      option.index = this.count++;
      this.options.push(option);
      this.setCheckedOptionList();
      this.selectedData = this.getSelectedItem();
    });
    this.$on('fbg.dropdown.optionChange', (option) => {
      this.setValue(option);
      this.changeEmit(option.value);
      this.close();
    });
    this.$on('fbg.dropdown.mouseover', (option) => {
      this.hoverIndex = option.index;
    });
    this.$on('fbg.dropdown.removeOption', (option) => {
      const index = this.options.indexOf(option);
      if (index > -1) {
        this.options.splice(index, 1);
      }
    });
  },
  mounted() {
    document.addEventListener('click', () => {
      if (!this.openStatus) {
        this.close();
      }
      this.openStatus = false;
    });
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.setCheckedOptionList();
        this.selectedData = this.getSelectedItem();
      }
    }
  },
  methods: {
    handleSelection() {
      this.openStatus = true;
    },
    handleDownChoose() {
        this.hoverIndex++;
        if (this.hoverIndex >= this.count) {
            this.hoverIndex = 0;
        }
        
        this.setHoverStatus(this.hoverIndex);
    },
    initData() {
      return {
        value: '',
        label: '',
      };
    },
    getSelectedItem() {
      const data = this.options.filter(item => !!item.checked);
      if (data && data.length) {
        return data[0];
      } else {
        return {
          label: '',
          value: ''
        };
      }
    },
    close() {
      this.height = 0 +'px';
      this.isShow = false;
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        clearTimeout(this.timer);
        this.timer = null;
        if (this.isShow === false) {
          this.display = 'none';
        }
      }, 300);
    },
    handleClick(e) {
      this.$refs.mainRef.focus();
      this.openStatus = true;
      if (this.isShow === true) {
        this.close();
      } else {
        this.display = 'block';
        let timer = setTimeout(()=>{
          this.height = util.getStyle(this.$refs.dropdownRef, 'height');
          this.isShow = true;
          clearTimeout(timer);
          timer = null;
        },0)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fbg {
  &-dropdown {
    &-selection {
      height: 35px;
      line-height: 35px;
      display: inline-block;
      vertical-align: middle;
      box-sizing: border-box;
      position: relative;
      color: $themeColor;
      min-width: 80px;
      &-icon {
        position: absolute;
        right: 10px;
        top: 0px;
        color: #999;
        font-size: 12px;
        cursor: pointer;
      }
      &-dropdown {
        position: absolute;
        top: 100%;
        color: #666;
        box-shadow: 0px 0px 5px $themeShadowColor;
        background-color: #fff;
        margin-top: 10px;
        border-radius: 3px;
        z-index: 9999;
        transition: height 0.2s ease-in;
        height: 0px;
        overflow: hidden;
        display: none;
      }
      &-content {
        cursor: pointer;
        padding-right:10px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        color: #666;
        text-align: left;
        span {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>