{"version":3,"file":"booking-36840960.js","sources":["../../../src/components/service-item-select.vue","../../../src/modules/online/booking.vue"],"sourcesContent":["<script>\nimport { convertMinutesToHours } from '@beautybox/core/utils';\nimport BScrollPhotosGallery from '@beautybox/ui-kit/components/image/ImagePreview';\n\nexport default {\n    name: 'app-service-item-select',\n    components: { BScrollPhotosGallery },\n    props: {\n        data: {\n            type: Array,\n            required: true,\n            default: () => [],\n        },\n        cursor: {\n            type: String,\n            default: 'pointer',\n        },\n        to: {\n            type: [String, Object],\n            default: undefined,\n        },\n        href: {\n            type: [String, Object],\n            default: undefined,\n        },\n        tag: {\n            type: String,\n            default: 'div',\n        },\n        target: {\n            type: String,\n            default: undefined,\n        },\n        clearable: {\n            type: Boolean,\n            default: false,\n        },\n    },\n    data: () => ({}),\n    computed: {\n        name() {\n            const arr = [];\n            return this.data.reduce((acc, item) => {\n                arr.push(item.name);\n                return arr;\n            }, '');\n        },\n        time() {\n            return this.data.reduce((acc, item) => {\n                acc += item.time;\n                return acc || 0;\n            }, 0);\n        },\n    },\n    methods: {\n        convertMinutesToHours,\n    },\n};\n</script>\n\n<template>\n    <v-list-item\n        exact\n        two-line\n        :to=\"to\"\n        :tag=\"tag\"\n        :href=\"href\"\n        :target=\"target\"\n        class=\"list-item\"\n        :inactive=\"!to && !href\"\n        :style=\"{ '--cursor': cursor }\"\n        v-on=\"$listeners\"\n    >\n        <v-list-item-content>\n            <v-list-item-title class=\"font-weight-medium mb-0\">\n                <span v-for=\"(item, i) in name\" :key=\"i\">\n                    {{ item }}\n                </span>\n            </v-list-item-title>\n            <v-list-item-subtitle\n                v-if=\"time\"\n                class=\"d-flex align-center justify-space-between mt-2\"\n            >\n                <span class=\"body-2\">\n                    {{ convertMinutesToHours(time, true) }}\n                </span>\n            </v-list-item-subtitle>\n        </v-list-item-content>\n        <v-list-item-action>\n            <v-btn\n                v-if=\"clearable\"\n                icon\n                :ripple=\"false\"\n                class=\"btn-clear\"\n                title=\"Сбросить\"\n                @click=\"$emit('click:clear')\"\n            >\n                <v-icon size=\"18\" color=\"primary\"> clear </v-icon>\n            </v-btn>\n            <v-icon v-else size=\"15\" class=\"ml-auto\" color=\"primary\">arrow_forward_ios</v-icon>\n        </v-list-item-action>\n    </v-list-item>\n</template>\n\n<style lang=\"scss\" scoped>\n.subtitle-1,\n.body-2 {\n    line-height: 1;\n    letter-spacing: 0;\n}\n\n.v-list-item {\n    --cursor: default;\n\n    padding: $base-indent / 2 $gutter;\n    cursor: var(--cursor);\n\n    @include max(xs) {\n        padding: $base-indent / 3 $base-indent;\n    }\n\n    &::after {\n        display: none;\n    }\n\n    &:hover {\n        background-color: $color-bg--hover;\n\n        ::v-deep {\n            .v-input {\n                &__slot {\n                    border-color: $color-info;\n                }\n            }\n        }\n    }\n\n    &__title {\n        display: flex;\n        flex-direction: column;\n        font-size: 16px;\n        text-overflow: initial;\n        overflow: initial;\n        white-space: normal;\n\n        @include max(sm) {\n            font-size: 18px;\n        }\n\n        span {\n            line-height: 1.2;\n            font-size: 17px;\n        }\n    }\n\n    &__content {\n        width: 100%;\n\n        & + .v-list-item__content {\n            padding-top: 0;\n        }\n    }\n\n    &__avatar {\n        position: static;\n\n        ::v-deep {\n            .v-input {\n                &__slot,\n                &__control {\n                    position: static;\n                }\n                &__slot {\n                    width: 30px;\n                    height: 30px;\n                    border-radius: 50%;\n                    @include border(all);\n                }\n            }\n            .v-input--selection-controls,\n            .v-input--selection-controls__input {\n                position: static;\n                margin: auto;\n            }\n            input {\n                max-height: 100%;\n                @include coverdiv;\n            }\n            i {\n                font-size: 20px;\n            }\n        }\n    }\n\n    & + .v-list-item {\n        @include border(top);\n    }\n}\n\n.btn-clear {\n    margin-right: -10px;\n}\n</style>\n","<template>\n    <div :class=\"{ booking: $isMobile }\">\n        <div v-if=\"loading\" class=\"v-skeleton-loader-wrap\" :class=\"{ 'bid-item': $isMobile }\">\n            <app-skeleton-boilerplate\n                v-for=\"i in 3\"\n                :key=\"i\"\n                type=\"heading, list-item\"\n                :class=\"{ 'v-skeleton-loader-wrap__item': $isMobile }\"\n            />\n        </div>\n        <template v-else>\n            <div v-for=\"(item, index) in BIDS\" :key=\"index\" class=\"bid-item\">\n                <template v-if=\"index === BID_INDEX\">\n                    <template v-if=\"$isMobile\">\n                        <!--ВЫБОР СОТРУДНИКА-->\n                        <box-list-item @click.native=\"goTo({ index, name: 'employees' })\">\n                            <template #image>\n                                <div\n                                    v-if=\"Object.values(item.employee).length\"\n                                    class=\"bid-item__avatar\"\n                                >\n                                    <app-image-user-avatar\n                                        class=\"bid-item__avatar-image\"\n                                        :size=\"46\"\n                                        :image=\"item.employee.avatar\"\n                                    />\n                                    <v-btn\n                                        icon\n                                        width=\"24\"\n                                        height=\"24\"\n                                        :ripple=\"false\"\n                                        class=\"u-hide-before\"\n                                        title=\"Показать все отзывы специалиста\"\n                                    >\n                                        <svg\n                                            xmlns=\"http://www.w3.org/2000/svg\"\n                                            viewBox=\"0 0 24 24\"\n                                            width=\"18px\"\n                                            height=\"18px\"\n                                        >\n                                            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n                                            <path\n                                                d=\"M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\n                                            />\n                                        </svg>\n                                    </v-btn>\n                                </div>\n                                <div\n                                    v-else\n                                    class=\"bid-item__image d-flex align-center justify-center\"\n                                    :class=\"{\n                                        'bid-item__image--active': Object.values(item.employee)\n                                            .length,\n                                    }\"\n                                >\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        viewBox=\"0 0 24 24\"\n                                        height=\"24\"\n                                        fill=\"#fff\"\n                                    >\n                                        <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n                                        <path\n                                            d=\"M12.087 13.334c2.526 0 5.2-3.285 5.2-6.391 0-3.333-2.282-5.943-5.2-5.943-2.955 0-5.269 2.56-5.269 5.827-.001 3.222 2.657 6.507 5.269 6.507Zm0-10.483c1.876 0 3.346 1.8 3.346 4.093 0 2.341-2.087 4.54-3.346 4.54-1.429 0-3.418-2.347-3.418-4.657 0-2.267 1.469-3.976 3.418-3.976Zm9.9 16.937c-1.38 1.511-5.8 3.2-9.934 3.213h-.047c-4.1 0-8.494-1.649-9.883-3.138a1.626 1.626 0 0 1-.514-1.228 7.126 7.126 0 0 1 4.631-6.193.925.925 0 1 1 .59 1.754 5.286 5.286 0 0 0-3.362 4.4c.617.736 4.407 2.55 8.535 2.55h.043c4.175-.013 7.978-1.87 8.583-2.615a5.058 5.058 0 0 0-3.217-4.335.926.926 0 1 1 .555-1.766 6.9 6.9 0 0 1 4.522 6.1 1.634 1.634 0 0 1-.5 1.247Z\"\n                                        />\n                                    </svg>\n                                </div>\n                            </template>\n                            <template #title>\n                                <span class=\"bid-item__title--eclipse\">\n                                    {{\n                                        Object.values(item.employee).length\n                                            ? item.employee.name\n                                            : 'Сотрудник'\n                                    }}\n                                </span>\n                            </template>\n                            <template #subtitle>\n                                <span class=\"bid-item__title--eclipse\">\n                                    {{\n                                        Object.values(item.employee).length\n                                            ? item.employee.description\n                                            : 'Выберите специалиста'\n                                    }}\n                                </span>\n                            </template>\n                            <template #icon>\n                                <template v-if=\"Object.values(item.employee).length\">\n                                    <div\n                                        class=\"bid-item__close d-flex justify-center align-center\"\n                                        @click.stop=\"CLEAR_EMPLOYEE(index)\"\n                                    >\n                                        <v-icon size=\"18\"> close </v-icon>\n                                    </div>\n                                </template>\n                                <template v-else>\n                                    <v-icon size=\"24\"> chevron_right</v-icon>\n                                </template>\n                            </template>\n                        </box-list-item>\n\n                        <!--ВЫБОР УСЛУГИ-->\n                        <box-list-item @click.native=\"goTo({ index, name: 'services' })\">\n                            <template #image>\n                                <div\n                                    class=\"bid-item__image d-flex align-center justify-center\"\n                                    :class=\"{\n                                        'bid-item__image--active': SERVICES(item.servicesIDs)\n                                            .length,\n                                    }\"\n                                >\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        viewBox=\"0 0 24 24\"\n                                        height=\"24\"\n                                        fill=\"#fff\"\n                                    >\n                                        <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n                                        <path\n                                            d=\"M18.404 2.651h-1.572v-.655a1 1 0 0 0-1-1H8.118a1 1 0 0 0-1 1v.656H5.546a2.957 2.957 0 0 0-2.953 2.953v14.437a2.961 2.961 0 0 0 2.957 2.957h12.842a2.961 2.961 0 0 0 2.957-2.957V5.605a2.957 2.957 0 0 0-2.952-2.955Zm-9.286.342h5.722v1.255H9.118Zm10.246 17.05a.964.964 0 0 1-.964.963H5.558a.965.965 0 0 1-.963-.963V5.606a.96.96 0 0 1 .959-.959h1.572v.6a1 1 0 0 0 1 1h7.715a1 1 0 0 0 1-1v-.6h1.572a.96.96 0 0 1 .959.96Zm-1.671-8.782a1 1 0 0 1-1 .994l-9.436-.028a1 1 0 0 1 0-1.993l9.436.028a1 1 0 0 1 .994 1Zm0 3.861a1 1 0 0 1-1 .993l-9.436-.038a1 1 0 0 1 0-1.993l9.436.038a1 1 0 0 1 .993 1Z\"\n                                        />\n                                    </svg>\n                                </div>\n                            </template>\n                            <template #title> {{ serviceTitle(item) }} </template>\n                            <template #subtitle>\n                                {{\n                                    Object.values(item.servicesIDs).length\n                                        ? convertMinutesToHours(commonTime(item), true)\n                                        : 'Выберите услугу '\n                                }}\n                            </template>\n                            <template #icon>\n                                <v-icon v-if=\"!SERVICES(item.servicesIDs).length\" size=\"24\">\n                                    chevron_right\n                                </v-icon>\n                            </template>\n                            <template #action>\n                                <div\n                                    v-for=\"service in serviceFilter(item)\"\n                                    :key=\"service.serviceID\"\n                                >\n                                    <v-divider class=\"mt-4\" />\n                                    <box-list-item tag=\"div\" small-title class=\"mt-4\">\n                                        <template #title> {{ service.name }} </template>\n                                        <template #subtitle>\n                                            <b-price\n                                                :value=\"service.price || 0\"\n                                                :type=\"service.priceTypeAlias\"\n                                            />\n                                            &bull; {{ convertMinutesToHours(service.time, true) }}\n                                        </template>\n                                        <template #icon>\n                                            <div\n                                                class=\"\n                                                    bid-item__close\n                                                    d-flex\n                                                    justify-center\n                                                    align-center\n                                                \"\n                                                @click.stop=\"\n                                                    CLEAR_ONE_SERVICE({\n                                                        index,\n                                                        serviceID: service.serviceID,\n                                                    })\n                                                \"\n                                            >\n                                                <v-icon size=\"18\"> close </v-icon>\n                                            </div>\n                                        </template>\n                                    </box-list-item>\n                                </div>\n                                <v-btn\n                                    v-if=\"\n                                        !fullServices &&\n                                        SERVICES(item.servicesIDs).length > showServicesCount\n                                    \"\n                                    text\n                                    color=\"#4c61ff\"\n                                    class=\"mt-5 px-0\"\n                                    @click.stop=\"fullServices = !fullServices\"\n                                >\n                                    Посмотреть все услуги\n                                </v-btn>\n                            </template>\n                        </box-list-item>\n                        <!--ВЫБОР ДАТЫ-->\n                        <box-list-item @click.native=\"goTo({ index, name: 'date' })\">\n                            <template #image>\n                                <div\n                                    class=\"bid-item__image d-flex align-center justify-center\"\n                                    :class=\"{\n                                        'bid-item__image--active': Object.values(item.date).length,\n                                    }\"\n                                >\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        viewBox=\"0 0 24 24\"\n                                        height=\"24\"\n                                        fill=\"#fff\"\n                                    >\n                                        <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n                                        <path\n                                            d=\"M19.803 9.966a.925.925 0 0 1-.925.925H5.264a.925.925 0 1 1 0-1.85h13.614a.925.925 0 0 1 .925.925Zm2.427-2.5v12.278a3.258 3.258 0 0 1-3.254 3.253H5.254A3.257 3.257 0 0 1 2 19.744V7.466a2.9 2.9 0 0 1 2.9-2.9h1.151V1.92a.925.925 0 1 1 1.85 0v2.646h8.429V1.92a.925.925 0 1 1 1.85 0v2.646h1.155a2.9 2.9 0 0 1 2.9 2.893Zm-1.85 0a1.048 1.048 0 0 0-1.047-1.047H4.899a1.048 1.048 0 0 0-1.047 1.046v12.279a1.4 1.4 0 0 0 1.4 1.4h13.72a1.4 1.4 0 0 0 1.4-1.4Z\"\n                                        />\n                                    </svg>\n                                </div>\n                            </template>\n                            <template #title>\n                                <span class=\"bid-item__title--eclipse\">\n                                    {{\n                                        Object.values(item.date).length\n                                            ? dateFilter(item.date)\n                                            : 'День и время'\n                                    }}\n                                </span>\n                            </template>\n                            <template #subtitle>\n                                <span class=\"bid-item__title--eclipse\">\n                                    {{\n                                        Object.values(item.date).length\n                                            ? timeFilter(item.date, item.time)\n                                            : 'Выберите день и время'\n                                    }}\n                                </span>\n                            </template>\n                            <template #icon>\n                                <template v-if=\"Object.values(item.date).length\">\n                                    <div\n                                        class=\"bid-item__close d-flex justify-center align-center\"\n                                        @click.stop=\"CLEAR_DATE(index)\"\n                                    >\n                                        <v-icon size=\"18\"> close </v-icon>\n                                    </div>\n                                </template>\n                                <template v-else>\n                                    <v-icon size=\"24\"> chevron_right</v-icon>\n                                </template>\n                            </template>\n                        </box-list-item>\n                    </template>\n                    <template v-else>\n                        <!--ВЫБОР СОТРУДНИКА-->\n                        <app-list-item-link\n                            v-if=\"Object.values(item.employee).length\"\n                            :item=\"item.employee\"\n                            :clearable=\"hasClearable\"\n                            @click=\"goTo({ index, name: 'employees' })\"\n                            @click:clear=\"CLEAR_EMPLOYEE(index)\"\n                        />\n                        <app-list-item-link\n                            v-else\n                            :item=\"{ name: 'Сотрудник' }\"\n                            @click=\"goTo({ index, name: 'employees' })\"\n                        />\n\n                        <!--ВЫБОР УСЛУГИ-->\n                        <app-service-item-select\n                            v-if=\"SERVICES(item.servicesIDs).length\"\n                            :data=\"SERVICES(item.servicesIDs)\"\n                            clearable\n                            @click=\"goTo({ index, name: 'services' })\"\n                            @click:clear=\"CLEAR_SERVICE(index)\"\n                        />\n                        <app-list-item-link\n                            v-else\n                            :item=\"{ name: 'Услуга' }\"\n                            @click=\"goTo({ index, name: 'services' })\"\n                        />\n\n                        <!--ВЫБОР ДАТЫ-->\n                        <app-list-item-link\n                            v-if=\"Object.values(item.date).length\"\n                            :item=\"{\n                                name: dateFilter(item.date),\n                                description: timeFilter(item.date, item.time),\n                            }\"\n                            clearable\n                            @click=\"goTo({ index, name: 'date' })\"\n                            @click:clear=\"CLEAR_DATE(index)\"\n                        />\n                        <app-list-item-link\n                            v-else\n                            :item=\"{ name: 'Дата и время' }\"\n                            @click=\"goTo({ index, name: 'date' })\"\n                        />\n                    </template>\n                </template>\n                <template v-else>\n                    <app-list-item-link\n                        :item=\"getCollapsedItem(index)\"\n                        clearable\n                        class=\"bid-item-collapse\"\n                        @click:clear=\"onRemoveBid(index)\"\n                    >\n                        <template #title>\n                            {{ getCollapsedItem(index).name }}\n                            <span class=\"bid-item-collapse__date\">\n                                ({{ getCollapsedItem(index).date }})\n                            </span>\n                        </template>\n                    </app-list-item-link>\n                </template>\n            </div>\n            <div v-if=\"isAddButtonVisible\" class=\"mt-3 ml-6\">\n                <v-btn\n                    color=\"link\"\n                    text\n                    small\n                    class=\"px-0 like-link\"\n                    plain\n                    :ripple=\"false\"\n                    @click=\"onAddNewBid\"\n                >\n                    + Записаться еще\n                </v-btn>\n            </div>\n        </template>\n    </div>\n</template>\n\n<script>\nimport { defineAsyncComponent } from 'vue';\nimport moment from 'moment';\nimport { mapMutations, mapGetters, mapActions } from 'vuex';\nimport { metaMixin, servicesMixin, clearBidMixin } from '@/mixins';\nimport AppListItemLink from '@/components/lists/items/list-item-link';\nimport BoxListItem from '@/components/lists/box-list-item';\nimport AppEmployeesItem from '@/modules/online/shared/components/employees-item';\nimport AppServiceItemSelect from '@/components/service-item-select';\nimport { convertMinutesToHours } from '@beautybox/core/utils';\nimport { serviceDeclension } from '@beautybox/core/helpers';\nimport { checkBidsItem } from '@/utils';\nimport { joinQuery } from '@beautybox/core/utils';\nmoment.locale('ru');\n\nconst AppImageUserAvatar = defineAsyncComponent(() =>\n    import('@beautybox/ui-kit/components/image/ImageUserAvatar')\n);\nconst BPrice = defineAsyncComponent(() => import('@/components/blocks/BPrice.vue'));\n\nexport default {\n    name: 'app-booking-page',\n    components: {\n        AppServiceItemSelect,\n        AppEmployeesItem,\n        AppListItemLink,\n        BoxListItem,\n        AppImageUserAvatar,\n        BPrice,\n    },\n    mixins: [metaMixin, servicesMixin, clearBidMixin],\n    data: () => ({\n        loading: true,\n        fullServices: false,\n        showServicesCount: 2,\n    }),\n    computed: {\n        ...mapGetters([\n            'USER_INFO',\n            'USER_ROLE',\n            'SERVICES',\n            'BIDS',\n            'BID_INDEX',\n            'SELECTED_SERVICES',\n            'SELECTED_TIME',\n            'SELECTED_DATE',\n        ]),\n        hasClearable() {\n            return (\n                (this.USER_ROLE === 'client' ||\n                    this.USER_ROLE === 'studio_master' ||\n                    this.USER_ROLE === 'studio_owner') &&\n                !this.$route.query.hasOwnProperty('employeeID')\n            );\n        },\n\n        joinToQuery() {\n            let query = '';\n\n            if (this.SELECTED_SERVICES.length) {\n                query = joinQuery(query, 'serviceIDs', this.SELECTED_SERVICES.join(','));\n            }\n\n            if (this.SELECTED_TIME.length) {\n                query = joinQuery(query, 'time', this.SELECTED_TIME);\n            }\n\n            if (this.SELECTED_DATE.length) {\n                query = joinQuery(query, 'date', this.SELECTED_DATE);\n            }\n\n            if (this.$route.query.employeeID) {\n                query = joinQuery(query, 'employeeID', this.$route.query.employeeID);\n            }\n\n            return query;\n        },\n\n        isAddButtonVisible() {\n            return checkBidsItem(this.BIDS[this.BID_INDEX]);\n        },\n    },\n    created() {\n        this.requestAll([this.getMeta()]);\n        this.requestEnd(async () => {\n            await this.getServices();\n\n            if (this.$route.query.visit) {\n                try {\n                    const visit = JSON.parse(this.$route.query.visit);\n                    await this.substituteBids(visit);\n\n                    const query = { ...this.$route.query };\n                    delete query['visit'];\n                    this.replaceToQuery(query);\n                } catch (error) {\n                    console.log('parse error', error);\n                }\n            }\n            this.loading = false;\n        });\n    },\n    methods: {\n        ...mapMutations([\n            'SELECT_BID_INDEX',\n            'SELECT_EMPLOYEE',\n            'SELECT_SERVICE',\n            'CLEAR_EMPLOYEE',\n            'CLEAR_SERVICE',\n            'CLEAR_ONE_SERVICE',\n            'CLEAR_DATE',\n        ]),\n        ...mapActions(['ADD_NEW_BID', 'REMOVE_BID']),\n        onAddNewBid() {\n            // TODO подумать насчет логики редактирования\n            // посылать запрос на сохранение когда бид становится не активным? или по клику на кнопку?\n            // запрос должен быть послан до того как создастся новый бид в сторе\n            // делать ли отправку запроса через watch на бид индексе?\n            this.ADD_NEW_BID();\n        },\n        onRemoveBid(index) {\n            this.REMOVE_BID({ index });\n        },\n        goTo(item) {\n            this.SELECT_BID_INDEX(item.index);\n            this.$router.push({ name: item.name, query: { ...this.$route.query } });\n        },\n        getCollapsedItem(index) {\n            const date = this.dateTimeFilter(this.BIDS[index].date, this.BIDS[index].time);\n            return { name: `Запись ${index + 1}`, date };\n        },\n        dateFilter(value) {\n            if (!value) {\n                return '';\n            }\n            return moment(value).format('LL');\n        },\n        timeFilter(value1, value2) {\n            if (!value1 && !value2) {\n                return '';\n            }\n\n            if (value1 && !value2) {\n                return 'Время не выбрано';\n            }\n\n            return `${moment(value1).format('dddd')} в ${value2}`;\n        },\n        dateTimeFilter(date, time) {\n            if (!date && !time) {\n                return '';\n            }\n            return `${moment(date).format('D MMMM')} в ${time}`;\n        },\n\n        serviceFilter(item) {\n            if (this.fullServices) {\n                return this.SERVICES(item.servicesIDs);\n            } else {\n                return this.SERVICES(item.servicesIDs).slice(0, this.showServicesCount);\n            }\n        },\n        commonTime(item) {\n            return this.SERVICES(item.servicesIDs).reduce((acc, service) => {\n                acc += service.time;\n                return acc || 0;\n            }, 0);\n        },\n        serviceTitle(item) {\n            return Object.values(item.servicesIDs).length\n                ? this.SERVICES(item.servicesIDs).length +\n                      ' ' +\n                      this.serviceDeclension(this.SERVICES(item.servicesIDs).length)\n                : 'Услуги ';\n        },\n\n        async getEmployees() {\n            console.log('--- getEmployees');\n            let errors = {};\n            let employeesEnabled = [];\n            let employeesDisabled = [];\n            let employeesNotAvailable = [];\n\n            ({\n                errors: errors = {},\n                enabled: employeesEnabled = [],\n                disabled: employeesDisabled = [],\n                notAvailable: employeesNotAvailable = [],\n            } = await this.$fetch.get(`/${this.$route.params.id}/employees${this.joinToQuery}`));\n\n            return {\n                enabled: employeesEnabled,\n                notAvailable: employeesNotAvailable,\n                disabled: employeesDisabled,\n            };\n        },\n\n        async substituteBids(visit) {\n            const employees = await this.getEmployees();\n\n            const employeeEnabledIDs = employees.enabled.map((employee) => employee.employeeID);\n            const employeeNotAvailableIDs = employees.notAvailable.map(\n                (employee) => employee.employeeID\n            );\n\n            if (!visit[0]) {\n                this.messageError('Не удалось подставить данные прошлого визита');\n                return;\n            }\n\n            const bid = visit[0];\n            if (\n                !employeeEnabledIDs.includes(bid.masterID) &&\n                !employeeNotAvailableIDs.includes(bid.masterID)\n            ) {\n                this.messageError('Прошлый мастер сейчас не доступен');\n                return;\n            }\n\n            const { employee } = await this.$fetch.get(\n                `/${this.$route.params.id}/employees/${bid.masterID}`\n            );\n\n            this.SELECT_EMPLOYEE(employee);\n\n            const params = new URLSearchParams({\n                masterID: bid.masterID,\n                'serviceIDs[]': bid.serviceIDs,\n            });\n\n            const { validServices = [] } = await this.$fetch.get(\n                `/${this.$route.params.id}/check-services-master?${params.toString()}`\n            );\n\n            this.SELECT_SERVICE(validServices);\n        },\n        convertMinutesToHours,\n        serviceDeclension,\n    },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.booking {\n    position: relative;\n    margin-top: -50px;\n\n    @include max(sm) {\n        padding-bottom: 41px;\n    }\n}\n\n.bid-item {\n    & + & {\n        margin-top: $base-indent;\n    }\n\n    &__avatar {\n        position: relative;\n\n        .v-btn {\n            position: absolute;\n            right: -5px;\n            bottom: -5px;\n            z-index: z(fixed);\n            background-color: #fff;\n            border-radius: 50% !important;\n\n            svg {\n                width: 16px;\n                height: 16px;\n                fill: $color-info-third !important;\n            }\n        }\n\n        .v-avatar {\n            margin: 0 !important;\n        }\n    }\n\n    &__avatar-image {\n        border-radius: $border-radius-card;\n    }\n\n    &__image {\n        width: 46px;\n        height: 46px;\n        border-radius: $border-radius-card;\n        background-color: $gray--lighten;\n\n        &--active {\n            background-color: $color-info-second;\n        }\n    }\n\n    &__title {\n        &--eclipse {\n            @include text-overflow-column(1);\n            word-break: break-all;\n        }\n    }\n\n    &__close {\n        border-radius: 50%;\n        width: 24px;\n        height: 24px;\n        background-color: $color-bg-gray;\n    }\n\n    &-collapse {\n        background-color: #fff;\n        border-radius: $border-radius-card;\n        box-shadow: $box-shadow-light;\n\n        &__date {\n            color: $color-secondary;\n        }\n    }\n\n    @include max(sm) {\n        display: grid;\n        row-gap: 16px;\n        margin: 0 20px;\n    }\n\n    @include min(md) {\n        background: #fff;\n        border-radius: $border-radius-card;\n        box-shadow: $box-shadow-light;\n    }\n\n    .v-list-item {\n        padding: 0 $gutter;\n\n        @include max(xs) {\n            padding-right: $base-indent;\n            padding-left: $base-indent;\n            // border-radius: 0 !important;\n        }\n\n        &:first-child {\n            border-top-left-radius: $border-radius-card;\n            border-top-right-radius: $border-radius-card;\n        }\n\n        &:last-child {\n            border-bottom-left-radius: $border-radius-card;\n            border-bottom-right-radius: $border-radius-card;\n        }\n\n        & + .v-list-item {\n            @include border(top);\n        }\n    }\n\n    ::v-deep {\n        .v-list-item {\n            &__title {\n                font-weight: 500;\n            }\n\n            &__subtitle {\n                &.mt-2 {\n                    margin-top: 0 !important;\n\n                    span {\n                        margin-top: 6px;\n                        line-height: 11px;\n                    }\n                }\n            }\n        }\n\n        .list-item {\n            &__inner {\n                flex: 1;\n            }\n        }\n    }\n}\n\n.v-skeleton-loader-wrap {\n    overflow: hidden;\n    border-radius: $border-radius-card;\n    box-shadow: $box-shadow-base;\n\n    @include max(sm) {\n        box-shadow: none;\n        overflow: unset;\n        border-radius: 16px !important;\n    }\n\n    &__item {\n        box-shadow: $box-shadow-base !important;\n        border-radius: 16px !important;\n    }\n}\n\n::v-deep .v-skeleton-loader {\n    width: 100%;\n    padding: $base-indent;\n    border-radius: 0;\n    background-color: #fff;\n\n    @include min(md) {\n        box-shadow: none !important;\n\n        &:first-child {\n            border-top-left-radius: $border-radius-card !important;\n            border-top-right-radius: $border-radius-card !important;\n        }\n\n        &:last-child {\n            border-bottom-left-radius: $border-radius-card !important;\n            border-bottom-right-radius: $border-radius-card !important;\n        }\n    }\n\n    &__heading {\n    }\n\n    &__list-item {\n        height: 16px;\n        margin-top: $base-indent;\n        padding: 0;\n    }\n}\n</style>\n"],"names":["_sfc_main","BScrollPhotosGallery","arr","acc","item","convertMinutesToHours","moment","AppImageUserAvatar","defineAsyncComponent","__vitePreload","BPrice","AppServiceItemSelect","AppEmployeesItem","AppListItemLink","BoxListItem","metaMixin","servicesMixin","clearBidMixin","mapGetters","query","joinQuery","checkBidsItem","visit","error","mapMutations","mapActions","index","date","value","value1","value2","time","service","errors","employeesEnabled","employeesDisabled","employeesNotAvailable","employees","employeeEnabledIDs","employee","employeeNotAvailableIDs","bid","params","validServices","serviceDeclension"],"mappings":"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"}