<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import CustomerSummary from '../Card/CustomerSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';

const { t } = useI18n();
const router = useRouter();
const { viewSummary } = useSummaryDialog();

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

const redirectToCreateView = () => {
    router.push({
        name: 'TicketList',
        query: {
            params: JSON.stringify({
                clientFk: $props.id,
            }),
        },
    });
};
</script>

<template>
    <div>
        <QIcon
            @click.stop="redirectToCreateView"
            color="primary"
            name="vn:ticket"
            size="sm"
        >
            <QTooltip>
                {{ t('Client ticket list') }}
            </QTooltip>
        </QIcon>
        <QIcon
            @click.stop="viewSummary($props.id, CustomerSummary)"
            class="q-ml-md"
            color="primary"
            name="preview"
            size="sm"
        >
            <QTooltip>
                {{ t('Preview') }}
            </QTooltip>
        </QIcon>
    </div>
</template>

<i18n>
es:
    Client ticket list: Listado de tickets del cliente
    Preview: Vista previa
</i18n>
