<template>
  <sa-search-bar
    ref="searchBarRef"
    v-model="formData"
    label-width="100px"
    :showExpand="false"
    @reset="handleReset"
    @search="handleSearch"
    @expand="handleExpand"
  >
{% for column in columns %}
{% if column.is_query == 2 %}
{% if column.view_type == 'select' %}
    <el-col v-bind="setSpan(6)">
      <el-form-item label="{{column.column_comment}}" prop="{{column.column_name}}">
        <el-select v-model="formData.{{column.column_name}}" :options="[]" placeholder="请选择{{column.column_comment}}" clearable />
      </el-form-item>
    </el-col>
{% endif %}
{% if column.view_type == 'saSelect' or column.view_type == 'radio' %}
    <el-col v-bind="setSpan(6)">
      <el-form-item label="{{column.column_comment}}" prop="{{column.column_name}}">
        <sa-select v-model="formData.{{column.column_name}}" dict="{{column.dict_type}}" placeholder="请选择{{column.column_comment}}" clearable />
      </el-form-item>
    </el-col>
{% endif %}
{% if column.view_type == 'cascader' %}
    <el-col v-bind="setSpan(6)">
      <el-form-item label="{{column.column_comment}}" prop="{{column.column_name}}">
        <el-cascader v-model="formData.{{column.column_name}}" :options="[]" placeholder="请选择{{column.column_comment}}" clearable />
      </el-form-item>
    </el-col>
{% endif %}
{% if column.view_type == 'date' and column.options.mode == 'date' and column.query_type == 'between' %}
    <el-col v-bind="setSpan(6)">
      <el-form-item label="{{column.column_comment}}" prop="{{column.column_name}}">
        <el-date-picker v-model="formData.{{column.column_name}}" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" clearable />
      </el-form-item>
    </el-col>
{% endif %}
{% if column.view_type == 'date' and column.options.mode == 'datetime' and column.query_type == 'between' %}
    <el-col v-bind="setSpan(12)">
      <el-form-item label="{{column.column_comment}}" prop="{{column.column_name}}">
        <el-date-picker v-model="formData.{{column.column_name}}" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" clearable />
      </el-form-item>
    </el-col>
{% endif %}
{% if column.view_type == 'date' and column.query_type != 'between' %}
    <el-col v-bind="setSpan(6)">
      <el-form-item label="{{column.column_comment}}" prop="{{column.column_name}}">
        <el-date-picker v-model="formData.{{column.column_name}}" type="{{column.options.mode}}" placeholder="请选择{{column.column_comment}}" value-format="YYYY-MM-DD HH:mm:ss" clearable />
      </el-form-item>
    </el-col>
{% endif %}
{% if column.view_type != 'select' and column.view_type != 'radio' and column.view_type != 'saSelect' and column.view_type != 'cascader' and column.view_type != 'date'  %}
    <el-col v-bind="setSpan(6)">
      <el-form-item label="{{column.column_comment}}" prop="{{column.column_name}}">
        <el-input v-model="formData.{{column.column_name}}" placeholder="请输入{{column.column_comment}}" clearable />
      </el-form-item>
    </el-col>
{% endif %}
{% endif %}
{% endfor %}
  </sa-search-bar>
</template>

<script setup lang="ts">
  interface Props {
    modelValue: Record<string, any>
  }
  interface Emits {
    (e: 'update:modelValue', value: Record<string, any>): void
    (e: 'search', params: Record<string, any>): void
    (e: 'reset'): void
  }
  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()
  // 展开/收起
  const isExpanded = ref<boolean>(false)

  // 表单数据双向绑定
  const searchBarRef = ref()
  const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })

  // 重置
  function handleReset() {
    searchBarRef.value?.ref.resetFields()
    emit('reset')
  }

  // 搜索
  async function handleSearch() {
    emit('search', formData.value)
  }

  // 展开/收起
  function handleExpand(expanded: boolean) {
    isExpanded.value = expanded
  }

  // 栅格占据的列数
  const setSpan = (span: number) => {
    return {
      span: span,
      xs: 24, // 手机：满宽显示
      sm: span >= 12 ? span : 12, // 平板：大于等于12保持，否则用半宽
      md: span >= 8 ? span : 8, // 中等屏幕：大于等于8保持，否则用三分之一宽
      lg: span,
      xl: span
    }
  }
</script>
