<template>
  <div class="expense-search-form">
    <div class="row">
      <!-- Từ khóa tìm kiếm -->
      <div class="col-md-3 mb-3">
        <label class="form-label">Từ khóa</label>
        <input type="text" class="form-control" v-model="searchModel.Search.PredicateObject.Keyword"
          placeholder="Tìm theo mô tả, ghi chú..." @keyup.enter="handleSearch" />
      </div>

      <!-- Danh mục chi phí -->
      <div class="col-md-3 mb-3">
        <label class="form-label">Danh mục chi phí</label>
        <v-select v-model="selectedCategory" :options="expenseCategories" label="Name" :reduce="option => option.Id"
          placeholder="Chọn danh mục..." :clearable="true" />
      </div>

      <!-- Trạng thái -->
      <div class="col-md-2 mb-3">
        <label class="form-label">Trạng thái</label>
        <v-select v-model="selectedStatus" :options="statusOptions" label="Name" :reduce="option => option.Value"
          placeholder="Chọn trạng thái..." :clearable="true" />
      </div>

      <!-- Từ ngày -->
      <div class="col-md-2 mb-3">
        <label class="form-label">Từ ngày</label>
        <VueDatePicker v-model="startDate" :format="dateFormat" :enable-time-picker="false" placeholder="Chọn ngày..."
          auto-apply />
      </div>

      <!-- Đến ngày -->
      <div class="col-md-2 mb-3">
        <label class="form-label">Đến ngày</label>
        <VueDatePicker v-model="endDate" :format="dateFormat" :enable-time-picker="false" placeholder="Chọn ngày..."
          auto-apply />
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-primary" @click="handleSearch">
            <i class="fe fe-search me-2"></i>Tìm kiếm
          </button>
          <button type="button" class="btn btn-outline-secondary" @click="handleReset">
            <i class="fe fe-refresh-cw me-2"></i>Đặt lại
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import expenseCategoryService from '@/services/expenseCategoryService'

const props = defineProps({
  searchModel: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['search', 'reset'])

// Data
const expenseCategories = ref([])
const startDate = ref(null)
const endDate = ref(null)
const dateFormat = 'dd/MM/yyyy'

// Computed
const selectedCategory = computed({
  get: () => props.searchModel.Search.PredicateObject.ExpenseCategoryId,
  set: (value) => {
    props.searchModel.Search.PredicateObject.ExpenseCategoryId = value
  }
})

const selectedStatus = computed({
  get: () => props.searchModel.Search.PredicateObject.Status,
  set: (value) => {
    props.searchModel.Search.PredicateObject.Status = value
  }
})

// Status options
const statusOptions = [
  { Name: 'Đang chờ xử lý', Value: 0 },
  { Name: 'Đã phê duyệt', Value: 1 },
  { Name: 'Đã từ chối', Value: 2 },
  { Name: 'Đã thanh toán', Value: 3 }
]

// Methods
const handleSearch = () => {
  // Update date filters
  if (startDate.value) {
    props.searchModel.Search.PredicateObject.CreatedStart = new Date(startDate.value).toISOString()
  } else {
    props.searchModel.Search.PredicateObject.CreatedStart = null
  }

  if (endDate.value) {
    const endDateTime = new Date(endDate.value)
    endDateTime.setHours(23, 59, 59, 999)
    props.searchModel.Search.PredicateObject.CreatedEnd = endDateTime.toISOString()
  } else {
    props.searchModel.Search.PredicateObject.CreatedEnd = null
  }

  emit('search')
}

const handleReset = () => {
  props.searchModel.Search.PredicateObject.Keyword = ""
  props.searchModel.Search.PredicateObject.ExpenseCategoryId = null
  props.searchModel.Search.PredicateObject.Status = null
  props.searchModel.Search.PredicateObject.CreatedStart = null
  props.searchModel.Search.PredicateObject.CreatedEnd = null
  startDate.value = null
  endDate.value = null
  emit('reset')
}

const loadExpenseCategories = async () => {
  try {
    expenseCategories.value = await expenseCategoryService.getAll()
  } catch (error) {
    console.error('Error loading expense categories:', error)
  }
}

// Lifecycle
onMounted(() => {
  loadExpenseCategories()

  // Initialize dates from search model
  if (props.searchModel.Search.PredicateObject.CreatedStart) {
    startDate.value = new Date(props.searchModel.Search.PredicateObject.CreatedStart)
  }
  if (props.searchModel.Search.PredicateObject.CreatedEnd) {
    endDate.value = new Date(props.searchModel.Search.PredicateObject.CreatedEnd)
  }
})
</script>

<style scoped>
.expense-search-form {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}
</style>
