<template>
  <el-select
    v-model="innerValue"
    :placeholder="placeholderText"
    :class="wrapperClass"
    :clearable="clearable"
    :disabled="disabled"
    :filterable="isRemote || filterable"
    :remote="isRemote"
    :remote-method="isRemote ? handleRemoteSearch : undefined"
    @change="onChange"
  >
    <el-option
      v-for="opt in optionList"
      :key="opt.value"
      :label="opt.label"
      :value="opt.value"
    />
  </el-select>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import request from '/@/utils/request'
import { getAppVersion, getAppChannel } from '/@/api/common/common'

interface SelectOption {
  label: string
  value: string | number
}

interface Props {
  modelValue?: string | number | null
  type?: 'version' | 'channel'
  placeholder?: string
  clearable?: boolean
  disabled?: boolean
  filterable?: boolean
  wrapperClass?: string
  showAllVersions?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  type: 'version',
  placeholder: '',
  clearable: true,
  disabled: false,
  filterable: false,
  wrapperClass: '',
  showAllVersions: false,
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number | null): void
  (e: 'change', value: string | number | null): void
}>()

const innerValue = ref<string | number | null>(props.modelValue)
watch(
  () => props.modelValue,
  (val) => {
    innerValue.value = val
  }
)

function onChange(val: string | number | null) {
  emit('update:modelValue', val)
  emit('change', val)
}

const optionList = ref<SelectOption[]>([])

const isRemote = computed(() => true)

const placeholderText = computed(() => {
  if (props.placeholder) return props.placeholder
  if (props.type === 'version') {
    return props.showAllVersions ? '全部版本' : '请选择版本'
  }
  return '全部渠道'
})

async function requestOptions(query: string): Promise<SelectOption[]> {
  if (props.type === 'version') {
    const res = await getAppVersion()
    const list: Array<string> = (res as any)?.data || []
    const versionOptions = list.map((name) => ({ label: String(name), value: name }))

    // 如果启用了showAllVersions，在列表开头添加"全部版本"选项
    if (props.showAllVersions) {
      return [{ label: '全部版本', value: '' }, ...versionOptions]
    }

    return versionOptions
  }
  if (props.type === 'channel') {
    const res = await getAppChannel()
    const list: Array<string> = (res as any)?.data || []
    return list.map((name) => ({ label: String(name), value: name }))
  }
  return []
}

const doRemoteSearch = useDebounceFn(async (query: string) => {
  const list = await requestOptions(query)
  optionList.value = list
}, 250)

function handleRemoteSearch(query: string) {
  doRemoteSearch(query)
}

// initial fetch for remote
requestOptions('').then((list) => (optionList.value = list))

// 监听showAllVersions变化，重新获取选项
watch(() => props.showAllVersions, () => {
  if (props.type === 'version') {
    requestOptions('').then((list) => (optionList.value = list))
  }
})
</script>

<style scoped lang="scss">
</style>


