<template>
  <div class="reward-config-input">
    <div v-for="(item, index) in rewardList" :key="index" class="reward-item">
      <el-select
        v-model="item.type"
        placeholder="货币类型"
        style="width: 120px"
        @change="handleChange"
      >
        <el-option
          v-for="opt in currencyOptions"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
      <el-input-number
        v-model="item.amount"
        :min="0"
        :max="999999999"
        placeholder="数量"
        style="width: 150px; margin-left: 8px"
        @change="handleChange"
      />
      <el-button
        type="danger"
        :icon="Delete"
        circle
        size="small"
        style="margin-left: 8px"
        @click="removeItem(index)"
        :disabled="rewardList.length <= 1"
      />
    </div>
    <el-button type="primary" link @click="addItem" style="margin-top: 8px">
      <el-icon><Plus /></el-icon>添加货币
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'
import type { RewardConfigItem } from '@/api/business/diamond'

interface Props {
  modelValue: string
}

const props = defineProps<Props>()

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

// 货币类型选项
const currencyOptions = [
  { label: '钻石', value: 'diamond' },
  { label: 'HH币', value: 'integral' },
  { label: '哈尼券', value: 'score' }
]

// 内部数据
const rewardList = ref<RewardConfigItem[]>([{ type: 'diamond', amount: 0 }])

// 解析JSON字符串
const parseRewardConfig = (jsonStr: string): RewardConfigItem[] => {
  if (!jsonStr) {
    return [{ type: 'diamond', amount: 0 }]
  }
  try {
    const parsed = JSON.parse(jsonStr)
    if (Array.isArray(parsed) && parsed.length > 0) {
      return parsed.map(item => ({
        type: item.type || 'diamond',
        amount: item.amount || 0
      }))
    }
  } catch {
    // 解析失败，返回默认值
  }
  return [{ type: 'diamond', amount: 0 }]
}

// 序列化为JSON字符串
const serializeRewardConfig = (list: RewardConfigItem[]): string => {
  const validList = list.filter(item => item.type && item.amount > 0)
  if (validList.length === 0) {
    return ''
  }
  return JSON.stringify(validList)
}

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
  rewardList.value = parseRewardConfig(newVal)
}, { immediate: true })

// 处理变化
const handleChange = () => {
  const jsonStr = serializeRewardConfig(rewardList.value)
  emit('update:modelValue', jsonStr)
}

// 添加货币配置
const addItem = () => {
  rewardList.value.push({ type: 'diamond', amount: 0 })
}

// 移除货币配置
const removeItem = (index: number) => {
  if (rewardList.value.length > 1) {
    rewardList.value.splice(index, 1)
    handleChange()
  }
}

onMounted(() => {
  rewardList.value = parseRewardConfig(props.modelValue)
})
</script>

<style scoped>
.reward-config-input {
  width: 100%;
}

.reward-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.reward-item:last-child {
  margin-bottom: 0;
}
</style>
