<template>
    <div>
        <div class="flex-fill d-flex flex-row justify-content-between">
            <h6 class="mt-1">Thông tin cước và tiền thu hộ</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="d-flex p-2 border-top" v-if="finModel.CollectAmount > 0">
            <div class="field-label">Thu hộ</div>
            <div class="field-value ms-auto tx-14">
                {{ vueNumberFormat(finModel.CollectAmount,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' }) }}
            </div>
        </div>
        <div class="d-flex p-2 border-top" v-if="finModel.CodFee > 0">
            <div class="field-label">Phí thu hộ</div>
            <div class="field-value ms-auto tx-14">
                {{ vueNumberFormat(finModel.CodFee,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' }) }}
            </div>
        </div>
        <div class="d-flex p-2 border-top">
            <div class="field-label">Cước vận chuyển</div>
            <div class="field-value ms-auto tx-14">
                {{ vueNumberFormat(finModel.Fee,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' }) }}
            </div>
        </div>
        <div class="d-flex p-2 border-top" v-if="finModel.PickupSubFee > 0">
            <div class="field-label">Phụ phí lấy hàng</div>
            <div class="field-value ms-auto tx-14">
                {{ vueNumberFormat(finModel.PickupSubFee,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' }) }}
            </div>
        </div>
        <div class="d-flex p-2 border-top" v-if="finModel.DeliverySubFee > 0">
            <div class="field-label">Phụ phí giao hàng</div>
            <div class="field-value ms-auto tx-14">
                {{ vueNumberFormat(finModel.DeliverySubFee,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' }) }}
            </div>
        </div>
        <div class="d-flex p-2 border-top" v-if="finModel.InsuranceFee > 0">
            <div class="field-label">Phí khai giá</div>
            <div class="field-value ms-auto tx-14">
                {{ vueNumberFormat(finModel.InsuranceFee,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' }) }}
            </div>
        </div>
        <div class="d-flex p-2 border-top" v-if="finModel.Discount > 0">
            <div class="field-label">Giảm giá</div>
            <div class="field-value ms-auto tx-14">
                {{ vueNumberFormat(finModel.Discount,
                    { precision: 0, prefix: '-', suffix: 'đ', decimal: ',', thousand: '.' }) }}
            </div>

        </div>
        <div class="d-flex p-2 border-top" v-if="finModel.TotalFee > 0">
            <div class="field-label">Tổng phí</div>
            <div class="field-value ms-auto tx-18">
                {{ vueNumberFormat(finModel.TotalFee,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' })
                }}
            </div>

        </div>
        <div class="d-flex p-2 border-top">
            <div class="field-label">Phương thức TT</div>
            <div class="field-value ms-auto">
                {{ finModel.PayFeeTypeStr }}
            </div>

        </div>
        <div class="d-flex p-2 border-top" v-if="finModel.SourceFee > 0">
            <div class="field-label">Thu người gửi</div>
            <div class="field-value ms-auto">
                {{ vueNumberFormat(finModel.SourceFee,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' })
                }}
            </div>

        </div>
        <div class="d-flex p-2 border-top" v-if="finModel.DestFee > 0 || finModel.CollectAmount > 0">
            <div class="field-label">Thu người nhận</div>
            <div class="field-value ms-auto">
                {{ vueNumberFormat(finModel.DestFee + finModel.CollectAmount,
                    { precision: 0, prefix: '', suffix: 'đ', decimal: ',', thousand: '.' })
                }}
            </div>

        </div>
        <LadaDialog :visible="showEditDialog">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title">Cập nhật cước / tiền thu hộ</h5>
                    <button @click="close" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>

            <template #body>
                <update-fin :orderFinId="finModel.Id" :customerId="customerId" @cancel="close"></update-fin>
            </template>

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

<script setup>
import { ref } from 'vue';
import UpdateFin from "@/views/orders/shared/updateFin.vue";

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

const props = defineProps({
    finModel: Object,
    customerId: Number,
    editable: Boolean
});

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

//#endregion


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

</script>

<style scoped>
.field-label {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
}

.field-value {

    font-weight: 500;
    color: #000;
}
</style>