<template>
  <li @mouseover="handleMouseover" @mouseout="handleMouseout" :class="{'fbg-dropdown-selection-item': true, 'hover': isHover, 'dropdown-disabled': disabled}" @click="handleSelected">
    <slot><span>{{label}}</span></slot>
  </li>
</template>
<script>
import commomExtends from '../common/commonExtend';
export default {
  extends: commomExtends,
  props: {
    value: {
      type: [Number, String, Boolean],
      default: ''
    },
    label: {
      type: [Number, String, Boolean],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false,
      index: 0,
      isHover: false
    }
  },
  created() {
    this.dispatch('FbgDropdown', 'fbg.dropdown.addOption', [this]);
  },
  destroyed() {
    this.dispatch('FbgDropdown', 'fbg.dropdown.removeOption', [this]);
  },
  methods: {
    handleMouseover() {
      if (this.disabled) {
        return false;
      }
      this.isHover = true;
      this.dispatch('FbgDropdown', 'fbg.dropdown.mouseover', [this]);
    },
    handleMouseout() {
      this.isHover = false;
    },
    handleSelected() {
      if (this.disabled) {
        return false;
      }
      this.checked = !this.checked;
      this.dispatch('FbgDropdown', 'fbg.dropdown.optionChange', [this]);
      this.$emit('click', this.value, this.label);
    }
  }
}
</script>
<style lang="scss" scoped>
.fbg-dropdown-selection-item {
  padding: 0px 20px;
  line-height: 35px;
  list-style: none;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: #666;
  span {
    margin-left: 0px;
  }
  &:hover {
    background-color: $hoverBackgroundColor;
    span {
      color: $themeColor;
    }
  }
}
.fbg-dropdown-selection-item.dropdown-disabled {
  cursor: not-allowed;
  span {
    color: #ccc!important;
  }
}
.fbg-dropdown-selection-item.hover{
  background-color: $hoverBackgroundColor;
  span {
    color: $themeColor;
  }
}
</style>