<template>
    <AppLayout title="Services">
        <div class="container pt-10 pb-20 overflow-y-auto max-w-7xl">
            <Breadcrumbs class="pt-8" :breadcrumbs="breadcrumbs" />
            <div
                class="container flex flex-col-reverse w-full gap-5 mt-8 mb-10 lg:flex-row"
            >
                <div class="flex flex-col flex-1 w-full max-w-[800px] gap-5">
                    <ServiceCard :service="service" />
                    <Tiers :service="service" :tier="tier" />
                    <section class="flex flex-col w-full gap-5">
                        <Card
                            :title="milestone.name"
                            :subtext="$t('proposal.delivery_details')"
                        >
                            <div class="flex flex-col w-full gap-5">
                                <Milestone
                                    :worker="!isUser"
                                    :milestone="milestone"
                                    :accepted="milestone.accepted_at != null"
                                    :status="order.status"
                                    :declined="order.status == 'declined'"
                                />
                            </div>
                        </Card>
                    </section>

                    <Reviews
                        v-if="order.status == 'closed'"
                        :reviews="service.user_rates"
                        :reviewable="service"
                        type="service"
                        :canManage="isUser"
                    />
                </div>
                <div
                    class="flex flex-col w-full gap-5 max-w-[800px] lg:max-w-[340px]"
                >
                    <ClientInfo
                        v-if="!isUser"
                        :user="user"
                        :address="service.serviceable.location.address"
                        :service="service"
                    />

                    <EngineerServiceType
                        :tier="tier"
                        :isUser="isUser"
                        :paid="order?.milestones[0]?.status == 'paid'"
                        :refunded="order?.milestones[0]?.status == 'refunded'"
                    />
                </div>
            </div>
        </div>
    </AppLayout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import ServiceCard from "@/components/Services/ServiceCard.vue";
import Breadcrumbs from "@/components/General/Breadcrumbs";
import Milestones from "@/components/Projects/Client/Proposals/HiredMilestonesCard.vue";
import ClientInfo from "@/components/orders/ClientInfo.vue";
import EngineerServiceType from "@/components/Services/EngineerServiceType.vue";
import Milestone from "@/components/Services/MilestoneDetailsOverview.vue";
import Card from "@/components/Containers/ContentCard.vue";
import Tiers from "@/components/Services/Tiers";
import Reviews from "@/components/Reviews/Create.vue";
export default {
    components: {
        Card,
        AppLayout,
        ServiceCard,
        Breadcrumbs,
        Milestones,
        Milestone,
        ClientInfo,
        EngineerServiceType,
        Tiers,
        Reviews,
    },
    props: {
        service: Object,
        order: Object,
        milestone: Object,
        isUser: Boolean,
        worker: Object,
        user: Object,
    },
    data() {
        return {
            breadcrumbs: [
                {
                    name: "Register.dashord",
                    url: "/"
                    // url: null,
                },
                {
                    name: this.service.title,
                    url: null,
                },
            ],
        };
    },
    computed: {
        tier() {
            if (this.order.tier == 0) {
                return {
                    tierIdx: this.order.tier,
                    serviceId: this.service.id,
                    tier_price: this.service.basic_tier_price,
                    delivery_days: this.service.basic_tier_days,
                    tier_options: this.service.tier_options,
                    packageType: "basic",
                };
            } else if (this.order.tier == 1) {
                return {
                    tier: this.order.tier,
                    serviceId: this.service.id,
                    tier_price: this.service.standard_tier_price,
                    delivery_days: this.service.standard_tier_days,
                    tier_options: this.service.tier_options,
                    packageType: "standard",
                };
            } else if (this.order.tier == 2) {
                return {
                    tier: this.order.tier,
                    serviceId: this.service.id,
                    tier_price: this.service.pro_tier_price,
                    delivery_days: this.service.pro_tier_days,
                    tier_options: this.service.tier_options,
                    packageType: "pro",
                };
            }
        },
        paid() {
            return this.order.status == "paid";
        },
    },
    mounted() {
        // set html overflow to auto
        document.querySelector("html").style.overflow = "auto";
    },
};
</script>
