<script setup lang="ts">
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import InputWithFilter from '../InputWithFilter.vue';
import { ref } from 'vue';
const data = ref({
  periode: '',
})
</script>

<template>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Periode Tanggal:</label>

      <DatePicker @update:date-value="(value) => data.periode = value" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Unit PLN:</label>

      <div class="flex flex-col gap-y-1">
        <Select placeholder="Pilih Unit" />

        <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
          <Select placeholder="Pilih Area" />
          <Select placeholder="Pilih Rayon" />
        </div>
      </div>
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Status:</label>

      <Select placeholder="Pilih Status" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">SLA:</label>

      <Select placeholder="Pilih Durasi SLA" />
    </div>

    <div class="flex flex-col flex-1 space-y-2">
      <label class="filter-input-label">Pencarian:</label>

      <InputWithFilter placeholder="cari report" :filters="[{ id: 1, title: 'Pilih Jenis' }]" />
    </div>
  </div>

</template>
