<template>
  <el-dialog
    v-model="visible"
    :title="dialogType === 'add' ? '新增大富翁-玩家' : '编辑大富翁-玩家'"
    width="600px"
    align-center
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="formData.phone"
          placeholder="请输入手机号"
          clearable
          maxlength="20"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="密码" prop="password" :rules="passwordRules">
        <el-input
          v-model="formData.password"
          type="password"
          placeholder="编辑留空则不修改"
          show-password
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <sa-switch v-model="formData.status" />
      </el-form-item>
      <el-form-item label="所属管理员" prop="admin_id">
        <el-select
          v-model="formData.admin_id"
          placeholder="选择后台管理员（可选）"
          clearable
          filterable
          style="width: 100%"
          :loading="systemUserOptionsLoading"
        >
          <el-option
            v-for="item in systemUserOptions"
            :key="item.id"
            :label="item.label || item.username || `#${item.id}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="平台币" prop="coin">
        <el-input-number
          v-model="formData.coin"
          :min="0"
          :precision="2"
          :disabled="dialogType === 'add'"
          placeholder="创建时默认0，不可改"
          style="width: 100%"
        />
      </el-form-item>
      <!-- lottery_config_id：空 = 自定义权重，否则 = DiceLotteryConfig.id；选择后该配置的五个 weight 会写入下方 player.*_weight -->
      <el-form-item label="彩金池配置" prop="lottery_config_id">
        <el-select
          v-model="formData.lottery_config_id"
          placeholder="留空则使用下方自定义权重，或选择彩金池"
          clearable
          filterable
          style="width: 100%"
          :loading="lotteryConfigLoading"
          @change="onLotteryConfigChange"
        >
          <el-option
            v-for="item in lotteryConfigOptions"
            :key="item.id"
            :label="(item.name && String(item.name).trim()) || `#${item.id}`"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 当前选中的 DiceLotteryConfig 数据展示 -->
      <el-form-item v-if="currentLotteryConfig" label="当前配置" class="current-config-block">
        <div class="current-lottery-config">
          <div class="config-row">
            <span class="config-label">名称：</span>
            <span>{{ currentLotteryConfig.name ?? '-' }}</span>
          </div>
          <div class="config-row">
            <span class="config-label">类型：</span>
            <span>{{ lotteryConfigTypeText(currentLotteryConfig.type) }}</span>
          </div>
          <div class="config-row">
            <span class="config-label">T1～T5 权重：</span>
            <span>{{ currentLotteryConfigWeightsText }}</span>
          </div>
          <div v-if="currentLotteryConfig.remark" class="config-row">
            <span class="config-label">备注：</span>
            <span>{{ currentLotteryConfig.remark }}</span>
          </div>
        </div>
      </el-form-item>
      <!-- lottery_config_id 为空时自定义权重可编辑；有值时来自所选 DiceLotteryConfig，仅展示不可编辑 -->
      <el-form-item label="T1池权重(%)" prop="t1_weight">
        <el-slider
          v-model="formData.t1_weight"
          :min="0"
          :max="100"
          :step="0.01"
          show-input
          :disabled="!isLotteryConfigEmpty()"
        />
      </el-form-item>
      <el-form-item label="T2池权重(%)" prop="t2_weight">
        <el-slider
          v-model="formData.t2_weight"
          :min="0"
          :max="100"
          :step="0.01"
          show-input
          :disabled="!isLotteryConfigEmpty()"
        />
      </el-form-item>
      <el-form-item label="T3池权重(%)" prop="t3_weight">
        <el-slider
          v-model="formData.t3_weight"
          :min="0"
          :max="100"
          :step="0.01"
          show-input
          :disabled="!isLotteryConfigEmpty()"
        />
      </el-form-item>
      <el-form-item label="T4池权重(%)" prop="t4_weight">
        <el-slider
          v-model="formData.t4_weight"
          :min="0"
          :max="100"
          :step="0.01"
          show-input
          :disabled="!isLotteryConfigEmpty()"
        />
      </el-form-item>
      <el-form-item label="T5池权重(%)" prop="t5_weight">
        <el-slider
          v-model="formData.t5_weight"
          :min="0"
          :max="100"
          :step="0.01"
          show-input
          :disabled="!isLotteryConfigEmpty()"
        />
      </el-form-item>
      <el-form-item v-if="isLotteryConfigEmpty()">
        <div class="text-gray-500 text-sm">
          五个池权重总和：<span :class="Math.abs(weightsSum - 100) > 0.01 ? 'text-red-500' : ''">{{
            weightsSum
          }}</span
          >% / 100%（必须为100%）
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import api from '../../../api/player/index'
  import lotteryConfigApi from '../../../api/lottery_config/index'
  import { ElMessage } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'

  const WEIGHT_FIELDS = ['t1_weight', 't2_weight', 't3_weight', 't4_weight', 't5_weight'] as const

  interface Props {
    modelValue: boolean
    dialogType: string
    data?: Record<string, any>
  }

  interface Emits {
    (e: 'update:modelValue', value: boolean): void
    (e: 'success'): void
  }

  const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    dialogType: 'add',
    data: undefined
  })

  const emit = defineEmits<Emits>()

  const formRef = ref<FormInstance>()

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

  const weightsSum = computed(() => {
    return WEIGHT_FIELDS.reduce((sum, key) => sum + Number(formData[key] ?? 0), 0)
  })

  /** 当前彩金池配置的 T1～T5 权重展示文案 */
  const currentLotteryConfigWeightsText = computed(() => {
    const c = currentLotteryConfig.value
    if (!c) return '-'
    const t1 = c.t1_weight ?? 0
    const t2 = c.t2_weight ?? 0
    const t3 = c.t3_weight ?? 0
    const t4 = c.t4_weight ?? 0
    const t5 = c.t5_weight ?? 0
    return `${t1}% / ${t2}% / ${t3}% / ${t4}% / ${t5}%`
  })

  /** 新增时密码必填，编辑时选填 */
  const passwordRules = computed(() =>
    props.dialogType === 'add' ? [{ required: true, message: '密码必需填写', trigger: 'blur' }] : []
  )

  const rules = reactive<FormRules>({
    username: [{ required: true, message: '用户名必需填写', trigger: 'blur' }],
    name: [{ required: true, message: '昵称必需填写', trigger: 'blur' }],
    phone: [{ required: true, message: '手机号必需填写', trigger: 'blur' }],
    status: [{ required: true, message: '状态必需填写', trigger: 'blur' }],
    coin: [{ required: true, message: '平台币必需填写', trigger: 'blur' }]
  })

  const initialFormData = {
    id: null as number | null,
    username: '',
    name: '',
    phone: '',
    password: '',
    status: 1 as number,
    /** 所属后台管理员 ID（SystemUser.id） */
    admin_id: null as number | null,
    coin: 0 as number,
    /** 彩金池配置 ID：空 = 自定义权重，否则 = DiceLotteryConfig.id */
    lottery_config_id: null as number | null,
    t1_weight: 0 as number,
    t2_weight: 0 as number,
    t3_weight: 0 as number,
    t4_weight: 0 as number,
    t5_weight: 0 as number
  }

  const formData = reactive({ ...initialFormData })

  /** 彩金池配置下拉选项（DiceLotteryConfig id、name） */
  const lotteryConfigOptions = ref<Array<{ id: number; name: string }>>([])
  /** 彩金池选项加载中 */
  const lotteryConfigLoading = ref(false)
  /** 后台管理员下拉选项（SystemUser） */
  const systemUserOptions = ref<
    Array<{ id: number; username: string; realname: string; label: string }>
  >([])
  /** 管理员选项加载中 */
  const systemUserOptionsLoading = ref(false)
  /** 当前选中的 DiceLotteryConfig 完整数据（用于展示） */
  const currentLotteryConfig = ref<Record<string, any> | null>(null)

  function lotteryConfigTypeText(type: unknown): string {
    const t = Number(type)
    if (t === 0) return '付费'
    if (t === 1) return '赠送'
    return t ? `类型${t}` : '-'
  }

  /** 是否为空/自定义权重（未选彩金池或选 0） */
  function isLotteryConfigEmpty(): boolean {
    const v = formData.lottery_config_id
    return v == null || v === 0
  }

  /** 根据当前 lottery_config_id 加载 DiceLotteryConfig，并将五个权重写入当前 player.*_weight */
  async function loadCurrentLotteryConfig() {
    const id = formData.lottery_config_id
    if (id == null || id === 0) {
      currentLotteryConfig.value = null
      return
    }
    try {
      const res = await lotteryConfigApi.read(id)
      const row = (res as any)?.data ?? (res as any)
      if (row && typeof row === 'object') {
        currentLotteryConfig.value = row
        WEIGHT_FIELDS.forEach((key) => {
          ;(formData as any)[key] = Number(row[key] ?? 0)
        })
      } else {
        currentLotteryConfig.value = null
      }
    } catch {
      currentLotteryConfig.value = null
    }
  }

  watch(
    () => props.modelValue,
    (newVal) => {
      if (newVal) initPage()
    }
  )

  /** 选择彩金池后，拉取该配置的五个权重并写入当前 player.*_weight，并更新当前配置展示 */
  async function onLotteryConfigChange(lotteryConfigId: number | null | undefined) {
    if (lotteryConfigId == null || lotteryConfigId === 0) {
      currentLotteryConfig.value = null
      return
    }
    try {
      const res = await lotteryConfigApi.read(lotteryConfigId)
      const row = (res as any)?.data ?? (res as any)
      if (row && typeof row === 'object') {
        WEIGHT_FIELDS.forEach((key) => {
          ;(formData as any)[key] = Number(row[key] ?? 0)
        })
        currentLotteryConfig.value = row
      } else {
        currentLotteryConfig.value = null
      }
    } catch (err) {
      console.warn('拉取彩金池配置失败', err)
      currentLotteryConfig.value = null
    }
  }

  /** 加载后台管理员选项 */
  async function loadSystemUserOptions() {
    systemUserOptionsLoading.value = true
    try {
      systemUserOptions.value = await api.getSystemUserOptions()
    } catch {
      systemUserOptions.value = []
    } finally {
      systemUserOptionsLoading.value = false
    }
  }

  const initPage = async () => {
    currentLotteryConfig.value = null
    Object.assign(formData, initialFormData)
    await Promise.all([loadLotteryConfigOptions(), loadSystemUserOptions()])
    if (props.data) {
      await nextTick()
      initForm()
      if (!isLotteryConfigEmpty()) {
        await loadCurrentLotteryConfig()
      }
    }
  }

  /** 从玩家控制器获取 DiceLotteryConfig id/name 列表，供 lottery_config_id 下拉使用 */
  async function loadLotteryConfigOptions() {
    lotteryConfigLoading.value = true
    try {
      lotteryConfigOptions.value = await api.getLotteryConfigOptions()
    } catch {
      lotteryConfigOptions.value = []
    } finally {
      lotteryConfigLoading.value = false
    }
  }

  const numKeys = [
    'id',
    'status',
    'coin',
    'lottery_config_id',
    't1_weight',
    't2_weight',
    't3_weight',
    't4_weight',
    't5_weight'
  ]

  const initForm = () => {
    if (!props.data) return
    for (const key of Object.keys(formData)) {
      if (!(key in props.data)) continue
      if (key === 'password') {
        ;(formData as any).password = ''
        continue
      }
      const val = props.data[key]
      if (numKeys.includes(key)) {
        if (key === 'id') {
          ;(formData as any)[key] = val != null ? Number(val) || null : null
        } else if (key === 'lottery_config_id' || key === 'admin_id') {
          const num = Number(val)
          ;(formData as any)[key] = val != null && !Number.isNaN(num) && num !== 0 ? num : null
        } else {
          ;(formData as any)[key] = Number(val) || 0
        }
      } else {
        ;(formData as any)[key] = val ?? ''
      }
    }
  }

  const handleClose = () => {
    visible.value = false
    formRef.value?.resetFields()
  }

  const handleSubmit = async () => {
    if (!formRef.value) return
    try {
      await formRef.value.validate()
      const useCustomWeights = isLotteryConfigEmpty()
      if (useCustomWeights && Math.abs(weightsSum.value - 100) > 0.01) {
        ElMessage.warning('五个池权重总和必须为100%')
        return
      }
      const payload = { ...formData }
      if (isLotteryConfigEmpty()) {
        ;(payload as any).lottery_config_id = null
      }
      if (props.dialogType === 'edit' && !payload.password) {
        delete (payload as any).password
      }
      if (props.dialogType === 'add') {
        await api.save(payload)
        ElMessage.success('新增成功')
      } else {
        await api.update(payload)
        ElMessage.success('修改成功')
      }
      emit('success')
      handleClose()
    } catch (error) {
      console.log('表单验证失败:', error)
    }
  }
</script>

<style lang="scss" scoped>
  .current-config-block {
    margin-bottom: 12px;
  }

  .current-lottery-config {
    padding: 10px 12px;
    background: var(--el-fill-color-light);
    border-radius: 6px;
    font-size: 13px;
    color: var(--el-text-color-regular);

    .config-row {
      margin-bottom: 6px;
      line-height: 1.5;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .config-label {
      color: var(--el-text-color-secondary);
      margin-right: 4px;
    }
  }
</style>
