<template>
  <wd-popup
    v-model="visible"
    position="center"
    custom-style="border-radius: 16px; width: 80%; max-width: 400px;"
    :close-on-click-modal="false"
  >
    <view class="p-6">
      <!-- 标题 -->
      <view class="mb-6 text-center">
        <text class="text-lg text-gray-800 font-semibold">名次分析设置</text>
      </view>

      <!-- 表单内容 -->
      <view class="space-y-4">
        <!-- 前xx名(1) -->
        <view class="flex items-center justify-center gap-4">
          <text class="text-sm text-gray-700 font-medium">前xx名(1)</text>
          <text class="text-sm text-gray-500">-</text>
          <wd-input
            v-model="formData.rank_top_1"
            type="number"
            placeholder="请输入"
            class="w-20 text-center"
            :border="true"
          />
          <text class="text-sm text-gray-700">名</text>
        </view>

        <!-- 前xx名(2) -->
        <view class="flex items-center justify-center gap-4">
          <text class="text-sm text-gray-700 font-medium">前xx名(2)</text>
          <text class="text-sm text-gray-500">-</text>
          <wd-input
            v-model="formData.rank_top_2"
            type="number"
            placeholder="请输入"
            class="w-20 text-center"
            :border="true"
          />
          <text class="text-sm text-gray-700">名</text>
        </view>

        <!-- 前xx名(3) -->
        <view class="flex items-center justify-center gap-4">
          <text class="text-sm text-gray-700 font-medium">前xx名(3)</text>
          <text class="text-sm text-gray-500">-</text>
          <wd-input
            v-model="formData.rank_top_3"
            type="number"
            placeholder="请输入"
            class="w-20 text-center"
            :border="true"
          />
          <text class="text-sm text-gray-700">名</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="mt-6 flex gap-3">
        <wd-button type="info" class="flex-1" @click="handleCancel">
          取消
        </wd-button>
        <wd-button type="primary" class="flex-1" @click="handleConfirm">
          确定
        </wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup>
import { computed, reactive, watch } from 'vue'

interface RankSettings {
  rank_top_1: number
  rank_top_2: number
  rank_top_3: number
}

interface Props {
  modelValue: boolean
  settings: RankSettings
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', settings: RankSettings): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

const formData = reactive<RankSettings>({
  rank_top_1: 10,
  rank_top_2: 20,
  rank_top_3: 50,
})

// 监听弹窗打开，同步表单数据
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    Object.assign(formData, props.settings)
  }
})

function handleCancel() {
  visible.value = false
}

function handleConfirm() {
  const validations = [
    {
      condition: formData.rank_top_1 <= 0 || formData.rank_top_1 > 500,
      message: '前xx名(1)应在1-500之间',
    },
    {
      condition: formData.rank_top_2 <= 0 || formData.rank_top_2 > 500,
      message: '前xx名(2)应在1-500之间',
    },
    {
      condition: formData.rank_top_3 <= 0 || formData.rank_top_3 > 500,
      message: '前xx名(3)应在1-500之间',
    },
  ]

  const failedValidation = validations.find(v => v.condition)
  if (failedValidation) {
    uni.showToast({
      title: failedValidation.message,
      icon: 'none',
    })
    return
  }

  emit('confirm', { ...formData })
  visible.value = false
}
</script>

