<template>
    <div class="row align-items-center m-b-10 parentContainer">
        <div class="row w-100 m-0 p-0">
            <div class="col-auto hide" @click="showPurchaseDetails(item.id)">
                <div class="hint-text">
                    <i class="fa fa-plus fs-8 muted hint-text"></i>
                </div>
            </div>
            <div class="col-auto pt-1 pb-0 pr-1">
                <div class="font-heading fs-12" style="line-height: 0px;">
                    <input type="checkbox" :data-id="item.id" @change="selectedBookings">
                </div>
            </div>
            <div class="col-auto" :style="minWidth">
                <div class="font-heading all-caps fs-11">{{item.created_at}}</div>
            </div>
            <div class="col-auto" :style="minWidth">
                <div class="font-heading all-caps fs-11 bold">{{item.marking}}</div>
            </div>
            <div class="col-auto" :style="minWidth">
                <div class="font-heading fs-11 bold">
                    <span class="flag-icon fs-11" :class="'flag-icon-'+item.convertible_currency.country.short_code.toLowerCase()"></span> {{item.convertible_currency.short_code}}
                </div>
            </div>
            <div class="col-auto" :style="minWidth">
                <div class="font-heading fs-11">{{item.service.name}}</div>
            </div>
            <div class="col-auto" :style="minWidth150">
                <div class="font-heading fs-11 text-success bold" v-if="item.purchase_order!==null">{{formatAmount(item.purchase_order.amount)}} {{item.purchase_order.original_currency.short_code}}</div>
            </div>
            <div class="col-auto" :style="minWidth150">
                <div class="font-heading fs-11 text-success bold">{{formatAmount(item.amount)}} {{item.fixed_currency.short_code}}</div>
            </div>
        </div>

        <template v-if="item.purchase_order !== null">
            <div class="row text-left no-margin bg-white hide" v-for="po in item.purchase_order.details" :key="po.id">
                <div class="col">
                    <div class="font-heading fs-11 text-success bold">{{po.description}}</div>
                </div>
                <div class="col">
                    <div class="font-heading fs-11 text-success bold">{{po.quantity}}</div>
                </div>
                <div class="col">
                    <div class="font-heading fs-11 text-success bold">{{po.unit_price}}</div>
                </div>
                <div class="col">
                    <div class="font-heading fs-11 text-success bold">{{po.total}}</div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { useComponentHandler } from '@/composables/useComponentHandler';

const { proxy } = getCurrentInstance() as any;

const props = defineProps<{
    data: any;
}>();

const { item } = useComponentHandler<any>(props);

const minWidth = { minWidth: '100px' };
const minWidth150 = { minWidth: '150px' };
const selected_id = ref(0);

const selectedBookings = (e: any) => {
    proxy.emitter.emit('selectedBookings', { target: e.target, item: item.value });
};

const showPurchaseDetails = (id: number) => {
    selected_id.value = id;
};

const formatAmount = (amount: number) => {
    if (amount === undefined || amount === null) return '0.00';
    return (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2);
};
</script>
