<template>
  <sa-search-bar
    ref="searchBarRef"
    v-model="formData"
    label-width="100px"
    :showExpand="false"
    @reset="handleReset"
    @search="handleSearch"
    @expand="handleExpand"
  >
    <el-col v-bind="setSpan(5)">
      <el-form-item :label="$t('page.search.type')" prop="type">
        <el-select v-model="formData.type" :placeholder="$t('table.searchBar.all')" clearable style="width: 100%">
          <el-option :label="$t('page.search.typeRecharge')" :value="0" />
          <el-option :label="$t('page.search.typeWithdraw')" :value="1" />
          <el-option :label="$t('page.search.typeBuyTicket')" :value="2" />
          <el-option :label="$t('page.search.typeAdminAdd')" :value="3" />
          <el-option :label="$t('page.search.typeAdminSub')" :value="4" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(5)">
      <el-form-item :label="$t('page.search.user')" prop="username">
        <el-input v-model="formData.username" :placeholder="$t('page.search.byUsername')" clearable />
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(8)">
      <el-form-item :label="$t('page.search.coin')" prop="coin_min">
        <div class="coin-range-wrap">
          <el-input-number
            v-model="formData.coin_min"
            :placeholder="$t('table.searchBar.min')"
            :precision="2"
            controls-position="right"
            class="coin-range-input"
          />
          <span class="coin-range-sep">{{ $t('table.searchBar.rangeSeparator') }}</span>
          <el-input-number
            v-model="formData.coin_max"
            :placeholder="$t('table.searchBar.max')"
            :precision="2"
            controls-position="right"
            class="coin-range-input"
          />
        </div>
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(8)">
      <el-form-item :label="$t('page.search.createTime')" prop="create_time">
        <el-date-picker
          v-model="formData.create_time"
          type="datetimerange"
          :range-separator="$t('table.searchBar.rangeSeparator')"
          :start-placeholder="$t('table.searchBar.startTime')"
          :end-placeholder="$t('table.searchBar.endTime')"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </el-form-item>
    </el-col>
  </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>

<style lang="scss" scoped>
  .coin-range-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* 允许在栅格内收缩，避免挤压右侧按钮 */
  }

  .coin-range-input {
    flex: 1;
    min-width: 0; /* 数字框可收缩 */
  }

  .coin-range-sep {
    color: var(--el-text-color-secondary);
    flex-shrink: 0;
  }
</style>
