<template>
    <div>
        <BreadCrumb></BreadCrumb>
        <div class="row row-sm g-0">
            <div class="col-lg-12">
                <!-- <a href="/bai-viet" class="btn btn-link button-icon"><i class="fe fe-arrow-left me-2"></i>Danh sách bài viết </a> -->
                <router-link class="btn btn-link button-icon mb-2" :to="{ name: 'listOrder' }">
                    <i class="fe fe-arrow-left me-2"></i>Danh sách đơn hàng
                </router-link>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 grid-margin">
                <div class="card shadow-none mb-1">
                    <div class="card-body pd-t-0 pd-b-0">
                        <form @submit.prevent="tracking" class="row justify-content-center">
                            <div class="col-lg-6 text-center">
                                <div class="input-group mb-3 mt-3">
                                    <input v-model="orderCode" type="text" placeholder="Nhập mã đơn hàng cần tra"
                                        aria-label="Nhập mã đơn hàng cần tra" class="form-control">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-outline-primary"
                                            style="border-radius:0 5px 5px 0px">
                                            <i class="fa fa-search"></i>
                                            Tìm kiếm
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <loader class="m-3" v-if="loading"></loader>
            <div class="col-lg-8 order-info">

                <div class="card shadow-none" v-if="model != null && model.Id > 0 && !loading">
                    <div class="card-body">
                        <Actions :orderId="model.Id" :orderStatus="model.General.Status" :editable="model.Editable"
                            :orderPhysicalStatus="model.General.PhysicalStatus" @reload="tracking">
                        </Actions>

                        <div class="panel panel-primary tabs-style-2">
                            <div class=" tab-menu-heading">
                                <div class="tabs-menu1">
                                    <!-- Tabs -->
                                    <ul class="nav panel-tabs main-nav-line">
                                        <li>
                                            <a href="#tabGeneral" class="nav-link me-1 active"
                                                data-bs-toggle="tab">Thông tin đơn hàng</a>
                                        </li>
                                        <!-- <li>
                                            <a href="#tabPicture" class="nav-link me-1" data-bs-toggle="tab">Hình
                                                ảnh</a>
                                        </li>
                                        <li>
                                            <a href="#tabWeights" class="nav-link" data-bs-toggle="tab">Trọng lượng</a>
                                        </li> -->
                                    </ul>
                                </div>
                            </div>
                            <div class="panel-body tabs-menu-body main-content-body-right border">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tabGeneral">
                                        <General :generalModel="model.General"></General>
                                        <hr class="bd" />
                                        <div class="row">
                                            <div class="row">
                                                <div class="col-lg-6 bd-r">
                                                    <template v-for="item in model.Addresses">
                                                        <Address :addressModel="item" :editable="model.Editable"
                                                            @reload="tracking">
                                                        </Address>
                                                    </template>
                                                </div>
                                                <div class="col-lg-6">
                                                    <Finance :finModel="model.Finance" :customerId="model.CustomerId"
                                                        :editable="model.Editable" @reload="tracking">
                                                    </Finance>
                                                </div>
                                            </div>

                                        </div>
                                        <Packages :packageModel="model.Packages" :orderId="model.Id"
                                            :editable="model.Editable" @reload="tracking">
                                        </Packages>
                                    </div>
                                    <div class="tab-pane" id="tabPicture">
                                        Thông tin hình ảnh ở đây
                                    </div>
                                    <div class="tab-pane" id="tabWeights">
                                        Thông tin trọng lượng ở đây
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div class="col-lg-4 order-track" v-if="model != null && model.Id > 0 && !loading">
                <TrackList :trackModel="model.Tracks"></TrackList>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

import orderService from "@/services/orderService";


//#region Components
import BreadCrumb from './components/breadcrumb.vue';
import General from './components/general.vue';
import TrackList from './components/trackList.vue';
import Address from './components/address.vue';
import Packages from './components/packages.vue';
import Finance from './components/fin.vue';
import Actions from './components/actions.vue';
import { useToast } from "vue-toastification";
const toast = useToast();
//#endregion

//#region props
const props = defineProps({
    code: {
        type: String,
        default: ''
    }
});
//#endregion

//#region DATA
const loading = ref(false);
const model = reactive({});
const orderCode = ref();
//#endregion


async function tracking() {
    loading.value = true;
    if (orderCode.value != null && orderCode.value.length > 0) {
        var orderResult = await orderService.Tracking(orderCode.value);
        if (orderResult.Id > 0) {
            Object.assign(model, orderResult);
            if (model.Tracks != null && model.Tracks.length > 0) {
                model.Tracks.forEach(trackItem => {
                    trackItem.MediaItems = [];
                    if (model.MediaItems != null && model.MediaItems.length > 0) {
                        model.MediaItems.forEach(mediaItem => {
                            if (mediaItem.OrderTrackId === trackItem.Id) {
                                trackItem.MediaItems.push(mediaItem);
                            }

                        });
                    }
                });
            }
        }

    }
    loading.value = false;
    console.log(model.Id);
}

onMounted(async () => {
    if (props.code != null || props.code.length > 0) {
        orderCode.value = props.code;
        await tracking();
    }

});

</script>

<style scoped>
.timeline-panel {
    padding: 15px !important;
}

h6.timeline-title {
    font-size: .98rem !important;
    font-weight: 500;
}

.timeline-footer span {
    font-size: .83rem !important;
}

.order-info {
    min-height: 80vh;
}
</style>