<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'src/filters';
import CardDescriptor from 'components/ui/CardDescriptor.vue';

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
});

const route = useRoute();
const { t } = useI18n();

const entityId = computed(() => {
    return $props.id || route.params.id;
});
</script>

<template>
    <card-descriptor module="Customer" :url="`Clients/${entityId}/getCard`">
        <template #body="{ entity }">
            <q-list>
                <q-item v-if="entity.salesPersonUser">
                    <q-item-section>
                        <q-item-label caption>{{
                            t('customer.card.salesPerson')
                        }}</q-item-label>
                        <q-item-label>
                            {{ entity.salesPersonUser.name }}
                        </q-item-label>
                    </q-item-section>
                </q-item>
                <q-item>
                    <q-item-section>
                        <q-item-label caption>
                            {{ t('customer.card.credit') }}
                        </q-item-label>
                        <q-item-label>
                            {{ toCurrency(entity.credit) }}
                        </q-item-label>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label caption>{{
                            t('customer.card.securedCredit')
                        }}</q-item-label>
                        <q-item-label>
                            {{ toCurrency(entity.creditInsurance) }}
                        </q-item-label>
                    </q-item-section>
                </q-item>
                <q-item>
                    <q-item-section v-if="entity.payMethod">
                        <q-item-label caption>{{
                            t('customer.card.payMethod')
                        }}</q-item-label>
                        <q-item-label>
                            {{ entity.payMethod.name }}
                        </q-item-label>
                    </q-item-section>
                    <q-item-section>
                        <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
                        <q-item-label>
                            {{ toCurrency(entity.debt) }}
                        </q-item-label>
                    </q-item-section>
                </q-item>
            </q-list>
            <q-card-actions class="q-gutter-md">
                <q-icon
                    v-if="entity.isActive == false"
                    name="vn:disabled"
                    size="xs"
                    color="primary"
                >
                    <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
                </q-icon>
                <q-icon
                    v-if="entity.isFreezed == true"
                    name="vn:frozen"
                    size="xs"
                    color="primary"
                >
                    <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
                </q-icon>
                <q-icon
                    v-if="entity.debt > entity.credit"
                    name="vn:risk"
                    size="xs"
                    color="primary"
                >
                    <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
                </q-icon>
                <q-icon
                    v-if="entity.isTaxDataChecked == false"
                    name="vn:no036"
                    size="xs"
                    color="primary"
                >
                    <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
                </q-icon>
                <q-icon
                    v-if="entity.account && entity.account.active == false"
                    name="vn:noweb"
                    size="xs"
                    color="primary"
                >
                    <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
                </q-icon>
            </q-card-actions>
            <!-- <q-card-actions>
                    <q-btn size="md" icon="vn:ticket" color="primary">
                        <q-tooltip>Ticket list</q-tooltip>
                    </q-btn>

                    <q-btn size="md" icon="vn:invoice-out" color="primary">
                        <q-tooltip>Invoice Out list</q-tooltip>
                    </q-btn>

                    <q-btn size="md" icon="vn:basketadd" color="primary">
                        <q-tooltip>Order list</q-tooltip>
                    </q-btn>

                    <q-btn size="md" icon="face" color="primary">
                        <q-tooltip>View user</q-tooltip>
                    </q-btn>

                    <q-btn size="md" icon="expand_more" color="primary">
                        <q-tooltip>More options</q-tooltip>
                    </q-btn>
                </q-card-actions> -->
        </template>
    </card-descriptor>
</template>
