<script setup>
import DataView from "@/components/datatable/DataView.vue";
import ProductVariantForm from "@/components/imports/ProductVariantForm.vue";
const product = ref();
const key = ref(0);
watch(product, () => {
  key.value++;
});
</script>

<template>
  <div class="fixed-grid has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-8 is-col-start-3">
        <div class="field">
          <label class="label">Sản phẩm</label>
          <SearchBox
            v-bind="{
              api: 'product',
              field: 'name',
              column: ['name'],
              first: true,
              clearable: true,
              placeholder: 'Tìm sản phẩm',
              addon: {
                component: 'imports/AddProductForm',
                width: '90%',
                height: 'auto',
                title: 'Thêm sản phẩm',
              },
            }"
            @option="product = $event"
          />
        </div>
      </div>
      <div
        v-if="product"
        class="cell is-col-span-12"
      >
        <DataView
          :key="key"
          v-bind="{
            api: 'Product_Variant',
            setting: 'product-variants',
            pagename: 'product-variants',
            params: {
              values:
                'id,code,product,product__name,color,color__code,color__name,color__hex_code,ram,ram__code,ram__capacity,internal_storage,internal_storage__code,internal_storage__capacity,image,image__path,price,note,create_time,update_time',
              filter: { product: product.id },
              sort: 'id',
            },
          }"
        />
      </div>
    </div>
  </div>
  <ProductVariantForm
    v-if="product"
    :productId="product.id"
    @created="key++"
  />
</template>
