<template>
  <li @mouseover="handleMouseover"  @mouseout="handleMouseout" :style="{display: !isShow?'none':'block'}" ref="mainRef" :class="{'fbg-select-item': true,'active': !multiple&&checked, 'hover': isHover, 'fbg-select-disabled': disabled}" @click.capture="handleClick">
    <el-checkbox style="display:block;width:100%;height:100%;" v-if="multiple" :is-checked="checked" :label="label" :value="value" @change="handleChange" ref="checkboxRef" :disabled="disabled" />
    <slot v-else>{{label}}</slot>
  </li>
</template>
<script>
import Checkbox from '../checkbox';
import extendData from '../common/commonExtend'; 
export default {
  components: {
    'el-checkbox': Checkbox
  },
  extends: extendData,
  props: {
    label: {
      type: [Number, String],
      default: ''
    },
    value: {
      type: [Number, String],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false,
      isShow: true,
      multiple: false,
      isHover: false,
      index: 0
    };
  },
  created() {
    this.dispatch('FbgSelect', 'fbg.select.addOption', [this]);
  },
  destroyed() {
    this.dispatch('FbgSelect', 'fbg.select.removeOption', [this]);
  },
  methods: {
    handleMouseover() {
      if (this.disabled) {
        return false;
      }
      this.isHover = true;
      this.dispatch('FbgSelect', 'fbg.select.mouseover', [this]);
    },
    handleMouseout() {
      this.isHover = false;
    },
    handleChange(checked, value, label) {
      this.checked = !this.checked;
      this.dispatch('FbgSelect', 'fbg.select.optionChange', [this]);
    },
    click() {
      if (this.multiple) {
        this.$refs.checkboxRef.click();
      } else {
        this.$refs.mainRef.click();
      } 
    },
    handleClick(e) {
      if (this.disabled) {
        e.stopPropagation();
        return false;
      }
      if (this.multiple) {
        e.stopPropagation();
      } else {
        this.checked = true;
        this.dispatch('FbgSelect', 'fbg.select.optionChange', [this]);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fbg-select {
  &-item {
    list-style: none;
    padding: 8px 12px;
    color: #555; 
    text-align: left;
    &:hover {
      background-color: #F5F6F7;
      color: #3399FF;
    }
  }
  &-item.fbg-select-disabled {
    color: #ccc!important;
    cursor: not-allowed;
  }
  &-item.hover {
    background-color: #F5F6F7;
    color: #3399FF;
  }
  &-item.active {
    background-color: $themeColor;
    color: #fff;
  }
}
</style>