<template>
  <sa-search-bar
    ref="searchBarRef"
    v-model="formData"
    label-width="100px"
    :showExpand="false"
    @reset="handleReset"
    @search="handleSearch"
  >
    <el-col v-bind="setSpan(8)">
      <el-form-item :label="$t('page.search.tier')" prop="tier">
        <el-select v-model="formData.tier" :placeholder="$t('table.searchBar.all')" clearable style="width: 100%">
          <el-option label="T1" value="T1" />
          <el-option label="T2" value="T2" />
          <el-option label="T3" value="T3" />
          <el-option label="T4" value="T4" />
          <el-option label="T5" value="T5" />
          <el-option :label="$t('page.search.optionBigwin')" value="BIGWIN" />
        </el-select>
      </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 searchBarRef = ref()
  const formData = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
  })

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

  function handleSearch() {
    emit('search', { ...formData.value })
  }

  const setSpan = (span: number) => ({
    span,
    xs: 24,
    sm: 12,
    md: 8,
    lg: span,
    xl: span
  })
</script>
