<template>
  <div class="bi-system-user-select">
    <template v-if="editable">
      <ui-popover
        v-model="showPopover"
        placement="bottom-start"
        class="bi-system-user-select__popover"
        :class="{'is-active': showPopover}"
      >
        <span slot="reference" class="bi-system-user-select__handle">
          <template v-if="currentUser">
            <bi-user-portray :avatar="currentUser[userAvatarField]" :name="currentUser[userNameField]" />
          </template>
          <template v-else>
            <span class="bi-system-user-select__placeholder">请选择</span>
          </template>
          <span class="bi-system-user-select__arrow"></span>
        </span>
        <div class="bi-system-user-select__menu">
          <div
            v-for="(item, index) in userOptions"
            :key="index"
            class="bi-system-user-select__item"
            @click="handleItemClick(item)"
          >
            <bi-user-portray :avatar="item[userAvatarField]" :name="item[userNameField]" />
          </div>
        </div>
      </ui-popover>
    </template>
    <template v-else>
      <template v-if="currentUser">
        <bi-user-portray :avatar="currentUser[userAvatarField]" :name="currentUser[userNameField]" />
      </template>
    </template>
  </div>

</template>
<script>
import BiUserPortray from 'packages/user-portray'

export default {
  name: 'BiSystemUserSelect',
  components: {
    BiUserPortray
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    queryMethod: {
      type: Function
    },
    valueField: {
      type: String,
      default: 'id'
    },
    userNameField: {
      type: String,
      default: 'name'
    },
    userAvatarField: {
      type: String,
      default: 'avatar'
    }
  },
  data() {
    return {
      showPopover: false,
      userOptions: []
    }
  },
  computed: {
    currentUser() {
      /* eslint-disable */
      let item = this.userOptions.find(v => v[this.valueField] == this.value)
      /* eslint-enable */
      if (!item && (this.value !== null && this.value !== undefined && this.value !== '')) {
        item = {
          [this.valueField]: this.value,
          [this.userNameField]: this.value
        }
      }
      return item
    }
  },
  created() {
    this.loadUserOptions()
  },
  methods: {
    loadUserOptions() {
      if (!this.queryMethod) {
        return Promise.reject()
      }
      this.loading = true
      this.queryMethod().then(rs => {
        this.userOptions = rs || []
      }).finally(() => {
        this.loading = false
      })
    },
    handleItemClick(item) {
      this.$emit('select', {
        item
      })
      this.$emit('input', item[this.valueField])
      this.showPopover = false
    }
  }
}
</script>
<style lang="less">
.bi-system-user-select{
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 100%;
}
.bi-system-user-select__popover{
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 100%;
  &:hover {
    .bi-system-user-select__handle{
      background-color: #f3f3f3;
      .bi-system-user-select__arrow{
        opacity: 1;
      }
    }
  }
  &.is-active {
    .bi-system-user-select__handle{
      background-color: #f3f3f3;
      .bi-system-user-select__arrow{
        opacity: 1;
        transform: rotate(180deg);
      }
    }
  }
}
.bi-system-user-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-system-user-select__placeholder{
  color: #999;
}
.bi-system-user-select__menu{
  padding-top: 6px;
  padding-bottom: 6px;
  color: #131313;
  max-height: 300px;
  overflow-y: auto;
}
.bi-system-user-select__item{
  padding: 6px 12px;
  min-height: 28px;
  cursor: pointer;
  transition: all .25s;
  &:hover {
    background-color: #f3f3f3;
  }
}
.bi-system-user-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);
}
</style>
