<script lang="ts" setup>
import { Icon } from '@iconify/vue';

const serviceName = defineModel<string>('serviceName');

defineProps<{
  workIndex: number;
}>();

const productItems = defineModel<
  {
    id: string;
    label: string;
    code: string;
    price: string;
    time: string;
  }[]
>('productItems');

defineEmits<{
  (e: 'addProduct'): void;
  (e: 'deleteWork'): void;
  (e: 'deleteProduct'): void;
}>();
</script>
<template>
  <div class="column rounded bordered surface-2 items-start">
    <div class="row items-center full-width q-gutter-x-md q-py-sm q-px-md">
      <q-btn
        id="btn-swap-work"
        icon="mdi-swap-vertical"
        dense
        flat
        round
        padding="0"
        color="info"
        class="q-ml-sm"
      />
      <q-btn
        id="btn-delete-work"
        icon="mdi-trash-can-outline"
        dense
        flat
        round
        padding="0"
        color="negative"
        class="q-ml-sm"
        @click="$emit('deleteWork')"
      />

      <q-input
        for="input-work-name"
        dense
        outlined
        borderless
        class="col"
        hide-bottom-space
        label="ชื่องาน"
        v-model="serviceName"
        style="background-color: var(--surface-1)"
      >
        <template #prepend>
          <q-btn
            dense
            unelevated
            round
            padding="0"
            style="background-color: var(--surface-tab)"
          >
            <Icon
              icon="basil:settings-adjust-solid"
              width="24px"
              style="color: var(--stone-7)"
            />
          </q-btn>
        </template>
      </q-input>
    </div>

    <div
      class="full-width q-py-xs text-weight-medium row justify-between items-center q-px-lg"
      style="background-color: hsla(var(--info-bg) / 0.1)"
    >
      <span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
      <q-btn
        id="btn-add-work-product"
        flat
        dense
        icon="mdi-plus"
        :label="$t('serviceAddProduct')"
        padding="0"
        style="color: hsl(var(--info-bg))"
        @click="$emit('addProduct')"
      />
    </div>

    <div class="q-py-md q-px-lg full-width">
      <div
        v-for="(product, index) in productItems"
        :key="product.id"
        class="full-width q-py-md q-px-sm row items-center justify-between"
        style="background-color: var(--surface-1)"
      >
        <div class="row items-center col-9 no-wrap">
          <q-btn
            id="btn-swap-work-product"
            icon="mdi-swap-vertical"
            dense
            flat
            round
            color="info"
          />
          <q-btn
            id="btn-delete-work-product"
            icon="mdi-trash-can-outline"
            dense
            flat
            round
            color="negative"
            class="q-mx-sm"
            @click="$emit('deleteProduct')"
          />

          <q-avatar
            size="md"
            class="text-white q-mx-lg"
            style="background-color: var(--teal-9)"
          >
            {{ index + 1 }}
          </q-avatar>

          <div class="row no-wrap">
            <div class="bordered q-mx-md col-3 image-box">
              <q-img
                src="blank-image.png"
                style="object-fit: cover; width: 100%; height: 100%"
              ></q-img>
            </div>
            <div class="column col justify-between">
              <span
                class="text-weight-bold ellipsis-2-lines"
                :style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
              >
                {{ product.label }}
                <q-tooltip>{{ product.label }}</q-tooltip>
              </span>
              <div
                class="bordered q-px-sm"
                style="border-radius: 6px; max-width: 60px"
              >
                {{ product.code }}
              </div>
            </div>
          </div>
        </div>

        <div class="row justify-end text-right col-3">
          <span
            class="col-12 text-weight-bold text-h6"
            style="color: var(--teal-9)"
          >
            ฿ {{ product.price }}
          </span>
          <span class="col-9 text-caption app-text-muted-2">
            {{ $t('processTime') }}
          </span>
          <span class="col-3 text-caption app-text-muted-2">
            {{ product.time }} {{ $t('day') }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.image-box {
  height: 70px;
  width: 70px;
  border-color: var(--teal-9);
  border-radius: 10px;
  background-color: var(--surface-3);
}
</style>
