.selection-wrapper.flex
.left-side.flex.flex-col
.flex.flex-col.gap-y-4.h-full
.flex.flex-col.gap-y-6
.flex.font-bold.text-xl Категории
base-input.search(
placeholder="Поиск",
@keyup.enter="searchCategory",
@input="searchCategory",
v-model="searchBenefit",
debounce="10",
:width="300",
size="M",
iconLeft
)
template(v-slot:iconLeft)
q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
.field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}")
.flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
q-item-section(top)
q-radio.radio(
v-model="selected",
:val="benefit",
:style="{paddingTop: benefit.name.length > 28 ? '7px' : '2px'}",
size="24px",
checked-icon="check_circle",
unchecked-icon="radio_button_unchecked"
)
q-item-label
.name.flex.items-center.font-medium.text-xm {{benefit.name}}
.buttons-group.flex.py-4.px-8.justify-center(v-if="!findSelected(selected?.id)")
base-button(
type="secondary",
label="Сбросить",
width="146px",
@click="closeModalCategories"
)
base-button(
label="Сохранить",
width="146px",
@click="saveCategories(selected)"
)
.right-side.flex.px-10.font-bold.relative
q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
.flex.gap-y-6.flex-col.w-full(v-if="selected?.id && selected?.name !== 'Без льготы'")
.right-header.flex
span.text-6xl {{selected?.name}}
.flex.text-xm.flex-col.gap-y-3.mt-1 Критерии:
.flex.flex-col.gap-y-2
.grey-color.flex.font-medium.text-smm(v-for="item in choiceCriteria", :key="item.id") {{"- " + item}}
.flex.text-xm.flex-col.gap-y-3 Документы для подтверждения:
.flex.flex-col.gap-y-2
.grey-color.flex.font-medium.text-smm(v-for="item in choiceDocumentation", :key="item.id") {{"- " + item}}
.flex.text-xm.flex-col.gap-y-3 Льготы:
.flex.flex-col.gap-y-2
.grey-color.flex.font-medium.text-smm(v-for="item in choicePrivileges", :key="item.id") {{"- " + item}}
.flex.items-center.h-full.w-full.justify-center.font-medium.text-6xl(
v-else,
:style="{color: 'var(--font-grey-color)'}"
) Выберите категорию