<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
      <el-card shadow="always">
        <div slot="header" class="header-wrapper">
          <div class="line"></div>
          <span>考试信息</span>
        </div>

        <!-- 表单 -->
        <el-form :model="dialogForm" ref="dialogForm" size="small" label-width="80px" :rules="rules">
          <el-form-item label="考试名称" prop="examPaperName">
            <el-input v-model="dialogForm.examPaperName" placeholder="请输入考试名称" clearable v-no-whitespace style="width: 200px" />
          </el-form-item>
          <el-form-item label="选择试卷" required>
            <el-button type="primary" size="mini" @click="handleQuotePaper">引用试卷</el-button>
            <el-button type="primary" size="mini" @click="handleCreatePaper">创建试卷</el-button>
          </el-form-item>
          <el-form-item label="试卷名称" prop="examTemplateName">
            <el-input
              v-model="dialogForm.examTemplateName"
              placeholder="请输入试卷名称"
              clearable v-no-whitespace
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="题目数" prop="questionNum">
            <el-input
              v-model="dialogForm.questionNum"
              placeholder="请输入题目数"
              clearable v-no-whitespace
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="总分" prop="totalScore">
            <el-input
              v-model="dialogForm.totalScore"
              placeholder="请输入总分"
              clearable v-no-whitespace
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="及格分" prop="passScore">
            <el-input
              v-model="dialogForm.passScore"
              placeholder="请输入及格分"
              clearable v-no-whitespace
              maxlength="3"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="考试时间" prop="esamTime">
            <el-input
              v-model="dialogForm.esamTime"
              placeholder="请输入考试时间"
              clearable v-no-whitespace
              maxlength="3"
              style="width: 200px"
            />
            分钟
          </el-form-item>
          <el-form-item label="考前说明" prop="statement">
            <el-input
              v-model="dialogForm.statement"
              type="textarea"
              placeholder="请输入考前说明"
              clearable v-no-whitespace
              :rows="5"
              :maxlength="200"
              show-word-limit
              style="width: 200px"
            />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- <el-card style="margin-top: 20px">
        <div slot="header" class="header-wrapper">
          <div class="line"></div>
          <span>考试设置</span>
        </div>


        <el-form :model="examSettingForm" ref="examSettingForm" size="small" label-width="110px">
          <el-form-item label="考试次数" prop="examNumber" required>
            <el-radio-group v-model="examSettingForm.examNumber">
              <el-radio v-for="item in examNumber" :key="item.value" :label="item.value" :value="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
            <el-input-number
              v-model="examSettingForm.examNum"
              size="mini"
              :controls1="false"
              :disabled="examSettingForm.examNumber === 1"
              :min="1"
              :max="99999"
              style="width: 80px; margin-left: 10px"
            />
            次
          </el-form-item>
          <el-form-item label="切屏次数" prop="screenNumber">
            <el-radio-group v-model="examSettingForm.screenNumber">
              <el-radio v-for="item in screenNumber" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
            <el-input-number
              v-model="examSettingForm.screenNum"
              size="mini"
              :controls1="false"
              :disabled="examSettingForm.screenNumber === 1"
              :min="1"
              :max="99999"
              style="width: 80px; margin-left: 10px"
            />
            次
          </el-form-item>
          <el-form-item label="学员查看成绩" prop="collegeScore">
            <el-radio-group v-model="examSettingForm.collegeScore">
              <el-radio v-for="item in collegeScore" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card> -->

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="handleConfirm" v-preventReClick="3000">确定添加</el-button>
      </span>
    </el-dialog>

    <!-- 通用弹框 -->
    <GeneralDialog
      ref="GeneralDialog"
      title="引用试卷"
      labelName="试卷名称"
      :columns="generalDialogColumns"
      :selectionRows="dialogForm.selectionData"
      @getDialogData="getDialogData"
    />

    <!-- 创建试卷 -->
    <CreateTestPaperDialog ref="CreateTestPaperDialog" :isShow="true" @getDialogData="getDialogData" />
  </div>
</template>

<script>
import GeneralDialog from './GeneralDialog'
import CreateTestPaperDialog from './CreateTestPaperDialog'

export default {
  components: { GeneralDialog, CreateTestPaperDialog },
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogForm: {
        // 考试名称
        examPaperName: '',
        // 试卷名称
        examTemplateName: '',
        // 题目数
        questionNum: '',
        // 总分
        totalScore: '',
        // 及格分数
        passScore: '',
        // 考试时间
        esamTime: '',
        // 考前说明
        statement: '',
        examTemplateId: '', // 试卷id
        examTemplateType: 1,
        papeType: 1,
        selectionData: [],
      },
      // 考试设置-form
      examSettingForm: {
        // 考试次数
        examNumber: 1,
        examNum: null,
        // 切屏次数
        screenNumber: 1,
        screenNum: null,
        // 学员查看成绩
        collegeScore: 1,
      },
      // 考试次数-单选
      examNumber: [
        { label: '不限次数', value: 1 },
        { label: '自定义', value: 2 },
      ],
      // 切屏次数-单选
      screenNumber: [
        { label: '不限次数', value: 1 },
        { label: '自定义', value: 2 },
      ],
      // 学院查看成绩-单选
      collegeScore: [
        { label: '阅卷后', value: 1 },
        { label: '考试后', value: 2 },
      ],
      // 表单验证
      rules: {
        examPaperName: [{ required: true, message: '请输入考试名称', trigger: 'blur' }],
        esamTime: [
          { required: true, message: '请输入考试时间', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              // 1-300 之间 正整数
              if (!/^[1-9]\d*$/.test(value) || value < 1 || value > 300) {
                callback(new Error('请输入1-300之间的正整数'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
      },
      // 通用弹框-表格头
      generalDialogColumns: [
        { label: '试卷名称', prop: 'examTemplateName' },
        { label: '试题数', prop: 'questionNum' },
      ],
    }
  },
  methods: {
    // 打开弹框
    async openDialog(row) {
      console.log('🚀 ~ openDialog ~ row:', row)
      await (this.dialogVisible = true)
      // 重置表单
      this.$refs.dialogForm.resetFields()
      this.$nextTick(() => {
        if (row && row.length > 0) {
          this.dialogForm = { ...this.dialogForm, ...row[0] }
        }
      })
    },
    // 确定添加
    handleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        const data = JSON.parse(JSON.stringify(this.dialogForm))
        if (valid) {
          this.$emit('getDialogData', 1, [data])
          this.dialogVisible = false
        }
      })
    },
    // 引用试卷
    handleQuotePaper() {
      this.$refs.GeneralDialog.openDialog(1)
    },
    // 创建试卷
    handleCreatePaper() {
      this.$refs.CreateTestPaperDialog.show()
    },
    getDialogData(type, data) {
      console.log('🚀 ~ getDialogData ~ data:', data)
      this.dialogForm.selectionData = data
      this.dialogForm.examTemplateId = data[0].examTemplateId
      this.dialogForm.examTemplateName = data[0].examTemplateName
      this.dialogForm.questionNum = data[0].questionNum
      this.dialogForm.totalScore = data[0].totalScore
      this.dialogForm.passScore = data[0].passScore
    },
  },
}
</script>

<style lang="scss" scoped>
.header-wrapper {
  display: flex;
  align-items: center;
  font-weight: 800;
  .line {
    margin-right: 5px;
    width: 3px;
    height: 13px;
    background-color: #409eff;
  }
}
</style>
