<template>
    <div class="row m-b-10 parentContainer">
        <div class="col">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row align-items-center p-b-5 b-b b-grey" :class="[{'pointer': clickable}]" v-show="!isLoading" @click="clickable ? activate() : undefined">
                <div class="col-auto p-r-0">
                    <div class="b-grey b-a fs-10 btn-rounded icon-thumbnail icon-25 m-r-0" :class="[{'bg-primary': active}, {'bg-transparent': !active}]" v-if="clickable">
                        <i class="fa fa-check text-white fs-12 fa-fw"></i>
                    </div>
                    <div style="width: 25px;" v-else></div>
                </div>
                <div class="col">
                    <div class="row m-b-10">
                        <div class="col-auto">
                            <div class="font-heading fs-10 muted all-caps">Date</div>
                            <div class="font-heading fs-10">
                                {{item.created_at}}
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="font-heading fs-10 muted all-caps">Reference</div>
                            <div class="font-heading fs-10">
                                <a :href="route('booking.details', item.booking.marking)">{{item.booking.marking}}</a>
                            </div>
                        </div>
                        <div class="col text-right">
                            <div class="font-heading fs-10 muted all-caps">Amount</div>
                            <div class="font-heading fs-14 text-success bold">
                                {{item.currency.short_code}} {{((Math.round(( item.amount + Number.EPSILON) * 100) / 100)).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useUiStore } from '@/stores/ui';
import { useComponentHandler } from '@/composables/useComponentHandler';
import route from '@/general/functions/router';

const props = defineProps<{
    data: any;
    section: string;
    is1688Supplier: boolean;
    payments: any[];
    paymentTotal: number;
    inputPaymentTotal: number;
    refundTotal: number;
    supplierRefunds: any[];
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: any): void;
}>();

const uiStore = useUiStore();
const { item } = useComponentHandler(props);
const isLoading = computed(() => uiStore.isLoading(props.section));

const active = ref(false);

const clickable = computed(() => {
    if (props.is1688Supplier) {
        return props.refundTotal < props.inputPaymentTotal || props.supplierRefunds.some((i) => item.value.id === i.id);
    } else {
        return props.refundTotal < props.paymentTotal || props.supplierRefunds.some((i) => item.value.id === i.id);
    }
});

const activate = () => {
    active.value = !active.value;
    emit('update:modelValue', item.value);
};

onMounted(() => {
    active.value = props.supplierRefunds.some(supplierRefund => supplierRefund.id === item.value.id);
});
</script>
