<script setup>
import { ref } from 'vue'
import DataView from '~/components/datatable/DataView.vue'
import Modal from '~/components/Modal.vue'

const { $store } = useNuxtApp();
const showmodal = ref();
const products = ref([]);

function openConfirmModal() {
  showmodal.value = {
    component: 'handover/SelectTemplate',
    title: 'Xác nhận',
    width: '700px',
    height: '250px',
    vbind: { products }
  }
}

function toggleAll() {
  if ($store.selectedProductsForHandoverEmail.length === 0) {
    $store.commit('selectedProductsForHandoverEmail', products.value.map(p => p.id)) 
  } else {
    $store.commit('selectedProductsForHandoverEmail', []) 
  }
}
</script>
<template>
  <div>
    <div class="buttons is-justify-content-end" v-if="$store.selectedProductsForHandoverEmail !== undefined">
      <button
        v-if="$store.selectedProductsForHandoverEmail.length > 0"
        @click="openConfirmModal()"
        class="button is-light"
      >
        Gửi {{ $store.selectedProductsForHandoverEmail.length }} thông báo
      </button>
      <button
        @click="toggleAll"
        class="button"
        :disabled="products.length === 0"
      >
        {{ $store.selectedProductsForHandoverEmail.length > 0 ? 'Bỏ chọn' : 'Chọn' }} tất cả
      </button>
    </div>
    <DataView v-bind="{
      api: 'product',
      params: {
        filter: { elpro__stage__gt: 0 },
        values: 'prdbk__transaction__code,prdbk__transaction__txncurrent__detail__status__name,prdbk__transaction__policy__code,prdbk__transaction__sale_price,prdbk__transaction__discount_amount,prdbk__transaction__customer,prdbk__transaction__customer__code,prdbk__transaction__customer__type__code,prdbk__transaction__customer__phone,prdbk__transaction__customer__fullname,prdbk__transaction__customer__legal_code,prdbk__transaction__customer__issued_date,prdbk__transaction__customer__contact_address,prdbk__transaction__customer__address,prdbk__transaction__customer__email,prdbk__transaction__co_op,locked_until,note,cart,cart__name,cart__code,cart__dealer,cart__dealer__code,cart__dealer__name,direction,type,zone_type,dealer,link,type__name,dealer__code,dealer__name,id,code,trade_code,land_lot_code,zone_code,zone_type__name,lot_area,building_area,total_built_area,number_of_floors,land_lot_size,origin_price,price_excluding_vat,direction__name,villa_model,product_type,template_name,project,project__name,status,status__code,status__name,status__color,status__sale_status,status__sale_status__color,create_time,elpro__stage,elpro__stage__name,elpro__area_before,elpro__current_area,elpro__area_gap,elpro__rate_amount,elpro__date,elpro__eligibility_date,elpro__status',
        distinct_values: {
          label: { type: 'Concat', field: ['trade_code', 'type__name', 'land_lot_size', 'zone_type__name', 'status__name'] },
          count_note: { type: 'Count', field: 'prdnote' }
        },
        summary: 'annotate',
      },
      setting: 'handover',
      pagename: 'pagedata-handover',
      modal: { component: 'parameter/ProductForm', title: 'Sản phẩm' },
      realtime: { time: 2, update: 'false' },
      onDisplayDataChange: (values) => products = values
    }" 
    />
    <Modal 
      v-if="showmodal" 
      v-bind="showmodal" 
      @close="showmodal = undefined" 
    />
  </div>
</template>
