<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Theo dõi triển khai</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Theo dõi triển khai</li>
                </ol>
            </div>
            <div class="d-flex my-xl-auto right-content align-items-center">
                <div class="pe-1 mb-xl-0">
                    <button @click="reload" type="button" class="btn btn-warning  btn-icon me-2">
                        <i class="fe fe-refresh-cw"></i>
                    </button>
                </div>
            </div>
        </div>


        <div class="card mg-b-20">
            <div class="card-body">
                <loader v-if="loading" class="mt-5 mb-5"></loader>
                <div v-if="!loading" class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th rowspan="2" class="wd-lg-5p">#</th>
                                <th rowspan="2" class="wd-lg-15p minwidth150">Lái xe</th>
                                <th colspan="3" class="wd-lg-40p">Lấy hàng</th>
                                <th colspan="3" class="wd-lg-40p">Giao hàng</th>
                            </tr>
                            <tr>
                                <th class="minwidth100">Đã gán</th>
                                <th class="minwidth100">Đang lấy</th>
                                <th class="minwidth100">Đã lấy</th>
                                <th class="minwidth100">Đã gán</th>
                                <th class="minwidth100">Đang giao</th>
                                <th class="minwidth100">Đã giao</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="driver in items" :key="driver.UserId">
                                <td>{{ driver.UserId }}</td>
                                <td>
                                    <p @click="showDetail(driver)" class="tx-16 p-0 m-0 tx-bold tx-danger"
                                        style="cursor: pointer;">
                                        {{ driver.UserName }}
                                    </p>
                                    <p class="tx-13 p-0 m-0">{{ driver.FullName }} || {{ driver.PhoneNumber }}</p>
                                </td>
                                <td class="tx-16 tx-bold">{{ driver.AssignedPickup }}</td>
                                <td class="tx-16 tx-bold">{{ driver.PickingUp }}</td>
                                <td class="tx-16 tx-bold">{{ driver.PickedUp }}</td>
                                <td class="tx-16 tx-bold">{{ driver.AssignedDelivery }}</td>
                                <td class="tx-16 tx-bold">{{ driver.Delivering }}</td>
                                <td class="tx-16 tx-bold">{{ driver.Delivered }}</td>
                            </tr>
                        </tbody>
                    </table>

                </div>
                <pager v-if="!loading && items.length > 0" ref="ctrlPager" @PageSizeChanged="PageSizeChanged"
                    @PageIndexChanged="PageIndexChanged" :Total="totalRecords" :TotalCurrent="items.length"></pager>
            </div>
        </div>


        <LadaDrawer :visible="isShowDetail" :width="'80%'">
            <template #header>
                <div class="offcanvas-header bd">
                    <h5 v-if="selectedDriver != null">
                        Chi tiết triển khai của {{ selectedDriver.FullName }} ({{ selectedDriver.UserName }} - {{
                            selectedDriver.PhoneNumber }})
                    </h5>
                    <button @click="hideDetail" type="button" class="btn-close text-reset" title="Đóng">
                    </button>
                </div>
            </template>
            <template #body>
                <deployDetail :picId="selectedDriver != null ? selectedDriver.UserId : 0"></deployDetail>
            </template>

        </LadaDrawer>

    </div>




</template>

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

import deployService from "@/services/business/deployService";
import deployDetail from "./detail/index.vue";

const items = reactive([]);
const pageNumber = ref(1);
const pageSize = ref(10);
const totalRecords = ref(0);

const loading = ref(false);
const ctrlPager = ref();

const isShowDetail = ref(false);
const selectedDriver = ref(null);

function showDetail(driver) {
    selectedDriver.value = driver;
    isShowDetail.value = true;
}
function hideDetail() {
    isShowDetail.value = false;
}

function PageSizeChanged(newpagesize) {
    pageSize.value = newpagesize;
    pageNumber.value = 1;
    reload();
}
function PageIndexChanged(pageIndex) {
    pageNumber.value = pageIndex;
    reload();
}

const reload = async () => {
    loading.value = true;
    items.splice(0, items.length);
    var searchResult = await deployService.getDeployMonitor(pageNumber.value, pageSize.value);
    if (searchResult.Item1 != null && searchResult.Item1.length > 0) {
        searchResult.Item1.forEach(item => {
            items.push(item);
        });
    }
    totalRecords.value = searchResult.Item2;
    loading.value = false;



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

</script>

<style scoped>
.container {
    margin-top: 20px;
}

.table th,
.table td {
    vertical-align: middle;
    text-align: center;
}

.pagination {
    margin-top: 20px;
}

.table thead th.minwidth100 {
    min-width: 100px;
}

.table thead th.minwidth150 {
    min-width: 150px;
}
</style>
