Vue.component('MySuperGame', {
props: {
    // 双向绑定值
    value: {
        type: [String, Number, Array],
        default: ''
    },
    platform: {
        type: [String, Number],
        default: 0
    },
    // 初始默认值（用于回显）
    initialValue: {
        type: [String, Number, Array],
        default: ''
    },
    // 是否多选
    multiple: {
        type: Boolean,
        default: false
    },
    // 防抖时间（毫秒）
    debounceTime: {
        type: Number,
        default: 300
    },
    // 是否启用缓存
    enableCache: {
        type: Boolean,
        default: true
    },
    // 自定义结果格式化函数
    formatter: {
        type: Function,
        default: items => items.map(item => ({
            value: item.id+'',
            label: item.id+'-'+item.title+'-' + item.subtitle,
            gameInfo: item
        }))
    }
},
data() {
    return {
        localValue: this.value || this.initialValue,
        options: [],
        loading: false,
        searchKeyword: '',
        searchCache: new Map(),
        cancelToken: null
    }
},

watch: {
    'platform': {
        handler(newVal, oldVal) {
            if (newVal > 0 && newVal != oldVal) {
                this.localValue = '';                   // 清空绑定值
                this.options = [];                   // 清空绑定值
            }
        },
    },
    value(newVal) {
        this.localValue = newVal
    },
    localValue(newVal) {
        this.$emit('input', newVal)
        this.$emit('change', newVal)
        let gameNode=this.options.filter(item => {
            if(item.value==newVal){
                return true
            }
        })
        if(gameNode[0]){
            this.$emit('gamechange', gameNode[0].gameInfo)
        }
    }
},

created() {
    console.log('platform',this.platform)
    // 初始化加载默认值对应的选项
    if (this.localValue) {
        this.loadInitialValues()
    }
},

methods: {
    // 防抖搜索方法
    handleSearch: _.debounce( async function  (keyword) {
        this.searchKeyword = keyword.trim()
        if (!this.searchKeyword) {
            this.options = []
            return
        }
        this.loading = true
        this.cancelPreviousRequest()
        let response = await axios.post('/topic/card/getGameNodeSearch', {key: keyword, platform: this.platform,format:0})
            .catch(error => {
                if (!axios.isCancel(error)) {
                    console.error('Remote search failed:', error)
                    this.$message.error('搜索失败，请稍后重试')
                }
            })
            .finally(() => (this.loading = false))
        const items = this.formatter(response.data.data.gameList || [])
        if (this.enableCache) {
            this.searchCache.set(this.searchKeyword, items)
        }
        this.options = items

    }, 300),

    // 取消之前的请求
    cancelPreviousRequest() {
        if (this.cancelToken) {
            this.cancelToken('取消重复请求')
        }
    },

    // 加载初始值对应的选项
    async loadInitialValues() {
        try {
            this.loading = true
            const id =  this.localValue
            const response = await axios.post(`/topic/card/getGameNodeSearch`, {key: id, format: 0, platform: this.platform})
            this.options = this.formatter(response.data.data.gameList || [])
        } catch (error) {
            console.error('初始化加载失败:', error)
        } finally {
            this.loading = false
        }
    },

    // 高亮匹配文本
    highlight(label) {
        if (!this.searchKeyword) return label
        const regex = new RegExp(`(${this.searchKeyword})`, 'gi')
        return label.replace(regex, '<span class="highlight">$1</span>')
    }
},

template: `
  <el-select
      v-model="localValue"
      filterable
      clearable
      remote
      reserve-keyword
      placeholder="请输入游戏名或游戏ID"  
      :multiple="multiple"
      :remote-method="handleSearch"
      :loading="loading"
      :loading-text="'加载中...'"
      :no-match-text="'无匹配结果'"
      :no-data-text="'暂无数据'"
  >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    >
      <span v-html="highlight(item.label)"></span>
    </el-option>
  </el-select>
`

})