<template>
    <div>

        <form @submit.prevent="search" class="row row-sm mb-3">
            <div class="col-6">
                <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="button">
                        <i v-show="!loading" class="fe fe-search"></i>
                        <span v-show="loading" class="spinner-border spinner-border-sm"></span>
                    </button>
                </div>
            </div>
            <div class="col-6 ">
                <button @click="fnCreateOrUpdate(0)" type="button"
                    class="float-end btn btn-primary mx-2 button-icon mb-1 ms-auto">
                    <i class="fe fe-plus me-2"></i>
                    Thêm
                </button>
            </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="d-flex">
                <label class="ckbox"><input class="mb-2" checked="" type="checkbox"><span>Do something
                        more</span></label>
                <span class="ms-auto">

                    <i class="fa fa-edit me-2"></i>
                    <i class="fa fa-trash text-danger me-2"></i>
                </span>
            </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.Address }}</i></p>
                        <p class="tx-12"><i>{{ item.Note }}</i></p>
                    </div>

                    <div class="col-md-auto mt-2 mb-2">
                        <i class="fa fa-edit me-2" @click="fnCreateOrUpdate(item.Id)"></i>
                        <i class="fa fa-trash text-danger me-2" @click="fnDelete(item.Id)"></i>
                    </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><!-- COL END -->
        </div>

        <LadaDialog :visible="modalControl.CreateOrUpdate">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title" v-if="selectedId <= 0">Thêm địa chỉ</h5>
                    <h5 class="modal-title" v-if="selectedId > 0">Cập nhật địa chỉ</h5>
                    <button @click="closeModal" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>
            <template #body>
                <CreateOrUpdateAddress @cancel="closeModal" :id="selectedId" :addType="props.addType"
                    :customerId="props.customerId"></CreateOrUpdateAddress>
            </template>

        </LadaDialog>


    </div>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import customerAddressService from "@/services/customerAddressService.js";

import CreateOrUpdateAddress from "./createorupdateAddress.vue";

import { useToast } from "vue-toastification";
const toast = useToast();



//#region props
const props = defineProps({
    addType: {
        type: String,
        default: ''
    },
    customerId: {
        type: String,
        default: ''
    },
});
//#endregion

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

const modalControl = reactive({
    CreateOrUpdate: false
});
function closeModal() {
    console.log('vao day');
    modalControl.CreateOrUpdate = false;
    search();
}

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 fnCreateOrUpdate(id) {
    selectedId.value = id;
    modalControl.CreateOrUpdate = true;
}

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

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



const init = (initModel) => {

};


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();
}


//#endregion

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

//#endregion


defineExpose({
    init
})


</script>