{% import "frontend/page/_macros.j2" as ui %}
<template>
  <ArtSearchBar
    ref="searchBarRef"
    v-model="formData"
    :items="formItems"
    :rules="rules"
    @reset="handleReset"
    @search="handleSearch"
  />
</template>

<script setup lang="ts">
{% if flags.uses_search_dict %}
  import { useDict } from '@/utils/dict'
{% endif %}
  import type { SearchFormModel } from '../types'

  interface Props {
    modelValue: SearchFormModel
  }

  interface Emits {
    (e: 'update:modelValue', value: SearchFormModel): void
    (e: 'search', params: SearchFormModel): void
    (e: 'reset'): void
  }

  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()

{% if flags.uses_search_dict %}
  const { getDict } = useDict()
{% endif %}

  const searchBarRef = ref()

  const formData = computed({
    get: () => props.modelValue,
    set: (value: SearchFormModel) => emit('update:modelValue', value)
  })

  const rules = {}

  const formItems = computed(() => [
{% for field in search_fields %}
    {
      label: '{{ field.label }}',
      key: '{{ field.search_model_key }}',
{% if field.search_widget == "input" %}
      type: 'input',
      props: {{ ui.js_object([
        "placeholder: '" ~ field.search_placeholder ~ "'",
        "clearable: true"
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "number" %}
      type: 'number',
      props: {{ ui.js_object([
        "style: { width: '100%' }",
        "placeholder: '" ~ field.search_placeholder ~ "'"
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "select" %}
      type: 'select',
      props: {{ ui.js_object([
        "placeholder: '" ~ field.search_placeholder ~ "'",
        "clearable: true",
        "options: " ~ field.option_items_literal
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "radio_group" %}
      type: 'radiogroup',
      props: {{ ui.js_object([
        "options: " ~ field.option_items_literal
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "checkbox_group" %}
      type: 'checkboxgroup',
      props: {{ ui.js_object([
        "options: " ~ field.option_items_literal
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "cascader" %}
      type: 'cascader',
      props: {{ ui.js_object([
        "placeholder: '" ~ field.search_placeholder ~ "'",
        "clearable: true",
        "style: { width: '100%' }",
        "options: " ~ field.option_items_literal
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "tree_select" %}
      type: 'treeselect',
      props: {{ ui.js_object([
        "placeholder: '" ~ field.search_placeholder ~ "'",
        "clearable: true",
        "style: { width: '100%' }",
        "data: " ~ field.option_items_literal
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "date" %}
      type: 'date',
      props: {{ ui.js_object([
        "style: { width: '100%' }",
        "placeholder: '" ~ field.search_placeholder ~ "'",
        "type: 'date'",
        "valueFormat: '" ~ field.search_value_format ~ "'",
        "clearable: true"
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "date_range" %}
      type: 'daterange',
      props: {{ ui.js_object([
        "style: { width: '100%' }",
        "type: 'daterange'",
        "rangeSeparator: '至'",
        "startPlaceholder: '开始日期'",
        "endPlaceholder: '结束日期'",
        "valueFormat: '" ~ field.search_value_format ~ "'",
        "clearable: true"
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "date_time" %}
      type: 'datetime',
      props: {{ ui.js_object([
        "style: { width: '100%' }",
        "placeholder: '" ~ field.search_placeholder ~ "'",
        "type: 'datetime'",
        "valueFormat: '" ~ field.search_value_format ~ "'",
        "clearable: true"
      ], field.search_props_literal, '        ', '      ') }}
{% elif field.search_widget == "date_time_range" %}
      type: 'datetimerange',
      props: {{ ui.js_object([
        "style: { width: '100%' }",
        "type: 'datetimerange'",
        "rangeSeparator: '至'",
        "startPlaceholder: '开始时间'",
        "endPlaceholder: '结束时间'",
        "valueFormat: '" ~ field.search_value_format ~ "'",
        "clearable: true"
      ], field.search_props_literal, '        ', '      ') }}
{% else %}
      type: 'timepicker',
      props: {{ ui.js_object([
        "style: { width: '100%' }",
        "placeholder: '" ~ field.search_placeholder ~ "'",
        "valueFormat: '" ~ field.search_value_format ~ "'",
        "clearable: true"
      ], field.search_props_literal, '        ', '      ') }}
{% endif %}
    }{{ "," if not loop.last else "" }}
{% endfor %}
  ])

  const handleReset = () => {
    emit('reset')
  }

  const handleSearch = async (params: SearchFormModel) => {
    await searchBarRef.value?.validate?.()
    emit('search', params)
  }
</script>
