<template>
  <div class="step2-container">
    <el-form ref="fromRef" :model="formData" :rules="rules" label-width="200px"
      style="display: block; width: 100%; max-height: 72vh" :inline="true" label-suffix="：">
      <el-form-item label="开始时间" prop="startTime" style="width:45%">
        <el-date-picker v-model="formData.startTime" style="width:100%;" type="datetime" format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm" />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime" style="width:45%">
        <el-date-picker v-model="formData.endTime" style="width:100%;" type="datetime" format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm" />
      </el-form-item>
      <el-form-item label="可考试次数" prop="kcjcs" style="width:45%">
        <el-input v-model="formData.kcjcs" type="number" clearable style="width:100%;">
          <template #append>次</template></el-input>
      </el-form-item>
      <el-form-item label="考题是否随机" prop="sflx" style="width:45%">
        <el-select v-model="formData.sflx" clearable style="width:100%;">
          <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否查看错题" prop="sfckct" style="width:45%">
        <el-select v-model="formData.sfckct" clearable style="width:100%;">
          <el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="合格分数" prop="hgfs" style="width:45%">
        <el-input v-model="formData.hgfs" type="number" clearable style="width:100%;">
          <template #append>分</template></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  getCurrentInstance,
  defineExpose,
} from "vue";
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF");
/** 表单ref */
const fromRef = ref();
/**表单数据 */
const formData = ref({
  hgfs: '80',
  kcjcs: '3'
});

/**表单校验 */
const rules = reactive({
  startTime: [{ trigger: "change", required: true, message: "请选择开始时间" }],
  endTime: [{ trigger: "change", required: true, message: "请选择结束时间" }],
  sfckct: [{ trigger: "change", required: true, message: "请选择是否查看错题" }],
  sflx: [{ trigger: "change", required: true, message: "请选择是考题是否随机" }],
  kcjcs: [{ trigger: "change", required: true, message: "请输入可考试次数" }],
  hgfs: [{ trigger: "change", required: true, message: "请输入合格分数" }],
});


/** 获取表单数据 */
const getFormData = () => {
  return formData.value
}
/** 校验数据 */
const check = () => {
  fromRef.value.validate()
  const { startTime, endTime, sfckct, sflx } = formData.value
  const isValidate = startTime && endTime && sfckct && sflx
  if (!isValidate) ElMessage.warning('请填写有效数据')
  if (!isValidate) return false
  // 结束时间大于开始时间
  if (new Date(endTime) < new Date(startTime)) {
    ElMessage.warning('结束时间必须大于开始时间')
    return false
  }
  return true

};
defineExpose({
  check,
  getFormData
});
</script>

<style scoped lang="scss">
.step2-container {
  display: flex;
  justify-content: center;
  height: 100%;
  padding-top: 50px;
}
</style>
