<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

import { forceMoveWordToLevel } from '#/api'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '加入关卡',
  },
  diaData: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['update:modelValue', 'onRefresh'])

const show = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  },
})

const _formData = {
  wordId: null,
  levelNum: '',
  stageId: '',
  meaningId: '',
}
const formRef = ref<FormInstance | undefined>()
const formData = reactive<Record<string, any>>({
  ..._formData,
})
const levelNumRef = ref()

const rules = reactive<FormRules>({
  levelNum: [{ required: true, message: '关卡数不能为空', trigger: 'blur' }],
  stageId: [{ required: true, message: '阶段不能为空', trigger: 'blur' }],
  meaningId: [{ required: true, message: '阶段不能为空', trigger: 'blur' }],
})

function onOpen() {
  // onClear();
  formData.wordId = props.diaData.wordId
  if (!formData.stageId) {
    formData.stageId = props.diaData.stageList[1].id
  }
  formData.meaningId = props.diaData.shiyiList[0].id
  nextTick(() => {
    levelNumRef.value.focus()
  })
}

async function handleSave() {
  await formRef.value?.validate((valid, _) => {
    if (valid) {
      if (formData.levelNum > 0) {
        forceMoveWordToLevel(formData).then(() => {
          show.value = false
          // onClear();
          ElMessage({
            message: '加入关卡成功！',
            type: 'success',
          })
        })
      } else {
        ElMessage('只能输入正整数')
      }
    }
  })
}

// function onClear() {
//   Object.assign(formData, _formData)
// }
</script>
<template>
  <el-dialog
    v-model="show"
    width="30vw"
    :title="title"
    class="box"
    destroy-on-close
    @open="onOpen"
  >
    <el-form ref="formRef" label-width="80px" :model="formData" :rules="rules">
      <el-form-item label="关卡数" prop="levelNum">
        <el-input
          ref="levelNumRef"
          v-model="formData.levelNum"
          placeholder="请输入"
          type="number"
          @keydown.enter="handleSave"
        />
      </el-form-item>
      <el-form-item label="阶段" prop="stageId">
        <el-select
          v-model="formData.stageId"
          class="w-full"
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.diaData.stageList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="释义" prop="meaningId">
        <el-select
          v-model="formData.meaningId"
          class="w-full"
          placeholder="请选择"
        >
          <el-option
            v-for="item in props.diaData.shiyiList"
            :key="item.id"
            :label="item.typeAbbr + item.simpleDesc"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="handleSave"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
