<template>
    <div class="select">
      <div class="select-item pointer" @click="selectOption">
        <div class="select-item-txt">{{defaultLabel}}</div>
        <div class="select-item-button">&nbsp;</div>
      </div>
      <ul v-show="active" class="options">
        <li class="pointer" :class="{'li-active': e.index === index}" v-for="e in option" :key="e.index" @click="change(e)">{{e.label}}</li>
      </ul>
    </div>
  </template>

<script>
export default {
  name: 'SelectOpt',
  props: {
    option: Array,
    index: [Number, String]
  },
  data () {
    return {
      active: false
    }
  },
  computed: {
    defaultLabel () {
      let val = ''
      this.option.map(e => {
        if (e.index === this.index) {
          val = e.label
        }
      })
      return val
    }
  },
  methods: {
    selectOption () {
      this.active = true
    },
    change (e) {
      this.$emit('change', e.index)
      this.active = false
    }
  }
}
</script>

  <style lang="stylus" scoped>
  @import '~@style/mixin'
  .select
    position relative
    _wh(100%, inherit)
    background-color #fff
    user-select none
.select-item
    width 100%
    _fj(row)
.select-item-txt
    width calc(100% - 50px)
    _font(15px, inherit, #999,,left)
    // padding 0 10px
.select-item-button
    position relative
    _wh(50px, inherit)
    vertical-align top
    &::before
      content ''
      width 0
      height 0
      border-left 5px solid transparent
      border-right 5px solid transparent
      border-top 5px solid #999
      position absolute
      right 13px
      top 17px
      pointer-events none
      z-index 3
  .options
    position absolute
    z-index 100000
    top 44px
    width 100%
    padding 10px 0
    background-color #fff
    border 1px solid #eee
    border-radius 5px
    li
      width 100%
      _font(15px, 38px, #999,,left)
      padding 0 10px
      user-select none
      box-sizing border-box
      &:hover
        background-color #f5f7fa
    .li-active
      color #409eff
  </style>
