<template>
    <div>

        <!-- <p>Nội dung của giao nhận hàng hóa
            1. Danh sách đơn hàng
            2. Ấn vào đơn hàng sẽ tùy thuộc vào trạng thái mà xác định là lấy hàng hay giao hàng
            3. Cập nhật lấy hàng, giao hàng phải up ảnh</p> -->
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Giao nhận hàng hóa</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Giao nhận hàng hóa</li>
                </ol>
            </div>

        </div>
        <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 grid-margin">
                <div class="card shadow-none mb-5">
                    <div class="card-body  bd p-0 pb-3">

                        <div class="d-flex mb-3 pd-l-10 pd-t-10 pd-b-10 bd-b">
                            <div class="flex-grow-1 pd-t-10 pd-l-10">
                                <b class="tx-16">Danh sách đơn hàng</b>
                            </div>
                            <div class="pd-r-10" v-if="!loading">
                                <!-- <button @click="search" type="button" class="btn btn-warning  btn-icon me-2">
                                    <i class="fe fe-refresh-cw"></i>
                                </button> -->
                                <button @click="search" type="button" class="btn btn-sm nobg">
                                    <i class="fas fa-sync-alt"></i></button>
                            </div>

                        </div>
                        <loader v-if="loading" lass="mt-5 mb-5"></loader>
                        <empty v-if="!loading && items.length <= 0" :border="false"></empty>
                        <div v-if="!loading && items.length > 0">
                            <div class="row p-3 mb-2" v-for="item in items">
                                <div class="col-lg-3 col-md-6">
                                    <h6 class="tx-16">
                                        <i class="fas fa-barcode mg-r-5"></i>
                                        <router-link :to="{ name: 'orderTrack', params: { code: item.Code } }"
                                            target="_blank">
                                            {{ item.Code }}
                                        </router-link>
                                    </h6>
                                    <p class="tx-12">
                                        <i class="fas fa-road mg-r-5"></i>
                                        <i>{{ item.RouteName }}</i>
                                    </p>
                                    <span class="post-info mg-r-10 pd-r-10">
                                        <span class="tag mg-r-5 mg-b-5" title="Trạng thái">
                                            {{ item.OrderOps ? item.OrderOps.PhysicalStatusStr : 'Không có' }}
                                        </span>
                                    </span>

                                </div>
                                <div class="col-lg-3 col-md-6" v-html="getAddress(item.Addresses, 1)"></div>

                                <div class="col-lg-4 col-md-12 mt-2 mb-2">
                                    <span v-if="item.Packages == null || item.Packages.length <= 0">Không có</span>
                                    <div v-for="(pkg, index) in item.Packages">
                                        <hr v-if="index > 0" class="bd" />
                                        <div class="media d-block d-sm-flex">
                                            <viewer v-if="pkg.Picture != null && pkg.Picture.length > 0">
                                                <img class="avatar-md mg-sm-r-20 mg-b-20 mg-sm-b-0 align-self-center"
                                                    :key="pkg.Picture" :src="pkg.Picture" style="cursor: pointer;">
                                            </viewer>

                                            <img v-if="pkg.Picture == null || pkg.Picture.length <= 0"
                                                src="@/assets/images/48x48.svg"
                                                class="avatar-md mg-sm-r-20 mg-b-20 mg-sm-b-0 align-self-center">

                                            <div class="media-body">
                                                <h5 class="mg-b-5 tx-inverse tx-15">{{ pkg.Name }}</h5>
                                                Slg:{{ pkg.Quantity }}
                                            </div>
                                        </div>


                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-12">
                                    <div v-if="item.OrderOps != null && item.OrderOps.PhysicalStatus == 12"
                                        class="dropdown btn-group">
                                        <button @click="showDrawer(drawerOptions.pickup, item.Id)" type="button"
                                            class="btn btn-light btn-rounded">
                                            <i class="fas fa-download mg-r-10"></i>Nhận hàng</button>
                                        <button type="button"
                                            class="btn btn-outline-dark dropdown-toggle btn-rounded split-dropdown"
                                            data-bs-toggle="dropdown" aria-expanded="true">
                                            <span class="caret"></span>
                                            <span class="sr-only"></span>
                                        </button>
                                        <div class="dropdown-menu tx-13" style="">
                                            <a class="dropdown-item" href="javascript:void(0);">Nhận hàng thất bại</a>
                                        </div>
                                    </div>
                                    <div v-if="item.OrderOps != null && (item.OrderOps.PhysicalStatus == 53 || item.OrderOps.PhysicalStatus == 51)"
                                        class="dropdown btn-group">
                                        <button @click="showDrawer(drawerOptions.delivery, item.Id)" type="button"
                                            class="btn btn-light btn-rounded">
                                            <i class="fas fa-download mg-r-10"></i>Giao hàng</button>
                                        <button type="button"
                                            class="btn btn-outline-dark dropdown-toggle btn-rounded split-dropdown"
                                            data-bs-toggle="dropdown" aria-expanded="true">
                                            <span class="caret"></span>
                                            <span class="sr-only"></span>
                                        </button>
                                        <div class="dropdown-menu tx-13" style="">
                                            <a class="dropdown-item" href="javascript:void(0);">Giao hàng thất bại</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 m-0 p-0">
                                    <hr class="bd bd-1 bd-gray-500 p-0 m-0" />
                                </div>
                            </div>


                        </div>
                        <pager ref="ctrlPager" v-show="!loading && items.length > 0" @PageSizeChanged="PageSizeChanged"
                            @PageIndexChanged="PageIndexChanged" :Total="searchModel.Pagination.Total"
                            :TotalCurrent="items.length"></pager>
                    </div>
                </div>
            </div>
        </div>
        <LadaDrawer :visible="isShowDrawer" :width="'60%'">
            <template #header>
                <div class="offcanvas-header bd">
                    <h5>
                        <span v-if="selectedDrawer == drawerOptions.pickup">Nhận hàng</span>
                        <span v-if="selectedDrawer == drawerOptions.delivery">Giao hàng</span>
                    </h5>
                    <button @click="hideDrawer" type="button" class="btn-close text-reset" title="Đóng">
                    </button>
                </div>
            </template>
            <template #body>
                <pickup @close="hideDrawerAndReload" :orderId="selectedOrderId"
                    v-if="selectedDrawer == drawerOptions.pickup">
                </pickup>
                <delivery @close="hideDrawerAndReload" :orderId="selectedOrderId"
                    v-if="selectedDrawer == drawerOptions.delivery">
                </delivery>
            </template>

        </LadaDrawer>

    </div>
</template>
<script setup>
//#region Imports
import { ref, reactive, onMounted } from 'vue'
import operationService from "@/services/business/operationService";
import { useRouter } from 'vue-router';
const router = useRouter();
//#endregion

//#region Components
import pickup from "./components/pickup.vue";
import delivery from "./components/delivery.vue";
import monitor from "./components/monitor/index.vue";
//#endregion


//#region DATA
const drawerOptions = {
    pickup: 1,
    delivery: 2
};
const isShowDrawer = ref(false);
const selectedDrawer = ref(null);
const selectedOrderId = ref(null);

const searchModel = reactive({
    Pagination: {
        Total: 0,
        PageIndex: 1,
        PageSize: 25
    },
    Sort: {
        Predicate: '',
        Reverse: true
    },
    Search: {
        PredicateObject: {


        }
    }
});
const items = reactive([]);
const loading = ref(false);
const ctrlPager = ref();

//#endregion


//#region Functions
const getAddress = (addresses, type) => {
    var addressInfo = "";
    var contactName = "";
    var contactPhone1 = "";
    var contactPhone2 = "";
    var contactAddress = "";
    var outputHtml = "";
    if (addresses && addresses.length > 0) {
        const address = addresses.find(addr => addr.AddressType === type);
        if (address) {
            contactName = `<b>${address.Name}</b> | `;
            outputHtml += contactName;
            contactPhone1 = `<b>${address.PhoneNumber1}</b>`;
            outputHtml += contactPhone1;
            if (address.PhoneNumber2 != null && address.PhoneNumber2.length > 0) {
                contactPhone2 = `hoặc <b>${address.PhoneNumber2}</b>`;
                outputHtml += contactPhone2;
            }
            contactAddress = `<p class='mt-1 mb-1'>${address.FullAddress}</p>`;
            outputHtml += contactAddress;


            if (address.ScheduledTimeStr != null && address.ScheduledTimeStr.length > 0) {
                // contactPhone2 = `hoặc <b>${address.PhoneNumber2}</b>`;
                outputHtml += `<i class='fas fa-calendar-day mg-r-5'></i> ${address.ScheduledTimeStr}`;
            }
            if (address.Note != null && address.Note.length > 0) {
                // contactPhone2 = `hoặc <b>${address.PhoneNumber2}</b>`;
                outputHtml += `<br/><i class='tx-13'>Ghi chú: ${address.Note}</i>`;
            }

        }
    }
    return outputHtml;
};
function PageSizeChanged(pagesize) {
    searchModel.Pagination.PageSize = pagesize;
    searchModel.Pagination.PageIndex = 1;
    loadData();
}
function PageIndexChanged(pageIndex) {
    searchModel.Pagination.PageIndex = pageIndex;
    loadData();
}
async function search() {
    searchModel.Pagination.PageIndex = 1;
    ctrlPager.value.Refresh();
    loadData();
}

async function loadData() {
    loading.value = true;
    items.splice(0, items.length);
    var searchResult = await operationService.Search(searchModel);
    if (searchResult.Items != null && searchResult.Items.length > 0) {
        searchResult.Items.forEach(post => {
            items.push(post);
        });
    }
    searchModel.Pagination.Total = searchResult.TotalRecord;
    loading.value = false;
}

const detail = (orderId) => {
    alert(`Ấn cái gì ${orderId}`);
    selectedOrderId.value = orderId;

}



const showDrawer = (selected, orderId) => {

    selectedDrawer.value = selected;
    selectedOrderId.value = orderId;
    if (selectedDrawer.value > 0) {
        isShowDrawer.value = true;
    }

};
const hideDrawer = () => {
    isShowDrawer.value = false;
    selectedDrawer.value = null;
};

const hideDrawerAndReload = () => {
    hideDrawer();
    loadData();
};
//#endregion


onMounted(async () => {
    //await getParents();
    await search();
});

</script>