<template>
  <div class="step1-container">
    <el-form ref="fromRef" :model="formData" :rules="rules" label-width="120px" style="display: block; width:600px;">
      <el-form-item label="试卷名称：" prop="name">
        <el-input v-model="formData.name" maxlength="80" placeholder="不能超过80个字" show-word-limit type="textarea"
          style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item label="试卷类型：" prop="type">
        <el-select class="pxdx_box" multiple v-model="formData.type" placeholder='请选择试卷类型' clearable
          style="width: 500px">
          <el-option v-for="item in D_BZ_KTKYWLX" :key="item" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="试题配置类型：" prop="pzlx">
        <el-select class="pxdx_box" v-model="formData.pzlx" disabled placeholder='请选择试题配置类型' clearable style="width: 500px">
          <el-option label="随机生成" value="0" />
          <el-option label="手动配置" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="试卷出题方式：" prop="ctfs">
        <el-select class="pxdx_box" v-model="formData.ctfs" clearable placeholder='请选择试卷出题方式' style="width: 500px">
          <el-option v-for="item in D_BZ_PXSSCTFS" :key="item" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="选项是否随机：" prop="xxsfsj">
        <el-radio-group v-model="formData.xxsfsj">
            <el-radio label="1">是</el-radio>
          <el-radio label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="是否发证：" prop="isCertificate">
        <el-radio-group v-model="formData.isCertificate">
            <el-radio label="1">是</el-radio>
          <el-radio label="2">否</el-radio>
        </el-radio-group>
      </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_PXSSCTFS,D_BZ_KTKYWLX } = proxy.$dict("D_BZ_PXSSCTFS","D_BZ_KTKYWLX")

const fromRef = ref()
/**表单数据 */
const formData = ref({
  pzlx: '0',// 设置为随机生成
  xxsfsj: '2',// 设置选项是否随机为否
  isCertificate: '2',// 设置是否发证为否
});
/**表单校验 */
const rules = reactive({
  type: [{ required: true, message: "试卷类型不能为空", trigger: "blur" }],
  name: [{ required: true, message: "试卷名称不能为空", trigger: "blur" }],
  pzlx: [{ required: true, message: "请选择配置类型", trigger: "change" }],
  ctfs: [{ required: true, message: "请选择试卷出题方式", trigger: "change" }],
});
/** 校验数据 */
const check = () => {
  fromRef.value.validate()
  const isValidate = formData.value.name && formData.value.type && formData.value.pzlx && formData.value.ctfs
  if (!isValidate) ElMessage.warning('请填写有效数据')
  return isValidate
}
/** 获取表单数据 */
const getFormData =()=>{
  let data = {...formData.value}
  data.type = data.type && data.type.join(',')
  return data
}
defineExpose({
  check,getFormData
})
</script>

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