<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
import { formatNumberDecimal } from 'src/stores/utils';
import KebabAction from '../shared/KebabAction.vue';

defineProps<{
  type?:
    | 'fullAmountCash'
    | 'installmentsCash'
    | 'fullAmountBill'
    | 'installmentsBill'
    | string;
  title?: string;
  code?: string;
  amount?: number;
  date?: string;
  customerName?: string;
  reporter?: string;
  totalPrice?: number;
}>();

defineEmits<{
  (e: 'view'): void;
  (e: 'edit'): void;
  (e: 'link'): void;
  (e: 'upload'): void;
  (e: 'delete'): void;
  (e: 'changeStatus'): void;
  (e: 'example'): void;
}>();
</script>
<template>
  <div class="surface-1 rounded bordered q-pa-sm quo-card">
    <!-- SEC: header -->
    <header class="row items-center no-wrap">
      <div
        class="badge-card rounded q-pa-xs"
        :class="{ [`badge-card__${type}`]: true }"
      >
        {{ $t(`quotation.type.${type}`) }}
      </div>

      <div class="column q-ml-md relative-position" style="font-size: 12px">
        <span>
          {{ $t('general.itemNo', { msg: $t('quotation.title') }) }}
        </span>
        <span class="text-caption app-text-muted" style="top: 10px">
          {{ code }}
        </span>
      </div>

      <nav class="col text-right">
        <q-btn
          flat
          dense
          rounded
          icon="mdi-eye-outline"
          size="12px"
          @click.stop="$emit('view')"
        />
        <KebabAction
          :idName="code"
          status="ACTIVE"
          use-link
          use-upload
          @view="$emit('view')"
          @edit="$emit('edit')"
          @link="$emit('link')"
          @upload="$emit('upload')"
          @delete="$emit('delete')"
          @change-status="$emit('changeStatus')"
        />
      </nav>
    </header>

    <!-- SEC: body -->
    <section class="row no-wrap q-py-md">
      <q-img src="/images/quotation-avatar.png" width="4rem" class="q-mr-lg" />
      <div class="column">
        <span class="col q-pt-sm">{{ title || '-' }}</span>
        <span class="app-text-muted">x {{ amount || '0' }}</span>
      </div>
      <div
        class="col text-right app-text-muted q-mr-md self-end"
        style="font-size: 12px"
      >
        {{ date || '-' }}
      </div>
    </section>
    <q-separator />
    <section class="row q-py-sm">
      <div class="col-3 app-text-muted">{{ $t('quotation.customerName') }}</div>
      <div class="col-9">{{ customerName || '-' }}</div>
      <div class="col-3 app-text-muted">{{ $t('quotation.actor') }}</div>
      <div class="col-9">{{ reporter || '-' }}</div>
    </section>
    <q-separator />
    <footer class="row no-wrap items-center q-mt-sm">
      <Icon
        class="q-mr-md"
        icon="ph:money-fill"
        style="font-size: 24px; color: var(--green-9)"
      />
      {{ $t('quotation.totalPrice') }} :
      <div class="q-pl-xs" style="color: var(--orange-5)">
        {{ formatNumberDecimal(totalPrice || 0, 2) }}
      </div>
      <q-btn
        dense
        outline
        color="primary"
        class="rounded q-ml-auto"
        padding="2px 8px"
      >
        <q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
        {{ $t('general.view', { msg: $t('general.example') }) }}
      </q-btn>
    </footer>
  </div>
</template>

<style scoped>
.badge-card {
  font-size: 12px;
  color: hsla(var(--gray-0-hsl) / 1);
  background: hsla(var(--_color) / 1);
}

.badge-card__fullAmountCash {
  --_color: var(--red-6-hsl);
}

.badge-card__installmentsCash {
  --_color: var(--blue-6-hsl);
}

.badge-card__fullAmountBill {
  --_color: var(--jungle-8-hsl);
}

.badge-card__installmentsBill {
  --_color: var(--purple-7-hsl);
}

.dark .badge-card__installmentsCash {
  --_color: var(--blue-10-hsl);
}

span {
  display: inline-block;
  /*new:*/
  line-height: 12px;
  height: 12px;
}
</style>
