<template>
  <ui-select
    v-on="$listeners"
    v-bind="$attrs"
    @filter="search"
    label="Заказ"
    :options="options"
    option-value="name"
    option-label="name"
    dropdown-icon="la la-angle-double-down"
    use-input
    emit-value
    map-options
    hide-selected
    fill-input
    style="width: 200px"
    :outlined="false"
  />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import UiSelect from '@/lib-components/form/UiSelect.vue'
import { Order } from '@/widgets/base/types/Order'

@Component({
  components: { UiSelect },
  inheritAttrs: false,
})
export default class OrderSelect extends Vue {
  @Prop(Array)
  orders!: Order[]

  options = this.orders

  search(val: string, update: Function) {
    update(() => {
      this.options = val
        ? this.orders.filter(order =>
            order.name.toLowerCase().includes(val.toLowerCase())
          )
        : this.orders
    })
  }
}
</script>
