<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Quản lý CallPath</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ý CallPath</li>
                </ol>
            </div>
        </div>
        <div class="row row-sm">
            <div class="col-12 grid-margin">
                <div class="card card-search shadow-none mb-5">
                    <form class="card-body" @submit.prevent="search">
                        <div class="row">
                            <div class="col-lg-4 col-md-4 mb-3">
                                <label>Từ khóa</label>
                                <input type="text" v-model="searchModel.Search.PredicateObject.Keyword"
                                    class="form-control" placeholder="Tìm theo tên, path...">
                            </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 class="d-flex flex-row justify-content-between mg-b-10">
                        <button @click="createItem" type="button" class="btn btn-outline-primary mx-2 button-icon mb-1">
                            <i class="fe fe-plus me-2"></i>Thêm CallPath
                        </button>
                    </div>
                    <div class="card-body bd p-0">
                        <div class="table-responsive border-top mg-b-10">
                            <table class="table table-vcenter mb-0" style="min-height:300px">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>Tên</th>
                                        <th>Path</th>
                                        <th>Mô tả</th>
                                        <th style="width: 120px">Thao tác</th>
                                    </tr>
                                </thead>
                                <tbody v-if="loading">
                                    <tr>
                                        <td colspan="5" class="text-center"><span
                                                class="spinner-border spinner-border-sm"></span></td>
                                    </tr>
                                </tbody>
                                <tbody v-if="!loading && items.length === 0">
                                    <tr>
                                        <td colspan="5" class="text-center text-danger">Không có dữ liệu</td>
                                    </tr>
                                </tbody>
                                <tbody v-if="!loading && items.length > 0">
                                    <tr v-for="item in items" :key="item.Id">
                                        <td>{{ item.Id }}</td>
                                        <td>{{ item.Name }}</td>
                                        <td>{{ item.Path }}</td>
                                        <td>{{ item.Description }}</td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-outline-primary me-1"
                                                @click="editItem(item)"><i class="fe fe-edit-2"></i></button>
                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                @click="removeItem(item)"><i class="fe fe-trash"></i></button>
                                        </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" />
                    </div>
                </div>
            </div>
        </div>
        <ladaDialog :visible="modalControl.Edit" @close="closeModal">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title">{{ selectedId > 0 ? 'Cập nhật' : 'Thêm mới' }} CallPath</h5>
                    <button @click="closeModal" type="button" class="close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
            </template>
            <template #body>
                <CreateOrUpdate :id="selectedId" @success="onSuccess" @cancel="closeModal" />
            </template>
        </ladaDialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import callPathService from '@/services/callPathService';
import ladaDialog from '@/components/dialogs/ladaDialog.vue';
import CreateOrUpdate from './components/CreateOrUpdate.vue';
import Pager from '@/components/pagination/pager.vue';
import { useToast } from 'vue-toastification';
const toast = useToast();

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();
const modalControl = reactive({ Edit: false });
const selectedId = ref(0);

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

async function loadData() {
    loading.value = true;
    items.splice(0, items.length);
    try {
        const res = await callPathService.search(searchModel);
        if (res.Items && res.Items.length > 0) {
            res.Items.forEach(item => items.push(item));
        }
        searchModel.Pagination.Total = res.TotalRecord || 0;
    } catch (e) {
        toast.error('Lỗi tải dữ liệu');
    } finally {
        loading.value = false;
    }
}

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

function createItem() {
    selectedId.value = 0;
    modalControl.Edit = true;
}

function editItem(item) {
    selectedId.value = item.Id;
    modalControl.Edit = true;
}

async function removeItem(item) {
    if (!confirm('Bạn có chắc muốn xóa?')) return;
    loading.value = true;
    try {
        await callPathService.delete(item.Id);
        toast.success('Xóa thành công');
        await loadData();
    } catch (e) {
        toast.error('Xóa thất bại');
    } finally {
        loading.value = false;
    }
}

function closeModal() {
    modalControl.Edit = false;
}

function onSuccess() {
    closeModal();
    loadData();
}

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