<script setup>
import DataView from "@/components/datatable/DataView.vue";

const filter = ref({});

function selected(api, chosen) {
  filter.value[`product__${api}`] = chosen?.id;
}
</script>

<template>
  <div>
    <form class="fixed-grid has-12-cols">
      <div class="grid">
        <div class="cell is-col-span-8">
          <div class="field">
            <label class="label">Tên sản phẩm</label>
            <div class="control">
              <input
                class="input"
                v-model.trim="filter.product__name__icontains"
                type="text"
                placeholder="Tên"
              />
            </div>
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">OS</label>
            <SearchBox
              v-bind="{
                api: 'OS',
                field: 'name',
                column: ['name'],
                first: true,
                optionid: filter.os,
                placeholder: 'OS',
              }"
              @option="selected('os', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">Hãng</label>
            <SearchBox
              v-bind="{
                api: 'Manufacturer',
                field: 'name',
                column: ['name'],
                first: true,
                optionid: filter.manufacturer,
                placeholder: 'Hãng',
              }"
              @option="selected('manufacturer', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">Pin</label>
            <SearchBox
              v-bind="{
                api: 'Battery',
                field: 'code',
                column: ['code'],
                first: true,
                optionid: filter.battery,
                placeholder: 'Pin',
              }"
              @option="selected('battery', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">Màn hình</label>
            <SearchBox
              v-bind="{
                api: 'Screen',
                field: 'label',
                column: ['resolution', 'standard', 'technology'],
                first: true,
                optionid: filter.screen,
                placeholder: 'Màn hình',
              }"
              @option="selected('screen', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">CPU</label>
            <SearchBox
              v-bind="{
                api: 'CPU',
                field: 'name',
                column: ['name'],
                first: true,
                placeholder: 'CPU',
                optionid: filter.cpu,
              }"
              @option="selected('cpu', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">GPU</label>
            <SearchBox
              v-bind="{
                api: 'GPU',
                field: 'name',
                column: ['name'],
                first: true,
                optionid: filter.gpu,
                placeholder: 'GPU',
              }"
              @option="selected('gpu', $event)"
            />
          </div>
        </div>
        <div class="cell is-col-span-4">
          <div class="field">
            <label class="label">Bộ nhớ ngoài</label>
            <SearchBox
              v-bind="{
                api: 'External_Storage',
                field: 'code',
                column: ['code'],
                first: true,
                optionid: filter.external_storage,
                placeholder: 'Bộ nhớ ngoài',
                position: 'is-top-right',
              }"
              @option="selected('external_storage', $event)"
            />
          </div>
        </div>
      </div>
    </form>
    <DataView
      :key="JSON.stringify(filter)"
      v-bind="{
        api: 'Product_Variant',
        setting: 'product-variants-selection',
        pagename: 'product-variants-selection',
        params: {
          values:
            'id,code,product,product__name,product__os__name,product__external_storage__max_capacity,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',
          sort: 'id',
          filter,
        },
      }"
    />
  </div>
</template>
