.preview-wrapper.bg-white
.header.flex.mb-6
.title.font-bold.text-xl.color-dark-blue Запись на {{ date }}, {{ time }}
.icons.flex.items-center.gap-x-3.-mt-5.-mr-4.p-1
q-icon(name="app:dots", size="18px", color="dark")
q-icon(name="app:cancel", size="18px", color="dark", @click="hidePreview")
.body.gap-y-4.text.text-sm
.flex.items-center.gap-x-3(v-for="field in previewConfig", :key="field?.title")
.field.color-grey.flex.items-center.justify-start.font-semibold {{ field?.title }}:
.info.flex-1.rounded.h-full.py-2.px-4.flex.items-center.gap-x-1.color-dark-blue(v-if="field?.data")
img.h-5.w-5(:src="field?.icon ? this[field?.icon] : ''", v-if="field?.icon")
span {{ field?.data ? this[field?.data] : "" }}
.flex.gap-x-1.flex-1(v-if="field?.title === 'Медкарта'")
.nameplate.rounded.px-4.pt-2.pb-1.flex.gap-x-2.info.flex-1
q-avatar(size="40px")
img(:src="memberData?.photo")
.flex.flex-col.gap-y-2px
span.color-dark-blue {{ trimName(memberData?.last_name, memberData?.first_name, memberData?.patronymic) }}
span.color-grey {{ birthday }}
q-btn.flex-1(
color="primary",
no-caps,
label="Полная медкарта",
:style="{'font-weight': 500}"
)
q-icon.arrow(name="app:long-arrow", size="18px", right)
.flex.gap-x-1.flex-1.h-full(v-if="field?.title === 'Услуги'")
.rounded.h-full.services.flex.flex-wrap.gap-1.p-1
.py-2.px-4.color-dark-blue.rounded.h-7.relative(
v-for="chip in services.list",
:key="chip?.title",
:id="chip?.title",
:class="chipClass(chip?.title)"
:style="{'background-color': chip?.color}"
)
span {{chip?.title}}
.gradient.h-7.w-11.absolute.right-0(
:id="chip?.title+'gradient'",
:style="{background: `linear-gradient(270deg, ${chip?.color} 0%, rgba(255, 255, 255, 0.00) 100%)`}"
)
.info.color-dark-blue.rounded.h-7.px-4(v-if="services.remains > 0") +{{ services.remains }}
.rounded.info.color-grey.h-full.cost.flex.items-center.justify-center {{ services.cost }} ₽