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

defineProps<{
  title?: string;
  code?: string;
  amount?: number;
  status?: string;
  workerCount?: number;
  workerMax?: number;
  createdAt?: string;
  validUntil?: string;
  customerName?: string;
  reporter?: string;
  totalPrice?: number;
  urgent?: boolean;
}>();

defineEmits<{
  (e: 'view'): void;
  (e: 'edit'): void;
  (e: 'link'): void;
  (e: 'upload'): void;
  (e: 'delete'): void;
  (e: 'example'): void;
  (e: 'preview'): void;
}>();
</script>
<template>
  <div class="surface-1 rounded bordered q-pa-sm quo-card">
    <!-- SEC: header -->
    <header class="row items-center no-wrap">
      <q-img src="/images/quotation-avatar.png" width="2rem" />

      <div class="column q-ml-sm relative-position" style="font-size: 12px">
        <span>
          {{ $t('general.itemNo', { msg: $t('quotation.title') }) }}
        </span>
        <span
          class="text-caption row items-center"
          :class="urgent ? 'urgent' : 'app-text-muted'"
          style="top: 10px"
        >
          {{ code }}
          <q-icon
            v-if="urgent"
            name="mdi-fire"
            size="xs"
            style="position: absolute; top: 7px"
          ></q-icon>
        </span>
      </div>

      <nav class="col text-right">
        <q-btn
          flat
          dense
          rounded
          icon="mdi-play-box-outline"
          size="12px"
          :title="$t('preview.doc')"
          @click.stop="$emit('preview')"
        />
        <q-btn
          flat
          dense
          rounded
          icon="mdi-eye-outline"
          size="12px"
          :title="$t('general.viewDetail')"
          @click.stop="$emit('view')"
        />
        <KebabAction
          :idName="code"
          status="ACTIVE"
          hide-toggle
          use-upload
          @view="$emit('view')"
          @edit="$emit('edit')"
          @link="$emit('link')"
          @upload="$emit('upload')"
          @delete="$emit('delete')"
        />
      </nav>
    </header>

    <div class="q-pt-md ellipsis">
      {{ title || '-' }}
      <q-tooltip anchor="bottom start" self="top left">
        {{ title || '-' }}
      </q-tooltip>
    </div>

    <!-- SEC: body -->
    <section class="row no-wrap q-py-md items-center" style="font-size: 90%">
      <span class="app-text-muted q-pr-sm">{{ $t('general.status') }} :</span>
      <BadgeComponent :title="status" hsla-color="--blue-6-hsl" />
    </section>
    <q-separator />
    <section class="row q-py-sm">
      <div class="col-4 app-text-muted q-pr-sm">
        {{ $t('quotation.customerName') }}
      </div>
      <div class="col-8">{{ customerName || '-' }}</div>
      <div class="col-4 app-text-muted q-pr-sm">
        {{ $t('quotation.actor') }}
      </div>
      <div class="col-8">{{ reporter || '-' }}</div>
      <div class="col-4 app-text-muted q-pr-sm">
        {{ $t('quotation.employee') }}
      </div>
      <div class="col-8">
        <BadgeComponent
          icon="mdi-account-multiple-outline"
          :title="[workerCount, workerMax].join(' / ')"
        />
      </div>
      <div class="col-4 app-text-muted q-pr-sm">
        {{ $t('general.createdAt') }}
      </div>
      <div class="col-8">
        {{ createdAt }}
      </div>
      <div class="col-4 app-text-muted q-pr-sm">
        {{ $t('general.validUntil') }}
      </div>
      <div class="col-8">
        {{ validUntil }}
      </div>
      <div class="col-4 app-text-muted q-pr-sm">
        {{ $t('quotation.totalPrice') }}
      </div>
      <div class="col-8">
        {{ formatNumberDecimal(totalPrice || 0, 2) }}
      </div>
    </section>
  </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;
}

.urgent {
  color: hsl(var(--red-6-hsl));
}
</style>
