﻿<template>
  <dropdown-menu :label="label" class="d-inline-block position-relative bg-white border rounded" :close-on-click="false">
    <template v-if="items.length > 0">
      <div v-for="(item, index) in items" :key="item.id">
        <label class="select-dropdown-menu-item" :for="`select-${index}`">
          <input type="checkbox" :id="`select-${index}`" :value="item.id" v-model="model" />

          {{ item.title }}
        </label>
      </div>
    </template>
    <slot v-else></slot>
  </dropdown-menu>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import DropdownMenu from './dropdown-menu.vue';
export interface SelectDropdownItem {
  title: string;
  id: string;
}
@Component({
  components: {
    DropdownMenu
  }
})
export default class SelectDropdownMenu extends Vue {
  @Prop({ type: String, required: true }) readonly placeholder!: string;
  @Prop({ type: Array, required: true }) readonly items!: SelectDropdownItem[];
  @Prop({ type: Array, required: true }) readonly value!: string[];

  get model(): string[] {
    return this.value;
  }
  set model(value: string[]) {
    this.$emit('input', value);
  }
  get label(): string {
    return this.model.map((item) => this.items.find((i) => i.id === item)!.title).join(', ') || this.placeholder;
  }
}
</script>

<style lang="scss" scoped>
.select-dropdown-menu-item {
  cursor: pointer;
  position: relative;
  padding: 8px 10px 8px 30px;
  width: 100%;
  margin-bottom: 0;

  &:hover {
    background-color: #f8f9fa;
  }

  input {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
