<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

import { useQuasar } from 'quasar';

import CustomerSummaryDialog from '../Card/CustomerSummaryDialog.vue';

const { t } = useI18n();
const quasar = useQuasar();
const router = useRouter();

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

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

const viewSummary = () => {
    quasar.dialog({
        component: CustomerSummaryDialog,
        componentProps: {
            id: $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"
            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>
