.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)'}"
) Выберите категорию