<template lang="pug">
  .selection-wrapper.flex
    .left-side.flex.flex-col.gap-y-4
      .flex.font-bold.text-xl Категории
      base-input(
        placeholder="Поиск",
        @keyup.enter="searchCategory",
        v-model="searchBenefit",
        outlined,
        :width="300",
        iconLeft
      )
        q-icon(
          name="app:icon-search",
          size="20px",
          style="color: var(--font-grey-color)"
        )
      .field.flex.flex-col.overflow-y-scroll
        .flex.items-center(
          v-for="benefit in benefitData",
          :key="benefit.id",
          :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}"
        )
          q-checkbox(
            v-model="selected",
            :val="benefit",
            :style="{border: 'none', width: '36px'}",
            size="32px"
          )
          .name.flex.items-center.font-medium.text-xm {{benefit.name}}
      .buttons-group.flex.py-4.px-8.justify-center
        base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
        base-button.text-base.font-semibold(
          v-if="selected.length > 0",
          :size="40",
          @click="saveCategories(selected[0])"
        ) Сохранить
    .right-side.flex.px-14.font-bold.relative
      q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
      .flex.py-10.gap-y-6.flex-col(v-if="selected.length > 0 && selected[0]?.name !== 'Без льготы'")
        .flex.text-6xl {{selected[0]?.name}}
        .flex.text-xm.flex-col.gap-y-3 Критерии:
          .flex.flex-col.gap-y-2
            .flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id")
              span {{"- " + item}}
        .flex.text-xm.flex-col.gap-y-3 Документы для подтверждения: 
          .flex.flex-col.gap-y-2
            .flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id")
              span {{"- " + item}}
        .flex.text-xm.flex-col.gap-y-3 Льготы:
          .flex.flex-col.gap-y-2
            .flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id")
              span {{"- " + item}}
      .flex.items-center.h-full.w-full.justify-center.font-medium.text-6xl(
        v-else,
        :style="{color: 'var(--font-grey-color)'}"
       ) Выберите категорию
</template>

<script>
import BaseInput from "@/components/base/BaseInput.vue";
import BaseButton from "@/components/base/BaseButton.vue";
export default {
  name: "BaseCategorySelection",
  components: { BaseInput, BaseButton },
  props: {
    benefitData: Array,
    shiftSelected: Function,
    closeModalCategories: Function,
    saveCategories: Function,
    showModal: Boolean,
  },
  data() {
    return {
      selected: [],
      searchBenefit: "",
    };
  },
  computed: {
    choiceCriteria() {
      return this.selected[0]?.criteria.split(",");
    },
    choiceDocumentation() {
      return this.selected[0]?.documentation.split(",");
    },
    choicePrivileges() {
      return this.selected[0]?.privileges.split(",");
    },
  },
  methods: {
    searchCategory() {
      this.$emit("search", this.searchBenefit);
    },
  },
  watch: {
    selected: {
      immediate: true,
      deep: true,
      handler() {
        if (this.selected.length >= 2) this.selected.shift();
      },
    },
    showModal: {
      immediate: true,
      handler(newVal) {
        if (!newVal) this.searchBenefit = "";
      },
    },
  },
};
</script>

<style lang="sass" scoped>
.selection-wrapper
  width: 895px
  height: 660px
  font-feature-settings: 'pnum' on, 'lnum' on

.left-side
  width: 364px
  padding: 32px 28px 0px

.field
  height: 457px
  margin-right: -12px
  &::-webkit-scrollbar
    width: 4px

.name
  min-height: 40px
  padding-top: 4px
  padding-bottom: 4px
  border-bottom: 1px solid var(--bg-light-grey)
  width: 268px

.q-checkbox :deep(.q-checkbox__bg)
  border-radius: 50%
  border: 1.5px solid var(--font-grey-color)

.buttons-group
  border-top: 1px solid #D3D4D0
  margin-left: -28px
  margin-right: -28px
  column-gap: 7px

.right-side
  background: var(--bg-light-grey)
  width: 531px
  height: 100%
</style>
