<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Tra cứu hành trình</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Tra cứu hành trình</li>
                </ol>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title mb-0">Tra cứu với mã đơn </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12 mb-2">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input class="form-control" v-model="code" />
                                                <button class="btn btn-success" @click="getOrder(code)">Tìm kiếm</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="result == 1" class="col-lg-8 mt-3">
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <nav class="nav nav-style-6 nav-pills mb-3 nav-justified d-sm-flex d-block"
                                                role="tablist">
                                                <a class="nav-link active" data-bs-toggle="tab" role="tab"
                                                    aria-current="page" href="#nav-order-common" aria-selected="true">Thông
                                                    tin chung</a>
                                                <a class="nav-link" data-bs-toggle="tab" role="tab"
                                                    href="#nav-cart-justified" aria-selected="false" tabindex="-1">Đóng gói
                                                    <!-- <span class="badge bg-info-transparent ms-1">Full</span> -->
                                                </a>
                                                <a class="nav-link" data-bs-toggle="tab" role="tab"
                                                    href="#nav-orders-justified" aria-selected="false" tabindex="-1">Tài
                                                    chính
                                                </a>
                                                <a class="nav-link" data-bs-toggle="tab" role="tab"
                                                    href="#nav-offers-justified" aria-selected="false" tabindex="-1">Vấn đề
                                                    <span class="badge bg-warning-transparent ms-1">7</span></a>
                                            </nav>
                                            <div class="card custom-card">
                                                <div class="card-body">
                                                    <div class="tab-content">
                                                        <div class="tab-pane text-muted active show" id="nav-order-common"
                                                            role="tabpanel">
                                                            <OrderInfo @refresh="getOrder(code)" :orderItem="orderItem"
                                                                :orderAddresses="orderAddresses"></OrderInfo>
                                                        </div>
                                                        <div class="tab-pane text-muted" id="nav-cart-justified"
                                                            role="tabpanel">
                                                            How travel coupons make you a better lover. Why cultural
                                                            solutions are
                                                            the new black. Why mom was right about travel insurances. How
                                                            family
                                                            trip ideas can help you predict the future. <b>How carnival
                                                                cruises make
                                                                you a better lover</b>. Why you'll never succeed at daily
                                                            deals. 11
                                                            ways cheapest flights can find you the love of your life. The
                                                            complete
                                                            beginner's guide to mission trips. If you read one article about
                                                            cultural notes read this one. Why you shouldn't eat vacation
                                                            package in
                                                            bed. </div>
                                                        <div class="tab-pane text-muted" id="nav-orders-justified"
                                                            role="tabpanel">
                                                            Unbelievable healthy snack success stories. 12 facts about safe
                                                            food
                                                            handling tips that will impress your friends. Restaurant weeks
                                                            by the
                                                            numbers. Will mexican food ever rule the world? The 10 best thai
                                                            restaurant youtube videos. How restaurant weeks can make you
                                                            sick. The
                                                            complete beginner's guide to cooking healthy food. Unbelievable
                                                            food
                                                            stamp success stories. How whole foods markets are making the
                                                            world a
                                                            better place. 16 things that won't happen in dish reviews.
                                                        </div>
                                                        <div class="tab-pane text-muted" id="nav-offers-justified"
                                                            role="tabpanel">
                                                            Why delicious magazines are killing you. Why our world would end
                                                            if
                                                            restaurants disappeared. Why restaurants are on crack about
                                                            restaurants.
                                                            How restaurants are making the world a better place. 8 great
                                                            articles
                                                            about minute meals. Why our world would end if healthy snacks
                                                            disappeared. Why the world would end without mexican food. The
                                                            evolution
                                                            of chef uniforms. How not knowing food processors makes you a
                                                            rookie.
                                                            Why whole foods markets beat peanut butter on pancakes. </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="result == 1" class="col-lg-4">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="panel-body">
                                            <div class="card custom-card">
                                                <div class="card-header">
                                                    <div class="card-title">Hành trình của đơn hàng</div>
                                                </div>
                                                <div class="card-body overflow-auto" style="height: 520px;">
                                                    <div class="vtimeline" v-if="orderTracks">
                                                        <div v-for="item in orderTracks"
                                                            class="timeline-wrapper timeline-inverted timeline-wrapper-primary">
                                                            <div class="timeline-panel">
                                                                <div class="timeline-heading">
                                                                    <h6 class="timeline-title">{{ item.TrackActionTypeStr }}
                                                                    </h6>
                                                                </div>
                                                                <div class="timeline-body">
                                                                    <p>{{ item.Name }}</p>
                                                                </div>
                                                                <div
                                                                    class="timeline-footer d-flex align-items-center flex-wrap">
                                                                    <i class="fe fe-user  text-muted me-1"></i>
                                                                    <span>{{ item.CreatedByUserName }}</span>
                                                                    <span class="ms-auto"><i
                                                                            class="fe fe-calendar text-muted me-1"></i>{{
                                                                                item.CreatedTimeDisplay }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import orderService from '@/services/orderService';
import { useToast } from "vue-toastification";
import OrderInfo from "./components/orderInfo.vue";
import { useRoute } from 'vue-router'

const route = useRoute();


const toast = useToast();

const code = ref('');

if (route.query.code)
    code.value = route.query.code;

const result = ref('');

const orderItem = reactive({});
const orderTracks = reactive([]);
const orderAddresses = reactive([]);

async function getOrder(value) {
    var orderRs = await orderService.GetOrderByCode(value);
    if (orderRs.Result == 1) {
        result.value = orderRs.Result;
        Object.assign(orderItem, orderRs.Order);
        Object.assign(orderAddresses, orderRs.Order.Addresses);
        Object.assign(orderTracks, orderRs.Order.OrderTracks);

    } else {
        toast.error(orderRs.Message);
    }
}

onMounted(async () => {
    if (code.value) {
        await getOrder(code.value);
    }
});

</script>
<style></style>