<template lang="pug">
  base-input-container(:label="label")
    .relative
      base-input(type="text", v-model="value.label", outlined)
        template(#icon)
          .icon(@click="isExpand = !isExpand")
      .menu(v-if="isExpand")
        .item.p-2.cursor-pointer(
          v-for="item in items", 
          :key="item.id",
          @click="pickValue(item)"
        )
          .text {{item.label}}
</template>

<script>
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
import BaseInput from "@/components/base/BaseInput.vue";

export default {
  name: "KitShortList",
  components: {
    BaseInputContainer,
    BaseInput,
  },
  props: {
    label: String,
    modelValue: Object,
    items: Array,
  },
  data() {
    return {
      isExpand: false,
      searchValue: "",
    };
  },
  emits: ["update:modelValue"],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
  methods: {
    pickValue(val) {
      this.value = val;
      this.isExpand = false;
    },
  },
};
</script>

<style lang="sass" scoped>
.icon
  background: url("../../assets/icons/down-arrow-1.svg") no-repeat 100% 50%
  cursor: pointer
  width: 20px
  height: 100%

.menu
  background: #fff
  position: absolute
  z-index: 10
  border: 1.5px solid var(--border-light-grey-color)
  border-radius: 0 0 4px 4px
  border-top: none
  width: 100%
  .item
    &:hover
      background: var(--bg-hover-row-table)
</style>
