<template>
    <div class="row mg-t-30 bd-t pd-t-10">
        <div class="col-lg-12">
            <div class="d-flex flex-row justify-content-between">
                <div class="d-flex flex-row">
                    <div class="section-icon me-2 mt-1">
                        <i class="fas fa-cubes"></i>
                    </div>
                    <b class="tx-18 font-weight-semibold d-flex mb-0 mg-t-15">Thông tin hàng hóa</b>
                </div>
                <button class="btn btn-primary" @click="showAddPackageDialog()">Thêm hàng hóa</button>
            </div>

            <LadaDialog :visible="showDialog">
                <template #header>
                    <div class="modal-header">
                        <h5 class="modal-title">{{ dialogTitle }}</h5>
                        <button @click="closeDialog" type="button" class="close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </template>
                <template #body>
                    <PackageAdd @submit="addPackage" ref="packageAddRef"></PackageAdd>
                </template>
            </LadaDialog>
            <div class="table-responsive border">
                <table class="table mg-b-0 text-md-nowrap">
                    <thead>
                        <tr>
                            <th class="wd-10p">Ảnh</th>
                            <th class="wd-30p">Hàng hóa</th>
                            <th class="wd-20p">Trọng lượng đơn vị</th>
                            <th class="wd-10p">Số kiện</th>
                            <th class="wd-20p">Trọng lượng tính cước</th>
                            <th class="wd-10p"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in items">
                            <th scope="row">
                                <img :src="item.Picture">
                            </th>
                            <td>
                                <p>{{ item.Name }}</p>
                                <i>{{ item.Note }}</i>
                            </td>
                            <td>
                                <div class="d-flex">
                                    <i class="fas fa-weight mg-r-5 mg-t-2"></i>
                                    <span>{{ item.Weight }}</span>
                                    <span>(kg)</span>
                                </div>
                                <div class="d-flex mg-t-10">
                                    <i class="fas fa-text-height mg-r-5 mg-t-2"></i>
                                    <span>{{ item.Length }} x {{ item.Width }} x {{ item.Height }} / 6000 = {{
                                        item.WeightBySize }} (kg)</span>
                                    <!-- <span>(dài x rộng x cao) (cm)</span> -->
                                </div>
                            </td>
                            <td>{{ item.Quantity }}</td>
                            <td>{{ item.ChargeWeight }}</td>
                            <td>
                                <div class="d-flex">
                                    <a class="btn btn-sm tx-14" href="javascript:void(0)" @click="editPackage(item)">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    <a class="btn btn-sm tx-14" href="javascript:void(0)" @click="removePackage(item.Id)">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr v-if="items.length > 0">
                            <td :colspan="colspan - 3" class="text-end">
                                TỔNG
                            </td>
                            <td>
                                {{ totalPackages }} kiện
                            </td>
                            <td colspan="2">
                                {{ totalWeight }} kg
                            </td>
                        </tr>
                        <tr v-if="items.length <= 0">
                            <td :colspan="colspan">
                                <Empty message="Hiện chưa có bản ghi nào" :border="false"></Empty>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, watch, computed } from 'vue';
import PackageAdd from "./package-add.vue";
import { Empty } from '@/components';

const emit = defineEmits(['checkFee']);

//#region DATA
var items = reactive([]);
var totalWeight = ref(0);
var totalPackages = ref(0);
const colspan = 6;

const showDialog = ref(false);
const editingPackage = ref(null);
const packageAddRef = ref(null);
const dialogTitle = computed(() => editingPackage.value ? 'Cập nhật hàng hóa' : 'Thêm hàng hóa');
//#endregion

//#region Methods
const showAddPackageDialog = () => {
    editingPackage.value = null;
    showDialog.value = true;
    setTimeout(() => {
        if (packageAddRef.value) {
            packageAddRef.value.reset();
        }
    }, 100);
};

const closeDialog = () => {
    showDialog.value = false;
};

async function addPackage(packageModel) {

    if (packageModel.Id <= 0) {
        var newpackage = {};
        Object.assign(newpackage, packageModel);
        var id = items.length + 1;
        newpackage.Id = id;
        items.push(newpackage);
    } else {
        let existPackage = items.find(item => item.Id === packageModel.Id);
        if (existPackage) {
            Object.assign(existPackage, packageModel);
        }
    }
    //Cập nhật trọng lượng kích thước và trọng lượng tính cước
    updateWeight();
    closeDialog();
}

async function removePackage(id) {
    let index = items.findIndex(item => item.Id === id);
    if (index > -1) {
        items.splice(index, 1);
    }
    updateWeight();

}
async function editPackage(item) {
    editingPackage.value = item;
    showDialog.value = true;
    setTimeout(() => {
        if (packageAddRef.value) {
            packageAddRef.value.init(item);
        }
    }, 100);
}
async function updateWeight() {
    totalWeight.value = 0;
    totalPackages.value = 0;
    if (items != null && items.length > 0) {
        items.forEach(item => {
            var weightBySize = 0;
            var chargeWeight = 0;
            if (item.Width > 0 && item.Length > 0 && item.Height > 0) {
                weightBySize = (item.Width * item.Length * item.Height / 6000).toFixed(0);
            }
            var subTotalWeight = item.Weight * item.Quantity;
            var subTotalWeightBySize = weightBySize * item.Quantity;
            chargeWeight = subTotalWeight > subTotalWeightBySize ? subTotalWeight : subTotalWeightBySize;
            item.ChargeWeight = chargeWeight;
            item.WeightBySize = weightBySize;
            totalWeight.value += parseFloat(item.ChargeWeight);
            totalPackages.value += parseFloat(item.Quantity);
        });
    }

}

//#endregion


//Mỗi lần thay đổi phường xã thì gọi sự kiện check fee
watch(totalWeight, async () => {
    emit('checkFee');
})




//#region Expose
const getFeeModel = () => {
    return {
        Packages: items,
        Weight: totalWeight.value
    };
};
const getModel = () => {
    return items;
};
//#endregion




defineExpose({
    getModel,
    getFeeModel
})



</script>
<style scoped>
.section-icon {
    display: flex;
    text-align: center;
}

.section-icon i {
    width: 3rem;
    font-size: 18px;
    line-height: 3rem;
    height: 3rem;
    background-color: #ffcb05;
    color: #ffffff;
    border-radius: 50%;
}
</style>