<template lang="pug">
  .header-wrapper.flex.w-full.justify-between.p-4
    .flex.items-center.justify-center.gap-x-2
      base-input.search(
        :width="438",
        size="M",
        placeholder="Найти медкарту",
        iconLeft
      )
        template(v-slot:iconLeft)
          q-icon.search-icon(name="app:search", size="20px")
      base-select(
        width="280px",
        :items="items",
        size="M",
        placeholder="Сортировать по ...",
        v-model="sortingType"
      )
    base-button(width="216px")
      q-icon.plus.mr-2(name="app:plus", size="24px")
      span Создать медкарту
</template>

<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
  name: "MedicalCardListHeader",
  components: { BaseInput, BaseSelect, BaseButton },
  data() {
    return {
      items: [
        {
          label: "ФИО",
          id: "name",
        },
        {
          label: "приоритету",
          id: "priority",
        },
        {
          label: "дате рождения",
          id: "birthDate",
        },
        {
          label: "номеру медкарты",
          id: "medcardNumber",
        },
        {
          label: "проценту заполнения",
          id: "percent",
        },
        {
          label: "дате создания медкарты",
          id: "creationDate",
        },
      ],
      sortingType: null,
    };
  },
};
</script>

<style lang="sass" scoped>
.header-wrapper
  height: 72px
  border-bottom: 1px solid var(--gray-scondary)

.search-icon :deep(path)
  fill: var(--font-grey-color)

.search :deep(.q-field__prepend)
  padding-right: 4px

.plus :deep(path)
  fill: var(--default-white)
</style>
