<template>
    <div class="row pd-t-10">
        <div class="col-lg-12">
            <div class="flex-fill d-flex flex-row justify-content-between">
                <h6 class="mt-1">Thông tin hàng hóa</h6>
                <a type="button" @click="edit" href="javascript:void(0);" class="btn btn-sm button-icon mb-1"
                    v-if="editable">
                    <i class="far fa-edit"></i>
                    Sửa
                </a>
            </div>
            <div class="table-responsive bd-t">
                <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>

                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in packageModel">
                            <th scope="row">

                                <viewer v-if="item.Picture != null && item.Picture.length > 0">
                                    <img :src="item.Picture" style="cursor: pointer;">
                                </viewer>
                            </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.SubTotalWeight }}</td>

                        </tr>
                        <tr v-if="packageModel.length > 0">
                            <td :colspan="colspan - 2" class="text-end">
                                TỔNG
                            </td>
                            <td>
                                {{ totalPackages }} kiện
                            </td>
                            <td colspan="2">
                                {{ totalWeight }} kg
                            </td>
                        </tr>
                        <tr v-if="packageModel.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>
        <LadaDialog :visible="showEditDialog" variant="modal-full">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title">Cập nhật hàng hóa</h5>
                    <button @click="close" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>

            <template #body>
                <update-package :orderId="orderId" @cancel="close"></update-package>
            </template>

        </LadaDialog>
    </div>
</template>

<script setup>
import { ref, computed, reactive, watch, onMounted } from 'vue';
import { Empty } from '@/components';
import UpdatePackage from "@/views/orders/shared/updatePackage.vue";


const props = defineProps({
    packageModel: Object,
    orderId: Number,
    editable: Boolean
});

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

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


const totalPackages = computed(() => {
    var rs = 0;
    if (props.packageModel != null && props.packageModel.length > 0) {
        props.packageModel.forEach(packageItem => {
            rs += packageItem.Quantity;
        });
    }
    return rs;
})
const totalWeight = computed(() => {
    var rs = 0;
    if (props.packageModel != null && props.packageModel.length > 0) {
        props.packageModel.forEach(packageItem => {
            rs += packageItem.SubTotalWeight;
        });
    }
    return rs;
})



//#region Dialog
const showEditDialog = ref(false);

//#endregion


//#region methods
function edit() {
    showEditDialog.value = true;
}
function close() {
    showEditDialog.value = false;
    emit('reload');
    console.log()
}
//#endregion


//#region Events
onMounted(async () => {
    console.log(props.packageModel);
    if (props.packageModel != null && props.packageModel.length > 0) {
        props.packageModel.forEach(item => {
            var weightBySize = 0;

            if (item.Width > 0 && item.Length > 0 && item.Height > 0) {
                weightBySize = (item.Width * item.Length * item.Height / 6000).toFixed(1);
                console.log(weightBySize);
            }
            item.WeightBySize = weightBySize;
        });
    }
})
//#endregion

</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>