<script setup>
import ProductCard from "@/components/pos/ProductCard.vue";
import SearchBox from "@/components/SearchBox.vue";

const store = useStore();
const { $numtoString } = useNuxtApp();

function openModal() {
  store.showmodal = {
    component: "pos/ProductSelection",
    title: "Chọn sản phẩm",
    width: "85%",
    height: "500px",
  };
}

const record = ref({
  customer: null,
  paymentMethod: null,
});
const subtotal = computed(() => {
  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
});
</script>

<template>
  <div class="block">
    <button
      @click="openModal"
      class="button is-primary"
    >
      <span class="icon">
        <Icon
          name="material-symbols:add-rounded"
          :size="20"
        />
      </span>
      <span>Chọn sản phẩm</span>
    </button>
  </div>
  <div class="fixed-grid has-1-cols-mobile has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-8">
        <div class="card">
          <div class="card-content">
            <p class="icon-text fs-17 font-semibold mb-4">
              <span class="icon">
                <Icon
                  name="material-symbols:shopping-cart-outline-rounded"
                  :size="18"
                />
              </span>
              <span>Giỏ hàng</span>
            </p>
            <div
              v-if="store.selectedImeis.length > 0"
              class="is-flex is-flex-direction-column is-gap-1"
            >
              <ProductCard
                v-for="imei in store.selectedImeis"
                :key="imei.id"
                :imei="imei"
              />
            </div>
            <p
              v-else
              class="py-4 fs-16 has-text-grey has-text-centered"
            >
              Không có sản phẩm nào trong giỏ hàng
            </p>
          </div>
        </div>
      </div>
      <div class="cell is-col-span-4">
        <div class="card mb-3">
          <div class="card-content">
            <p class="icon-text fs-17 font-semibold mb-4">
              <span class="icon">
                <Icon
                  name="material-symbols:supervisor-account-outline-rounded"
                  :size="18"
                />
              </span>
              <span>Khách hàng</span>
            </p>
            <div>
              <SearchBox
                v-bind="{
                  api: 'customer',
                  field: 'label',
                  column: ['label'],
                  first: true,
                  placeholder: 'Khách hàng',
                  addon: {
                    component: 'customer/CustomerQuickAdd',
                    width: '50%',
                    height: 'auto',
                    title: 'Tạo khách hàng',
                  },
                  onOption: (e) => (record.customer = e),
                }"
              />
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-content">
            <p class="icon-text fs-17 font-semibold mb-4">
              <span class="icon">
                <Icon
                  name="material-symbols:credit-card-outline"
                  :size="18"
                />
              </span>
              <span>Thanh toán</span>
            </p>
            <div>
              <SearchBox
                v-bind="{
                  api: 'Payment_Method',
                  field: 'name',
                  column: ['name'],
                  first: true,
                  placeholder: 'Phương thức thanh toán',
                  onOption: (e) => (record.paymentMethod = e),
                }"
              />
            </div>
          </div>
        </div>
        <div class="card mb-3">
          <div class="card-content">
            <p class="icon-text fs-17 font-semibold mb-4">Tổng cộng</p>
            <div>
              <table class="table is-fullwidth fs-13">
                <tbody>
                  <tr>
                    <td>
                      <span>Tạm tính</span>
                      <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
                    </td>
                    <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
                  </tr>
                  <tr>
                    <td class="font-bold fs-14">Tổng cộng</td>
                    <td class="has-text-right has-text-success-35 font-bold fs-17">
                      {{ $numtoString(subtotal, { hasUnit: true }) }}
                    </td>
                  </tr>
                </tbody>
              </table>
              <button
                class="button is-fullwidth is-success"
                :disabled="!record.customer || !record.paymentMethod"
              >
                Thanh toán
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
