<template>
  <div class="container">
    <div class="top-area">
      <div class="header-content">
        <span style="color: #000;font-size: 19px;font-weight: 600px;"><el-icon>
            <CollectionTag />
          </el-icon> {{ props.title }}</span>
        <span>双随机考试新增</span>
      </div>
      <!-- 步骤条区 -->
      <div class="step-area">
        <!-- <div class="header">
          双随机考试新增
        </div> -->
        <el-steps style="width: calc(100% - 500px);" :active="currentStep" @change="changeStep">
          <el-step title="试卷信息" @click="changeStepClick(0)" />
          <el-step title="随机信息" @click="changeStepClick(1)" />
          <el-step title="考试信息" @click="changeStepClick(2)" />
          <el-step title="随机抽取" @click="changeStepClick(3)" />
        </el-steps>
      </div>

      <!-- 内容区 -->
      <div class="content-box">
        <ksStep0 ref="step0" v-show="currentStep == 0" />
        <ksStep1 ref="step1" v-show="currentStep == 1" />
        <ksStep2 ref="step2" v-show="currentStep == 2" />
        <ksStep3 ref="step3" v-show="currentStep == 3" />
      </div>
    </div>
    <!-- 底部按钮区 start -->
    <div class="bottom-btn">
      <el-button style="margin-right: 30px" type="warning" @click="CloseEvent">返回</el-button>
      <el-button :disabled="currentStep == 0" style="margin-left: 10px" type="primary" @click="prevStep">上一步</el-button>
      <el-button :disabled="currentStep == 3" style="margin-left: 10px" type="primary" @click="nextStep">下一步</el-button>
      <el-button :disabled="currentStep != 3" :loading="loadingshow" style="margin-left: 10px" type="primary"
        @click="handleSave">
        <el-icon>
          <Search />
        </el-icon>
        <span>保存</span>
      </el-button>
    </div>
    <!-- 底部按钮区 end -->
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, reactive, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import ksStep0 from "./ksStep0.vue";
import ksStep1 from "./ksStep1.vue";
import ksStep2 from "./ksStep2.vue";
import ksStep3 from "./ksStep3.vue";
import { getApi, postApi, deleteApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  },
  title: String,
});
const loadingshow = ref(false)
const step0 = ref()
const step1 = ref()
const step2 = ref()
const step3 = ref()
/** 需要提交的参数 */
const needParams = ref({})
/**当前步骤数 */
const currentStep = ref(0);
const emits = defineEmits(["close", "ok"]);
/** 关闭事件 */
const CloseEvent = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits('close');
    })
    .catch(() => {
      // catch error
    })

}
const startSave = () => {
  loadingshow.value = true
  postApi(needParams.value, '/mosty-jcgl/exampaper/releaseExamDoubleRandomnessExam').then(res => {
    if (res) {
      ElMessage.success('发布成功')
      emits('ok')
      emits('close');
    }
  }).finally(() => {
    loadingshow.value = false
  })
}
/** 保存事件 */
const handleSave = () => {
  let isValidate = step3.value.check()

  if (!isValidate) return
  let data = step3.value.getFormData();

  needParams.value.examPeopleRandomList = data.examPeopleRandomList

  startSave()
}

const changeStepClick = (stepVal) => {
  // currentStep.value = stepVal
}
/** 改变步骤事件 */
const changeStep = (val) => {
  currentStep.value = val;
}
/** 上一步事件 */
const prevStep = () => {
  currentStep.value--;
  if (currentStep.value < 0) currentStep.value = 0;
}
/** 下一步事件 */
const nextStep = () => {
  let step = currentStep.value
  /** 是否有效数据 */
  let isValidate = false
  if (step == 0) {
    isValidate = step0.value.check()

    const data = step0.value.getFormData()

    needParams.value = data
  } else if (step == 1) {
    isValidate = step1.value.check()

    const data = step1.value.getFormData()

    needParams.value = {
      ...needParams.value,
      ...data
    }
  } else if (step == 2) {
    isValidate = step2.value.check()

    const data = step2.value.getFormData()

    needParams.value = {
      ...needParams.value,
      ...data
    }
  }
  // 校验失败 退出
  if (!isValidate) return
  // 校验成功 下一步
  currentStep.value++;
  if (currentStep.value > 3) currentStep.value = 3;
}
//初始化
onMounted(() => {

});

</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  // padding: 10px;

  .top-area {
    position: relative;
    height: calc(100% - 54px);

    .header-content {
      position: absolute;
      top: 10px;
      left: 20px;
      color: #000;
      font-size: 19px;
    }

    .content-box {
      height: calc(100% - 67px);
      overflow-y: auto;
      border-bottom: 2px solid #efefef;
      border-top: 2px solid #efefef;
    }

    .step-area {
      display: flex;
      justify-content: center;
      padding-top: 10px;
      // padding-bottom: 10px;
    }
  }
}


.bottom-btn {
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
}


// ::v-deep .el-dialog__body {
//   height: 70vh !important;
// }</style>
