<script setup>
const props = defineProps({
  invItem: Object,
});

const { $dayjs, $numtoString } = useNuxtApp();
const emit = defineEmits("unselect");
</script>

<template>
  <div
    v-if="invItem"
    class="cell relative fs-14"
  >
    <div class="card">
      <button
        @click="emit('unselect')"
        class="button is-white rounded-full has-text-grey absolute size-8 is-flex is-justify-content-center is-align-items-center"
        style="z-index: 1; right: 0.5rem; top: 0.5rem"
      >
        <span class="icon">
          <Icon
            name="material-symbols:close-rounded"
            :size="22"
          />
        </span>
      </button>
      <div class="card-content is-clipped">
        <div class="py-3 sticky top-0">
          <p class="fs-17 font-semibold">Chi tiết sản phẩm</p>
        </div>
        <hr class="m-0" />
        <div style="max-height: 600px; overflow-y: scroll">
          <div>
            <div class="is-flex is-gap-2 is-align-items-center">
              <div class="is-flex is-gap-2">
                <div
                  class="has-background-purple size-12 rounded-md is-flex is-justify-content-center is-align-items-center"
                >
                  <Icon
                    name="material-symbols:deployed-code-outline"
                    :size="24"
                    class="has-text-white"
                  />
                </div>
                <div>
                  <p class="font-semibold mb-1">{{ invItem.name }}</p>
                  <p class="has-text-grey-40">SKU: {{ invItem.sku }}</p>
                  <p class="fs-12 has-text-grey">{{ invItem.category }}</p>
                </div>
              </div>
            </div>
            <div class="is-flex is-gap-1 mt-4">
              <div class="px-4 py-3 is-flex-grow-1 rounded-md has-background-blue-95 has-text-blue-40">
                <p class="fs-13">Giá đơn vị</p>
                <p class="fs-16 font-semibold">
                  {{ $numtoString(invItem.unit_price, { hasUnit: true }) }}
                </p>
              </div>
              <div class="px-4 py-3 is-flex-grow-1 rounded-md has-background-purple-90 has-text-purple-40">
                <p class="fs-13">Tổng giá trị</p>
                <p class="fs-16 font-semibold">
                  {{ $numtoString(invItem.total, { hasUnit: true }) }}
                </p>
              </div>
            </div>
            <div class="mt-6">
              <p class="fs-15 font-semibold mb-4">Tóm tắt tồn kho</p>
              <div class="is-flex is-flex-direction-column">
                <div class="py-2 is-flex is-justify-content-space-between">
                  <p class="has-text-grey-40">Tồn hiện tại</p>
                  <p class="fs-14 font-semibold">{{ invItem.stock }}</p>
                </div>
                <hr class="my-1 has-background-grey-95" />
                <div class="py-2 is-flex is-justify-content-space-between">
                  <p class="has-text-grey-40">Đặt trước</p>
                  <p class="fs-14 font-semibold has-text-orange">
                    {{ invItem.preorder }}
                  </p>
                </div>
                <hr class="my-1 has-background-grey-95" />
                <div class="py-2 is-flex is-justify-content-space-between">
                  <p class="has-text-grey-40">Khả dụng</p>
                  <p class="fs-14 font-semibold has-text-green">
                    {{ invItem.available }}
                  </p>
                </div>
              </div>
            </div>
            <div class="mt-6">
              <p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
              <div class="p-4 rounded-md has-background-grey-95">
                <div class="is-flex is-gap-1">
                  <Icon
                    name="material-symbols:location-on-outline-rounded"
                    :size="20"
                  />
                  <div>
                    <p>{{ invItem.storage }}</p>
                    <p class="mt-1 fs-13 is-family-monospace">
                      {{ invItem.storage__position }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-6">
              <p class="fs-15 font-semibold mb-4">Thông tin lô hàng</p>
              <div class="p-4 rounded-md has-background-grey-95">
                <p class="fs-13 has-text-grey">Mã lô</p>
                <p class="mt-1 is-family-monospace">{{ invItem.batch }}</p>
              </div>
              <div class="p-4 mt-4 rounded-md has-background-grey-95">
                <div class="is-flex is-gap-1 is-align-items-center">
                  <Icon
                    name="material-symbols:calendar-today-outline-rounded"
                    :size="18"
                    class="has-text-grey-50"
                  />
                  <p class="fs-13 has-text-grey">Hạn sử dụng</p>
                </div>
                <p class="mt-1">{{ $dayjs(invItem.expired).format("LL") }}</p>
              </div>
            </div>
            <div class="mt-6">
              <p class="fs-15 font-semibold mb-4">Lịch sử di chuyển</p>
              <div
                v-for="move in invItem.moveHistory"
                :key="move.id"
                class="p-4 mb-4 rounded-md has-background-grey-95 has-text-grey-40 fs-12"
              >
                <div class="is-flex is-justify-content-space-between mb-1">
                  <div class="is-flex is-gap-1 is-align-items-center">
                    <div
                      :class="[
                        'p-1 rounded-sm is-flex is-align-items-center',
                        `has-background-${move.delta > 0 ? 'success' : 'danger'}-soft`,
                      ]"
                    >
                      <Icon
                        :name="move.delta > 0 ? 'ph:chart-line-up' : 'ph:chart-line-down'"
                        :size="18"
                        :class="`has-text-${move.delta > 0 ? 'success' : 'danger'}-40`"
                      />
                    </div>
                    <p :class="`has-text-${move.delta > 0 ? 'success' : 'danger'}-40`">
                      {{ move.type__name }}
                    </p>
                  </div>
                  <p :class="['fs-14 font-semibold', `has-text-${move.delta > 0 ? 'success' : 'danger'}-40`]">
                    {{
                      new Intl.NumberFormat("en-US", {
                        signDisplay: "exceptZero",
                      }).format(move.delta)
                    }}
                  </p>
                </div>
                <p class="is-flex is-gap-0.5 is-align-items-center">
                  <span>{{ $dayjs(move.date).format("L") }}</span>
                  <span>•</span>
                  <span class="is-family-monospace">{{ move.code }}</span>
                </p>
                <p>
                  <span>{{ move.from__code ? "Từ" : "Đến" }}</span>
                  <span>: </span>
                  <span>{{ move.from__code || move.to__code }}</span>
                </p>
              </div>
            </div>
          </div>
          <hr />
          <div class="mt-6">
            <p class="fs-15 font-semibold mb-4">Thao tác nhanh</p>
            <div class="fixed-grid">
              <div class="grid">
                <button class="button fs-13 is-primary">Điều chỉnh</button>
                <button class="button fs-13">Chuyển kho</button>
                <button class="button fs-13">Xem báo cáo</button>
                <button class="button fs-13">In nhãn</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.card-content {
  padding: 0; /* 1.5rem */

  > div {
    padding: var(--bulma-card-content-padding);
  }
}
</style>
