
<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Quản lý tuyến</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">Quản lý tuyến</li>
                </ol>
            </div>
        </div>
        <div class="row row-sm">
            <div class="col-lg-3 col-md-4">
                <SideBar></SideBar>
            </div>
            <div class="col-lg-9 col-md-8">
                <div class="card card-search shadow-none">
                    <form class="card-body pd-b-0" @submit.prevent="search">
                        <div class="row">


                            <div class="col-lg-4 col-md-6 mb-3">
                                <label>Từ khóa</label>
                                <input type="text" v-model="searchModel.Search.PredicateObject.Keyword" class="form-control"
                                    placeholder="từ khóa...">
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-lg mb-3">
                                <button type="submit" class="btn btn-dark" :disabled="loading">
                                    <i v-show="!loading" class="fe fe-search"></i>
                                    <span v-show="loading" class="spinner-border spinner-border-sm"></span>
                                    <span>Tìm kiếm</span>
                                </button>

                            </div>
                        </div>


                    </form>
                </div>
                <div class="card card-table shadow-none">
                    <div class="card-body card-table-body">
                        <div class="d-flex flex-row justify-content-between mg-b-10 mg-l-10">
                            <button :disabled="loading" @click="fnCreateOrUpdate(0)" type="button"
                                class="btn btn-outline-primary mx-2 button-icon mb-1">
                                <i v-show="!loading" class="fe fe-plus me-2"></i>

                                <span v-show="loading" class="spinner-border spinner-border-sm"></span>



                                <span>Tạo tuyến</span>
                            </button>

                        </div>
                        <div class="table-responsive border-top mg-b-10">
                            <table class="table table-vcenter mb-0" style="min-height:300px">
                                <thead>
                                    <tr>
                                        <th class="wd-lg-5p"><span>ID</span></th>
                                        <th class="wd-lg-10p min-width-1"><span>Tên tuyến</span></th>

                                        <th class="wd-lg-10p min-width-1"><span>Mô tả</span></th>

                                        <th class="wd-lg-10p min-width-1"><span>Khoảng cách </span></th>
                                        <th class="wd-lg-10p min-width-1"><span>Ngày tạo </span></th>
                                        <th class="wd-lg-10p min-width-1"><span>Thứ tự</span></th>
                                        <th class="wd-lg-10p"></th>
                                    </tr>
                                </thead>
                                <tbody v-if="loading">
                                    <tr>
                                        <td colspan="7" class="text-center">
                                            <Loader></Loader>
                                        </td>
                                    </tr>
                                </tbody>
                                <tbody v-if="!loading && items.length <= 0">
                                    <tr>
                                        <td colspan="7" class="tx-semibold text-center text-danger">
                                            Không tìm thấy bản ghi nào!

                                            {{ items.length }}
                                        </td>
                                    </tr>
                                </tbody>
                                <tbody v-if="!loading && items.length > 0">

                                    <tr v-for="item in items" :key="item.Id">

                                        <td class="text-wrap align-top">
                                            {{ item.Id }}
                                        </td>
                                        <td class="text-wrap align-top">
                                            <span>{{ item.Name }}</span>
                                        </td>

                                        <td class="text-wrap align-top">
                                            <span>{{ item.Description }}</span>
                                        </td>

                                        <td class="text-wrap align-top">
                                            {{ item.DistanceMin / 1000 }}km - {{ item.DistanceMax / 1000 }}km
                                        </td>
                                        <td class="text-wrap align-top">
                                            <span>{{ item.CreatedTime }}</span>
                                        </td>
                                        <td class="text-wrap align-top">
                                            <span>{{ item.DisplayOrder }}</span>
                                        </td>
                                        <td class="align-top pt-2">

                                            <button type="button" data-bs-toggle="dropdown"
                                                class="mb-1 mt-1 mr-1 btn btn-light dropdown-toggle btn-sm"
                                                aria-expanded="false"><i class="fas fa-cog"></i> Quản lý
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-arrow">
                                                <a @click="fnCreateOrUpdate(item.Id)" class="dropdown-item"
                                                    href="javascript:void(0);"><i class="fe fe-edit-2"></i>
                                                    <span class="mg-l-6">Cập nhật</span>
                                                </a>

                                                <a @click="deleteRoute(item.Id)" class="dropdown-item"
                                                    href="javascript:void(0);">
                                                    <i class="fe fe-trash"></i>
                                                    <span class="mg-l-6">Xóa</span></a>

                                            </div>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </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>

        <LadaDialog :visible="modalControl.CreateOrUpdate">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title" v-if="selectedId <= 0">Tạo tuyến</h5>
                    <h5 class="modal-title" v-if="selectedId > 0">Cập nhật tuyến</h5>
                    <button @click="closeModal" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>
            <template #body>
                <CreateOrUpdate @cancel="closeModal" :id="selectedId"></CreateOrUpdate>
            </template>

        </LadaDialog>

    </div>
</template>
<script setup>

import SideBar from './sidebar.vue';
import { ref, reactive, onMounted, watch } from 'vue';
import routeService from "@/services/routeService";

//#region Components
import { useToast } from "vue-toastification";
const toast = useToast();


import CreateOrUpdate from './components/createOrUpdateRoute.vue';

//#endregion

//#region Modals
const modalControl = reactive({
    CreateOrUpdate: false
});
function closeModal() {
    modalControl.CreateOrUpdate = false;
    loadData();
}
//#endregion



//#region Actions

//#region SEARCH

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

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


const ctrlPager = ref();
async function search() {
    searchModel.Pagination.PageIndex = 1;
    ctrlPager.value.Refresh();
    loadData();
}


// functions that mutate state and trigger updates
async function loadData() {
    loading.value = true;
    items.splice(0, items.length);
    var searchResult = await routeService.search(searchModel);
    if (searchResult.Items != null && searchResult.Items.length > 0) {
        searchResult.Items.forEach(menu => {
            items.push(menu);
        });
    }
    searchModel.Pagination.Total = searchResult.TotalRecord;
    loading.value = false;
}


function PageSizeChanged(pagesize) {
    searchModel.Pagination.PageSize = pagesize;
    searchModel.Pagination.PageIndex = 1;
    loadData();
}
function PageIndexChanged(pageIndex) {
    searchModel.Pagination.PageIndex = pageIndex;
    loadData();
}

//#endregion


const selectedId = ref(0);
async function fnCreateOrUpdate(id) {
    selectedId.value = id;
    modalControl.CreateOrUpdate = true;
}

async function deleteRoute(id) {
    var cf = confirm("Bạn chắc chắn muốn xóa?");
    if (cf) {
        loading.value = true;
        var result = await routeService.delete(id);

        if (result != null && result.Result === 1) {
            toast.success('Thành công!');
        } else {
            toast.error('Thất bại: ' + result.Message);
        }
        loading.value = false;
        search();
    }
}


//#endregion


onMounted(async () => {

    await search();
})


</script>
