<template>
  <sa-search-bar
    ref="searchBarRef"
    v-model="formData"
    label-width="100px"
    :showExpand="false"
    @reset="handleReset"
    @search="handleSearch"
  >
    <el-col v-bind="setSpan(6)">
      <el-form-item :label="$t('page.search.providerCode')" prop="provider_code">
        <el-input
          v-model="formData.provider_code"
          :placeholder="$t('page.search.placeholderProviderCode')"
          clearable
        />
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(6)">
      <el-form-item :label="$t('page.search.gameCode')" prop="game_code">
        <el-input
          v-model="formData.game_code"
          :placeholder="$t('page.search.placeholderGameCode')"
          clearable
        />
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(6)">
      <el-form-item :label="$t('page.search.gameType')" prop="game_type">
        <el-input
          v-model="formData.game_type"
          :placeholder="$t('page.search.placeholderGameType')"
          clearable
        />
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(6)">
      <el-form-item :label="$t('page.search.status')" prop="status">
        <el-select
          v-model="formData.status"
          :placeholder="$t('page.search.placeholderStatus')"
          clearable
        >
          <el-option :label="$t('page.search.statusEnabled')" :value="1" />
          <el-option :label="$t('page.search.statusDisabled')" :value="0" />
        </el-select>
      </el-form-item>
    </el-col>
  </sa-search-bar>
</template>

<script setup lang="ts">
  type GameSearchForm = {
    provider_code?: string
    game_code?: string
    game_type?: string
    status?: number
    [key: string]: unknown
  }

  interface Props {
    modelValue: GameSearchForm
  }
  interface Emits {
    (e: 'update:modelValue', value: GameSearchForm): void
    (e: 'search', params: GameSearchForm): void
    (e: 'reset'): void
  }
  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()

  const searchBarRef = ref()
  const formData = computed<GameSearchForm>({
    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) => {
    return {
      span,
      xs: 24,
      sm: span >= 12 ? span : 12,
      md: span >= 8 ? span : 8,
      lg: span,
      xl: span
    }
  }
</script>
