<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(6)">
      <el-form-item :label="$t('page.search.username')" prop="username">
        <el-input v-model="formData.username" :placeholder="$t('page.search.placeholderUsername')" clearable />
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(6)">
      <el-form-item :label="$t('page.search.nickname')" prop="name">
        <el-input v-model="formData.name" :placeholder="$t('page.search.placeholderNickname')" clearable />
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(6)">
      <el-form-item :label="$t('page.search.phone')" prop="phone">
        <el-input v-model="formData.phone" :placeholder="$t('page.search.placeholderPhoneFuzzy')" 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('table.searchBar.all')" clearable style="width: 100%">
          <el-option :label="$t('table.searchBar.enable')" :value="1" />
          <el-option :label="$t('table.searchBar.disable')" :value="0" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(6)">
      <el-form-item :label="$t('page.search.coin')" prop="coin">
        <el-input-number
          v-model="formData.coin"
          :min="0"
          :precision="2"
          :placeholder="$t('page.search.exactSearch')"
          controls-position="right"
          style="width: 100%"
        />
      </el-form-item>
    </el-col>
    <el-col v-bind="setSpan(6)">
      <el-form-item :label="$t('page.search.lotteryPoolConfig')" prop="lottery_config_id">
        <el-select
          v-model="formData.lottery_config_id"
          :placeholder="$t('page.search.placeholderAll')"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in lotteryConfigOptions"
            :key="item.id"
            :label="lotteryPoolOptionLabel(item)"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-col>
  </sa-search-bar>
</template>

<script setup lang="ts">
  import api from '../../../api/player/index'
  import { lotteryPoolOptionLabel, type LotteryPoolOption } from '@/views/plugin/dice/utils/lotteryPoolDisplay'

  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 lotteryConfigOptions = ref<LotteryPoolOption[]>([])

  /** 从玩家控制器获取 DiceLotteryPoolConfig id/name 列表，用于 lottery_config_id 筛选 */
  onMounted(async () => {
    try {
      lotteryConfigOptions.value = await api.getLotteryConfigOptions()
    } catch {
      lotteryConfigOptions.value = []
    }
  })

  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) => ({
    span,
    xs: 24,
    sm: span >= 12 ? span : 12,
    md: span >= 8 ? span : 8,
    lg: span,
    xl: span
  })
</script>
