Untitled

<script setup lang="ts">
import dayjs from 'dayjs'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
import { storeToRefs } from 'pinia'
import { DatePicker } from 'v-calendar'
import { useEventStore } from '@/stores/event'
const emit = defineEmits(['changed'])
const { locale } = useI18n()
const { getLocale } = storeToRefs(useLocalesStore())
const customerName = ref('')
const serviceName = ref('')
const range: any = ref([])
const rangeDeb = debouncedRef(range, 500)

const rangeDebounced = debouncedRef(customerName, 500)
const serviceDebounced = debouncedRef(serviceName, 500)

const { fetchLookupData } = useEventStore()
const serviceLookup = computed(() => {
  return lookup.customers
})
interface Payload {
  name: string
  range: string
  service: string
}
const calendar = reactive({
  date: null as null | string,
  attributes: [],

})
const showDatePicker = ref(false)

watch([rangeDebounced, serviceDebounced, rangeDeb], (val) => {
  const [name, service, range] = val
  const payload: Payload = {
    range: Object.keys(JSON.parse(JSON.stringify(range))).length ? formattedRange(range as string[]) : '',
    name,
    service,
  }
  emit('changed', payload)
})
const lookups = reactive({
  services: [],
})
function formattedRange(dateRange: string[]) {
  if (dateRange === null)
    return dateRange

  const [start, end] = dateRange

  return `from=${dayjs(start).format('YYYY-MM-DD')}&to=${dayjs(end).format('YYYY-MM-DD')}`
}
onMounted(() => {
  fetchLookupData()
    .then(({ services }) => {
      lookups.services = services
    })
})
</script>

<template>
  <div class="mt-4">
    <div class="grid grid-cols-1 mt-6 gap-y-6 gap-x-4 md:grid-cols-3">
      <div class="">
        <label for="customer-name" class="block text-sm font-medium text-gray-700">{{ $t('Customer') }}</label>
        <div class="mt-1">
          <input id="customer-name" v-model="customerName" :placeholder="$t('formPlaceHolder.client')" type="search" class="block w-full border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
        </div>
      </div>
      <div>
        <label for="staff" class="block text-sm font-medium text-gray-700">{{
          $t("booking.service")
        }}<span class="text-red-600">*</span></label>
        <div class="mt-1">
          <select
            id="staff" v-model="serviceName" class="
          block
          w-full
          border-gray-300
          rounded-md
          shadow-sm
          focus:border-primary-500 focus:ring-primary-500
          sm:text-sm
          "
          >
            <option value="">
              {{ $t("form.select") }}
            </option>
            <option v-for="ser of lookups.services" :key="ser" :value="ser?.uuid">
              {{ ser?.name }}
            </option>
          </select>
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700">{{ $t('Date') }}</label>
        <VueTailwindDatepicker
          v-model="range" use-range class="block  border-gray-300 rounded-md sm:text-sm"
          :i18n="$i18n.locale" dir="ltr"
        />
      </div>
      <!-- <div class="">
        <label class="block text-sm font-medium text-gray-700">{{ $t('Date') }}</label>
        <div class="relative">
          <div class=" px-3 py-2 border-gray-300 border  rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm mt-1" @click="showDatePicker = !showDatePicker">
            {{ calendar.date?.start ? new Date(calendar.date?.start).toLocaleDateString() : new Date().toLocaleDateString() }} ~ {{ calendar.date?.end ? new Date(calendar.date?.end).toLocaleDateString() : new Date().toLocaleDateString() }}
          </div>
          <div v-if="showDatePicker" class="absolute top-9 -left-16">
            <div @click="showDatePicker = false">
              <svg xmlns="http://www.w3.org/2000/svg" class="absolute block w-6 h-6 top-3 border border-red-600 rounded-full left-1/2 cursor-pointer" viewBox="0 0 24 24"><path fill="#f00" d="m12 13.4l-4.9 4.9q-.275.275-.7.275q-.425 0-.7-.275q-.275-.275-.275-.7q0-.425.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7q0-.425.275-.7q.275-.275.7-.275q.425 0 .7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275q.425 0 .7.275q.275.275.275.7q0 .425-.275.7L13.4 12l4.9 4.9q.275.275.275.7q0 .425-.275.7q-.275.275-.7.275q-.425 0-.7-.275Z" /></svg>
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>