<template>
  <div class="fbg-system-selection" @click="handleClick">
    <div class="fbg-system-selection-content" ref="selecttionRef">
      <i v-show="selectedData.icon" :class="'fbgiconfont icon-' + selectedData.icon" />
      <span>{{selectedData.label}}</span>
    </div>
    <i class="fbgiconfont icon-jiantouxia fbg-system-selection-icon" />
    <div class="fbg-system-selection-dropdown" :style="{height: height, display: display}" >
      <ul ref="dropdownRef">    
        <li v-for="(item, index) in data" :key="index" @click="handleSelected(item)" class="fbg-system-selection-item">
          <i :class="'fbgiconfont icon-' + item.icon" />
          <span>{{item.label}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import util from '../../utils';
export default {
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    const selectedData = this.initData();
    return {
      isShow: false,
      height: 0 +'px',
      timer: null,
      display: 'none',
      selectedData,
      openStatus: false,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        const res = this.data.filter(item => {
          return item.value === this.value
        });
        if (res.length) {
          this.selectedData = res[0];
        } else {
          this.selectedData = this.initData();
        }
      }
    }
  },
  mounted() {
    document.addEventListener('click', () => {
      if (!this.openStatus) {
        this.close();
      }
      this.openStatus = false;
      
    });
  },
  methods: {
    initData() {
      return {
        value: '',
        label: '',
        icon: ''
      };
    },
    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';
        }
      }, 320);
    },
    handleClick() {
      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)
      }
    },
    handleSelected(item) {
      this.$emit('input', item.value);
      this.$emit('change', item.value, item);
    }
  }
}
</script>
<style lang="scss" scoped>
.fbg {
  &-system {
    &-selection {
      height: 34px;
      line-height: 34px;
      border-radius: 25px;
      cursor: pointer;
      width: 200px;
      display: inline-block;
      vertical-align: middle;
      padding-right: 30px;
      box-sizing: border-box;
      box-shadow: 0px 0px 5px $themeShadowColor;
      position: relative;
      color: $themeColor;
      &-icon {
        position: absolute;
        right: 20px;
        top: 0px;
        color: #999;
        font-size: 12px;
      }
      &-dropdown {
        position: absolute;
        top: 100%;
        color: #666;
        box-shadow: 0px 0px 5px $themeShadowColor;
        background-color: #fff;
        margin-top: 10px;
        border-radius: 10px;
        width: 100%;
        z-index: 9999;
        transition: height 0.3s;
        height: 0px;
        overflow: hidden;
        display: none;
      }
      &-item {
        padding: 0px 20px;
        line-height: 34px;
        list-style: none;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        span {
          margin-left: 10px;
        }
        &:hover {
          background-color: $hoverBackgroundColor;
          span {
            color: $themeColor;
          }
        }
      }
      &-content {
        padding-left:20px;
        padding-right:30px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        span {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>