<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">
        <!-- 优秀得分率 -->
        <view class="flex items-center justify-center gap-4">
          <text class="text-sm text-gray-700 font-medium">优秀得分率</text>
          <text class="text-sm text-gray-500">≥</text>
          <wd-input
            v-model="formData.excellent_scoring_rate"
            type="number"
            placeholder="请输入"
            class="w-20 text-center"
            :border="true"
          />
          <text class="text-sm text-gray-700">%</text>
        </view>

        <!-- 良好得分率 -->
        <view class="flex items-center justify-center gap-4">
          <text class="text-sm text-gray-700 font-medium">良好得分率</text>
          <text class="text-sm text-gray-500">≥</text>
          <wd-input
            v-model="formData.good_scoring_rate"
            type="number"
            placeholder="请输入"
            class="w-20 text-center"
            :border="true"
          />
          <text class="text-sm text-gray-700">%</text>
        </view>

        <!-- 及格得分率 -->
        <view class="flex items-center justify-center gap-4">
          <text class="text-sm text-gray-700 font-medium">及格得分率</text>
          <text class="text-sm text-gray-500">≥</text>
          <wd-input
            v-model="formData.pass_scoring_rate"
            type="number"
            placeholder="请输入"
            class="w-20 text-center"
            :border="true"
          />
          <text class="text-sm text-gray-700">%</text>
        </view>

        <!-- 年级前N名 -->
        <view class="flex items-center justify-center gap-4">
          <text class="text-sm text-gray-700 font-medium">年级前N名</text>
          <text class="text-sm text-gray-500">-</text>
          <wd-input
            v-model="formData.top_n"
            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 OverviewSettings {
  excellent_scoring_rate: number
  good_scoring_rate: number
  pass_scoring_rate: number
  top_n: number
}

interface Props {
  modelValue: boolean
  settings: OverviewSettings
}

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

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

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

const formData = reactive<OverviewSettings>({
  excellent_scoring_rate: 85,
  good_scoring_rate: 75,
  pass_scoring_rate: 60,
  top_n: 50,
})

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

function handleCancel() {
  visible.value = false
}

function handleConfirm() {
  const validations = [
    {
      condition: formData.excellent_scoring_rate <= 0 || formData.excellent_scoring_rate > 100,
      message: '优秀分数线应在1-100之间',
    },
    {
      condition: formData.good_scoring_rate <= 0 || formData.good_scoring_rate > 100,
      message: '良好分数线应在1-100之间',
    },
    {
      condition: formData.pass_scoring_rate <= 0 || formData.pass_scoring_rate > 100,
      message: '及格分数线应在1-100之间',
    },
    {
      condition: formData.top_n <= 0 || formData.top_n > 1000,
      message: '前N名应在1-1000之间',
    },
  ]

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

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

