<template>
    <div class="row">
        <div class="col-log-12">
            <div class="table-responsive" v-if="orderItem != undefined">
                <table class="table table-bordered text-nowrap">
                    <tbody>
                        <tr>
                            <td><span>Id: </span></td>
                            <td><span>{{ orderItem.Id }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Mã đơn hàng: </span></td>
                            <td><span>{{ orderItem.Code }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>Mã đối tác: </span></td>
                            <td><span>{{ orderItem.PartnerCode
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Sản phẩm: </span></td>
                            <td><span>{{ orderItem.ProductName
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Đính kèm: </span></td>
                            <td><span>{{ orderItem.ProductBonus
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Tổng số lượng kiện: </span>
                            </td>
                            <td><span>{{ orderItem.NumberOfPackage
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Ghi chú: </span></td>
                            <td><span>{{ orderItem.Note }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><span>Trạng thái hiện tại: </span>
                            </td>
                            <td><span>{{ orderItem.OrderStatus
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Trạng thái vật lý: </span>
                            </td>
                            <td><span>{{ orderItem.PhysicalStatus
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Chiều đơn hàng: </span></td>
                            <td><span>{{ orderItem.OrderDirection
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Loại đơn hàng: </span></td>
                            <td><span>{{ orderItem.OrderType
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Kiểu lấy hàng: </span></td>
                            <td><span>{{ orderItem.PickupType
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Nguồn đơn hàng: </span></td>
                            <td><span>{{ orderItem.OrderSource
                            }}</span></td>
                        </tr>
                        <tr>
                            <td><span>Tuyến giao hàng: </span></td>
                            <td><span>{{ orderItem.OrderRoute
                            }}</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-log-12">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div>
                        <nav class="nav nav-style-1 nav-pills mb-3" role="tablist">
                            <a class="nav-link active" data-bs-toggle="tab" role="tab" aria-current="page"
                                aria-selected="true" href="#nav-order-dest-address">Địa chỉ giao hàng</a>
                            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#nav-order-source-address"
                                aria-current="page" aria-selected="false" tabindex="-1">Địa chỉ lấy hàng
                            </a>
                            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#nav-order-return-address"
                                aria-current="page" aria-selected="false" tabindex="-1">Địa chỉ trả về
                            </a>
                        </nav>
                        <div>
                            <div class="tab-content">
                                <div class="tab-pane text-muted active show" id="nav-order-dest-address" role="tabpanel">
                                    <a v-if="destAddress != undefined" class="text-primary float-end mb-3"
                                        @click="updateDestAddress(destAddress)">Cập nhập</a>
                                    <table v-if="destAddress != undefined" class="table table-bordered text-nowrap">
                                        <tbody>
                                            <tr>
                                                <td>Tên người liên hệ: </td>
                                                <td>{{ destAddress.Name }}</td>
                                            </tr>
                                            <tr>
                                                <td>Số điện thoại: </td>
                                                <td>{{ destAddress.PhoneNumber1 }}</td>
                                            </tr>
                                            <tr>
                                                <td>Tỉnh / Thành phố: </td>
                                                <td>{{ destCity }}</td>
                                            </tr>
                                            <tr>
                                                <td>Quận / Huyện: </td>
                                                <td>{{ destDistrict }}</td>
                                            </tr>
                                            <tr>
                                                <td>Phường / Xã: </td>
                                                <td>{{ destWard }}</td>
                                            </tr>
                                            <tr>
                                                <td>Địa chỉ chi tiết: </td>
                                                <td>{{ destAddress.Address1 }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="tab-pane text-muted" id="nav-order-source-address" role="tabpanel">
                                    <a v-if="sourceAddress != undefined" class="text-primary float-end mb-3"
                                        @click="updateSourceAddress(sourceAddress)">Cập nhập</a>
                                    <table v-if="sourceAddress != undefined" class="table table-bordered text-nowrap">
                                        <tbody>
                                            <tr>
                                                <td>Tên người liên hệ: </td>
                                                <td>{{ sourceAddress.Name }}</td>
                                            </tr>
                                            <tr>
                                                <td>Số điện thoại: </td>
                                                <td>{{ sourceAddress.PhoneNumber1 }}</td>
                                            </tr>
                                            <tr>
                                                <td>Tỉnh / Thành phố: </td>
                                                <td>{{ sourceCity }}</td>
                                            </tr>
                                            <tr>
                                                <td>Quận / Huyện: </td>
                                                <td>{{ sourceDistrict }}</td>
                                            </tr>
                                            <tr>
                                                <td>Phường / Xã: </td>
                                                <td>{{ sourceWard }}</td>
                                            </tr>
                                            <tr>
                                                <td>Địa chỉ chi tiết: </td>
                                                <td>{{ sourceAddress.Address1 }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="tab-pane text-muted" id="nav-order-return-address" role="tabpanel">
                                    <a v-if="returnAddress != undefined" class="text-primary float-end mb-3"
                                        @click="updateReturnAddress(returnAddress)">Cập nhập</a>
                                    <table v-if="returnAddress != undefined" class="table table-bordered text-nowrap">
                                        <tbody>
                                            <tr>
                                                <td>Tên người liên hệ: </td>
                                                <td>{{ returnAddress.Name }}</td>
                                            </tr>
                                            <tr>
                                                <td>Số điện thoại: </td>
                                                <td>{{ returnAddress.PhoneNumber1 }}</td>
                                            </tr>
                                            <tr>
                                                <td>Tỉnh / Thành phố: </td>
                                                <td>{{ returnCity }}</td>
                                            </tr>
                                            <tr>
                                                <td>Quận / Huyện: </td>
                                                <td>{{ returnDistrict }}</td>
                                            </tr>
                                            <tr>
                                                <td>Phường / Xã: </td>
                                                <td>{{ returnWard }}</td>
                                            </tr>
                                            <tr>
                                                <td>Địa chỉ chi tiết: </td>
                                                <td>{{ returnAddress.Address1 }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <LadaDialog :visible="modalControl.UpdateAddress">
                            <template #header>
                                <div class="modal-header">
                                    <h5 class="modal-title">Thêm địa chỉ</h5>
                                    <button @click="closeAddressModal" type="button" class="close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            </template>
                            <template #body>
                                <updateAddr @CloseModal="closeModal" @SubmitAddress="saveOrderAddress" :id="addressModel.Id"
                                    :city-id="addressModel.CityId" :district-id="addressModel.DistrictId"
                                    :ward-id="addressModel.WardId" :address1="addressModel.Address1"
                                    :address-type="addressModel.AddressType" :name="addressModel.Name"
                                    :order-id="addressModel.OrderId" :phone-number1="addressModel.PhoneNumber1"
                                    :phone-number2="addressModel.PhoneNumber2">
                                </updateAddr>
                            </template>
                        </LadaDialog>
                    </div>
                </div>
                <div class="card-body"></div>
            </div>

        </div>
    </div>
</template>
<script setup>
import _ from 'lodash';
const toast = useToast();
import { useToast } from "vue-toastification";
import { ref, reactive, onMounted, onBeforeMount, watch } from 'vue';
import orderService from "@/services/orderService"; 
import locationService from "@/services/locationService";
import updateAddr from '@/components/addresses/addressForm.vue'

const emit = defineEmits('refresh');

const props = defineProps({
    orderItem: Object,
    orderAddresses: Array
});

const modalControl = reactive({
    UpdateAddress: false
});

const sourceCity = ref();
const sourceDistrict = ref();
const sourceWard = ref();

const destCity = ref();
const destDistrict = ref();
const destWard = ref();

const returnCity = ref();
const returnDistrict = ref();
const returnWard = ref();

let sourceAddress = reactive({});

let destAddress = reactive({});

let returnAddress = reactive({});

function openModal() {
    modalControl.UpdateAddress = true;
}
function closeModal() {
    modalControl.UpdateAddress = false;
    emit('refresh', true);
    getLocation();
}

async function getLocation() {
    Object.assign(sourceAddress, props.orderAddresses.filter(x => x.AddressType == 1)[0]);
    Object.assign(destAddress, props.orderAddresses.filter(x => x.AddressType == 2)[0]);
    Object.assign(returnAddress, props.orderAddresses.filter(x => x.AddressType == 3)[0]);

    console.log(destAddress);
    if (sourceAddress && sourceAddress.WardId) {
        let srcLocate = await locationService.getById(sourceAddress.WardId);
        if (srcLocate) {
            sourceCity.value = srcLocate.CityName;
            sourceDistrict.value = srcLocate.ParentName;
            sourceWard.value = srcLocate.Name;
        }
    }
    if (destAddress && destAddress.WardId) {
        let destLocate = await locationService.getById(destAddress.WardId);
        if (destLocate) {
            destCity.value = destLocate.CityName;
            destDistrict.value = destLocate.ParentName;
            destWard.value = destLocate.Name;
        }
    }
    if (returnAddress && returnAddress.WardId) {
        let returnLocate = await locationService.getById(returnAddress.WardId);
        if (returnLocate) {
            returnCity.value = returnLocate.CityName;
            returnDistrict.value = returnLocate.ParentName;
            returnWard.value = returnLocate.Name;
        }
    }
}

let addressModel = reactive({
    Id: 0,
    Name: '',
    PhoneNumber1: '',
    PhoneNumber2: '',
    Address1: '',
    Address2: '',
    CityId: null,
    DistrictId: null,
    WardId: null,
    AddressType: null,
    OrderId: 0
});


async function updateDestAddress(value) {
    addressModel.Id = value.Id;
    addressModel.OrderId = value.OrderId;
    addressModel.Name = value.Name;
    addressModel.PhoneNumber1 = value.PhoneNumber1;
    addressModel.Address1 = value.Address1;
    addressModel.CityId = value.CityId;
    addressModel.DistrictId = value.DistrictId;
    addressModel.WardId = value.WardId;
    addressModel.AddressType = value.AddressType;
    await openModal();
}
async function updateSourceAddress(value) {
    addressModel.Id = value.Id;
    addressModel.OrderId = value.OrderId;
    addressModel.Name = value.Name;
    addressModel.PhoneNumber1 = value.PhoneNumber1;
    addressModel.Address1 = value.Address1;
    addressModel.CityId = value.CityId;
    addressModel.DistrictId = value.DistrictId;
    addressModel.WardId = value.WardId;
    addressModel.AddressType = value.AddressType;
    await openModal();
}
async function updateReturnAddress(value) {
    addressModel.Id = value.Id;
    addressModel.OrderId = value.OrderId;
    addressModel.Name = value.Name;
    addressModel.PhoneNumber1 = value.PhoneNumber1;
    addressModel.Address1 = value.Address1;
    addressModel.CityId = value.CityId;
    addressModel.DistrictId = value.DistrictId;
    addressModel.WardId = value.WardId;
    addressModel.AddressType = value.AddressType;
    await openModal();
}

async function saveOrderAddress(value) {
    if (value) {
        addressModel.Name = value.Name;
        addressModel.PhoneNumber1 = value.PhoneNumber1;
        addressModel.Address1 = value.Address1;
        addressModel.CityId = value.CityId;
        addressModel.DistrictId = value.DistrictId;
        addressModel.WardId = value.WardId;

        var result = await orderService.UpdateAddress(addressModel);
        if (result != null && result.Result === 1) {
            toast.success('Thành công!');
            closeModal();
        } else {
            toast.error('Thất bại: ' + result.Message);
        }
    } else {

    }
}

onMounted(async () => {
    await getLocation();
})

watch(() => [props.orderItem.Id, props.orderAddresses], async ([orderId, orderAddresses]) => {
    await getLocation();
}, { deep: true })
</script>