<template>
    <div>
        <div class="mb-3">
            <button v-if="!showAddForm" type="button" class="btn btn-outline-primary" @click="showAddForm = true">
                <i class="fa fa-plus"></i> Tạo địa chỉ mới
            </button>
            <button v-else type="button" class="btn btn-secondary" @click="onAddCancel">
                <i class="fa fa-arrow-left"></i> Quay lại
            </button>
        </div>
        <AddressAdd v-if="showAddForm" :addType="props.addType" :customerId="props.customerId" :editData="editAddress"
            @submit="onAddSubmit" @cancel="onAddCancel" />
        <template v-else>
            <form @submit.prevent="search" class="row row-sm mb-3 align-items-center">
                <div class="col">
                    <div class="input-group">
                        <input v-model="searchModel.Search.PredicateObject.Keyword" class="form-control"
                            placeholder="từ khóa" type="text">
                        <button class="btn btn-primary br-ts-0 br-bs-0" type="submit">
                            <i v-show="!loading" class="fe fe-search"></i>
                            <span v-show="loading" class="spinner-border spinner-border-sm"></span>
                        </button>
                    </div>
                </div>
            </form>
            <loader v-if="loading"></loader>
            <div class="row row-sm" v-if="!loading && items.length <= 0">
                <div class="col">
                    <empty></empty>
                </div>
            </div>
            <div class="row row-sm" v-if="!loading && items.length > 0">
                <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>Địa chỉ</b>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 grid-margin">
                    <div class="row bd-b p-3 pd-t-1" v-for="item in items">
                        <div class="col">
                            <h6 class="tx-16">
                                {{ item.ContactName }} - {{ item.ContactPhoneNumber }}
                            </h6>
                            <p class="tx-12"><i>{{ item.FullAddress }}</i></p>
                            <p class="tx-12"><i>{{ item.Note }}</i></p>
                        </div>
                        <div class="col-md-auto mt-2 mb-2 d-flex flex-column gap-2 align-items-end">
                            <div class="btn-group">
                                <button @click="Choose(item.Id)" type="button"
                                    class="btn btn-sm btn-outline-primary button-icon">
                                    <i class="fe fe-check me-2"></i>Chọn
                                </button>
                                <button type="button"
                                    class="btn btn-sm btn-outline-primary dropdown-toggle dropdown-toggle-split"
                                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="visually-hidden">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <button class="dropdown-item" @click="onEdit(item)">
                                        <i class="fa fa-edit me-2"></i>Cập nhật
                                    </button>
                                    <button class="dropdown-item text-danger" @click="onDelete(item)">
                                        <i class="fa fa-trash me-2"></i>Xóa
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <pager ref="ctrlPager" v-show="!loading && items.length > 0" @PageSizeChanged="PageSizeChanged"
                            @PageIndexChanged="PageIndexChanged" :Total="searchModel.Pagination.Total"
                            :TotalCurrent="items.length">
                        </pager>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import customerAddressService from "@/services/customerAddressService.js";
import AddressAdd from "./address-add.vue";

const emit = defineEmits(['selected'])

//#region props
const props = defineProps({
    addType: Number,
    customerId: Number,
});
//#endregion

//#region DATA
const items = reactive([]);
const loading = ref(false);
const ctrlPager = ref();
const selectedId = ref(0);
const showAddForm = ref(false);
const editAddress = ref(null);


const searchModel = reactive({
    Pagination: {
        Total: 0,
        PageIndex: 1,
        PageSize: 25
    },
    Sort: {
        Predicate: '',
        Reverse: true
    },
    Search: {
        PredicateObject: {
            Keyword: '',
            AddressType: props.addType,
            CustomerId: props.customerId
        }
    }
});

//#endregion


//#region Methods

async function Choose(addId) {
    emit('selected', addId);
}

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

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

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

async function onEdit(address) {
    // Lấy chi tiết địa chỉ từ API
    const detail = await customerAddressService.getById(address.Id);
    editAddress.value = detail;
    showAddForm.value = true;
}
function onAddSubmit(address) {
    showAddForm.value = false;
    editAddress.value = null;
    search();
}
function onAddCancel() {
    showAddForm.value = false;
    editAddress.value = null;
}

async function onDelete(address) {
    if (confirm('Bạn có chắc chắn muốn xóa địa chỉ này?')) {
        await customerAddressService.delete(address.Id);
        search();
    }
}

//#endregion

//#region Events
onMounted(() => {
    console.log('vao search');
    search();
})

//#endregion


</script>