<template>
  <div class="bi-status-select">
    <template v-if="editable">
      <ui-popover
        v-model="showPopover"
        placement="bottom-start"
        class="bi-status-select__popover"
        :class="{'is-active': showPopover}"
      >
        <div slot="reference" class="bi-status-select__handle" @mouseenter="handleHandleMouseEnter">
          <template v-if="currentItem">
            <ui-tag size="mini" :type="currentItem.type">{{ currentItem.text }}</ui-tag>
          </template>
          <template v-else>
            <span class="bi-status-select__placeholder">请选择</span>
          </template>
          <span class="bi-status-select__arrow" />
        </div>
        <div class="bi-status-select__main" :style="mainStyle">
          <ul class="bi-status-select__list">
            <li
              class="bi-status-select__item"
              v-for="(item, index) in innerItems"
              :key="index"
              :class="['is-' + item.type]"
              @click="handleItemClick(item)"
            >
              <span class="bi-status-select__text">{{ item.text }}</span>
              <span class="bi-status-select__tag">
                <ui-tag size="mini" :type="item.type">{{ item.text }}</ui-tag>
              </span>
            </li>
          </ul>
        </div>
      </ui-popover>
    </template>
    <template v-else>
      <template v-if="currentItem">
        <ui-tag size="mini" :type="currentItem.type">{{ currentItem.text }}</ui-tag>
      </template>
    </template>
  </div>
</template>
<script>
import UiTag from 'packages/tag'

export default {
  name: 'BiStatusSelect',
  components: {
    UiTag
  },
  props: {
    value: {
      type: [String, Number],
      default: undefined
    },
    /**
     * [{
     *    label: '进行中',
     *    value: 1,
     *    type: 'primary'
     * }]
    */
    items: {
      type: Array,
      default: () => []
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showPopover: false,
      mainWidth: null
    }
  },
  computed: {
    innerItems() {
      return this.items || []
    },
    currentItem() {
      /* eslint-disable */
      return this.innerItems.find(v => v.value == this.value)
      /* eslint-enable */
    },
    mainStyle() {
      const sy = {}
      if (this.mainWidth) {
        sy['min-width'] = this.mainWidth + 'px'
      }
      return sy
    }
  },
  methods: {
    handleHandleMouseEnter(evt) {
      this.mainWidth = evt.target.clientWidth
    },
    handleItemClick(item) {
      this.$emit('input', item.value)
      this.showPopover = false
    }
  }
}
</script>
<style lang="less">
.bi-status-select{
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 100%;
}
.bi-status-select__popover{
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 100%;
  &:hover {
    .bi-status-select__handle{
      background-color: #f3f3f3;
      .bi-status-select__arrow{
        opacity: 1;
      }
    }
  }
  &.is-active {
    .bi-status-select__handle{
      background-color: #f3f3f3;
      .bi-status-select__arrow{
        opacity: 1;
        transform: rotate(180deg);
      }
    }
  }
}
.bi-status-select__handle{
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  padding: 2px 36px 2px 12px;
  border-radius: 3px;
  transition: all .25s;
  position: relative;
  display: block;
}
.bi-status-select__placeholder{
  color: #999;
}
.bi-status-select__main{
  padding-top: 6px;
  padding-bottom: 6px;
  color: #131313;
}
.bi-status-select__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.bi-status-select__item{
  padding: 6px 12px;
  min-height: 28px;
  line-height: 28px;
  cursor: pointer;
  transition: all .25s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  &:hover {
    background-color: #f3f3f3;
  }
  &.is-primary{
    .bi-status-select__icon{
      background-color: #409EFF;
    }
  }
  &.is-info{
    .bi-status-select__icon{
      background-color: #909399;
    }
  }
  &.is-success{
    .bi-status-select__icon{
      background-color: #67c23a;
    }
  }
  &.is-danger{
    .bi-status-select__icon{
      background-color: #f56c6c;
    }
  }
  &.is-warning{
    .bi-status-select__icon{
      background-color: #e6a23c;
    }
  }
}
.bi-status-select__arrow{
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 11px;
  right: 12px;
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: 5px;
    transform: rotate(45deg) translate(-50%, -50%);
    height: 5px;
    border: 1px solid #999;
    border-left: 0;
    border-top: 0;
  }
  opacity: 0;
  transition: all .25s;
  transform: rotate(0deg);
}
.bi-status-select__icon{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  background-color: #eee;
  vertical-align: top;
  margin-top: 11px;
}
</style>
