<!--分级要求配置-->
<template>
  <div class="page-container basicConfiguration-gradingConfiguration">
    <div class="top-button-box">
      <p :class="checkIndex == 1 ?'check-p':''" @click="checkButton(1)">Ⅰ级</p>
      <p :class="checkIndex == 2 ?'check-p':''" @click="checkButton(2)">Ⅱ级</p>
      <p :class="checkIndex == 3 ?'check-p':''" @click="checkButton(3)">Ⅲ级</p>
      <p :class="checkIndex == 4 ?'check-p':''" @click="checkButton(4)">Ⅳ级</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box" :model="newData" ref="form" :rules="rules" label-width="0">
        <div class="title-box">
          <p>用户类别</p>
          <p>第一学年学时要求</p>
          <p>后续学年学时要求</p>
        </div>
        <div class="input-box">
          <p class="input-title-p">本科生</p>
          <div class="input-min-box">
            <el-form-item label="" prop="underInitMinHour">
              <el-input-number
                class="form-input-number"
                style="width:160px"
                :min="0"
                :max="9999"
                :step="0.1" :precision="1" step-strictly
                v-model="newData.underInitMinHour">
              </el-input-number>
            </el-form-item>
          </div>
          <div class="input-min-box">
            <el-form-item label="" prop="underFollowMinHour">
              <el-input-number
                class="form-input-number"
                style="width:160px"
                :min="0"
                :max="9999"
                :step="0.1" :precision="1" step-strictly
                v-model="newData.underFollowMinHour">
              </el-input-number>
            </el-form-item>
          </div>
        </div>
        <div class="input-box">
          <p class="input-title-p">硕士研究生</p>
          <div class="input-min-box">
            <el-form-item label="" prop="masterInitMinHour">
              <el-input-number
                class="form-input-number"
                style="width:160px"
                :min="0"
                :max="9999"
                :step="0.1" :precision="1" step-strictly
                v-model="newData.masterInitMinHour">
              </el-input-number>
            </el-form-item>
          </div>
          <div class="input-min-box">
            <el-form-item label="" prop="masterFollowMinHour">
              <el-input-number
                class="form-input-number"
                style="width:160px"
                :min="0"
                :max="9999"
                :step="0.1" :precision="1" step-strictly
                v-model="newData.masterFollowMinHour">
              </el-input-number>
            </el-form-item>
          </div>
        </div>
        <div class="input-box">
          <p class="input-title-p">博士生</p>
          <div class="input-min-box">
            <el-form-item label="" prop="phdInitMinHour">
              <el-input-number
                class="form-input-number"
                style="width:160px"
                :min="0"
                :max="9999"
                :step="0.1" :precision="1" step-strictly
                v-model="newData.phdInitMinHour">
              </el-input-number>
            </el-form-item>
          </div>
          <div class="input-min-box">
            <el-form-item label="" prop="phdFollowMinHour">
              <el-input-number
                class="form-input-number"
                style="width:160px"
                :min="0"
                :max="9999"
                :step="0.1" :precision="1" step-strictly
                v-model="newData.phdFollowMinHour">
              </el-input-number>
            </el-form-item>
          </div>
        </div>
        <div class="input-box">
          <p class="input-title-p">教职工</p>
          <div class="input-min-box">
            <el-form-item label="" prop="facInitMinHour">
              <el-input-number
                class="form-input-number"
                style="width:160px"
                :min="0"
                :max="9999"
                :step="0.1" :precision="1" step-strictly
                v-model="newData.facInitMinHour">
              </el-input-number>
            </el-form-item>
          </div>
          <div class="input-min-box">
            <el-form-item label="" prop="facFollowMinHour">
              <el-input-number
                class="form-input-number"
                style="width:160px"
                :min="0"
                :max="9999"
                :step="0.1" :precision="1" step-strictly
                v-model="newData.facFollowMinHour">
              </el-input-number>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  import { examElConfigValueMap,examElConfigSave } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'gradingConfiguration',
    props:{
      propsData:{},
    },
    data(){
      return{
        checkIndex:1,
        newData:{
          underInitMinHour:0,
          underFollowMinHour:0,
          masterInitMinHour:0,
          masterFollowMinHour:0,
          phdInitMinHour:0,
          phdFollowMinHour:0,
          facInitMinHour:0,
          facFollowMinHour:0,
        },
        rules:{
          // gradeStudyHour: [
          //   { required: true, message: "请输入学时计算", trigger: "blur" },
          //   { required: true, message: "请输入学时计算", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // levelOneInitMinHour: [
          //   { required: true, message: "请输入第一学年完成所需学时", trigger: "blur" },
          //   { required: true, message: "请输入第一学年完成所需学时", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // levelOneFollowMinHour: [
          //   { required: true, message: "请输入后续每学年完成所需学时", trigger: "blur" },
          //   { required: true, message: "请输入后续每学年完成所需学时", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // leveltwoInitMinHour: [
          //   { required: true, message: "请输入第二学年完成所需学时", trigger: "blur" },
          //   { required: true, message: "请输入第二学年完成所需学时", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // levelTwoFollowMinHour: [
          //   { required: true, message: "请输入后续每学年完成所需学时", trigger: "blur" },
          //   { required: true, message: "请输入后续每学年完成所需学时", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // levelThreeInitMinHour: [
          //   { required: true, message: "请输入第三学年完成所需学时", trigger: "blur" },
          //   { required: true, message: "请输入第三学年完成所需学时", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // levelThreeFollowMinHour: [
          //   { required: true, message: "请输入后续每学年完成所需学时", trigger: "blur" },
          //   { required: true, message: "请输入后续每学年完成所需学时", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // levelFourInitMinHour: [
          //   { required: true, message: "请输入第四学年完成所需学时", trigger: "blur" },
          //   { required: true, message: "请输入第四学年完成所需学时", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // levelFourFollowMinHour: [
          //   { required: true, message: "请输入后续每学年完成所需学时", trigger: "blur" },
          //   { required: true, message: "请输入后续每学年完成所需学时", validator: this.spaceJudgment, trigger: "blur" }
          // ],
        },
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      //切换按钮
      checkButton(val){
        if(this.checkIndex != val){
          this.$set(this,'checkIndex',val);
          this.initialize();
        }
      },
      initialize(){
        examElConfigValueMap({configType:this.checkIndex}).then(response => {
          this.$set(this,'newData',response.data);
        });
      },
      //重置
      resetButton(){
        let self = this;
        this.$confirm('确认重置?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          this.initialize();
        }).catch(() => {});
      },
      //提交
      submitButton(){
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('确认提交?', "提示", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              const list = Object.entries(self.newData).map(([key, value]) => ({
                configType: self.checkIndex,
                configCode: key,
                configValue: value // 确保 configValue 是字符串类型
              }));
              examElConfigSave(list).then(response => {
                self.msgSuccess(response.message);
                self.initialize();
              });
            }).catch(() => {});
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .basicConfiguration-gradingConfiguration{
    overflow: hidden;
    .top-button-box{
      display: flex;
      margin:30px 0 0 40px;
      p{
        text-align: center;
        width:100px;
        height:40px;
        line-height:40px;
        font-size:14px;
        color:#999;
        border:1px solid #999;
        border-radius:4px;
        margin:0 20px 0 0;
        cursor: pointer;
      }
      .check-p{
        color:#fff;
        background-color: #0183fa;
        border:1px solid #0183fa;
      }
    }
    .content-box{
      flex:1;
      display: flex;
      padding:20px;
      .title-box{
        width:1000px;
        display: flex;
        padding:0 20px;
        border-bottom:1px solid #dedede;
        margin-left:20px;
        p{
          height:80px;
          line-height:80px;
        }
        p:nth-child(1){
          flex:1;
        }
        p:nth-child(2){
          width:200px;
        }
        p:nth-child(3){
          width:200px;
        }
      }
      .input-box{
        width:1000px;
        display: flex;
        border-bottom:1px solid #dedede;
        padding:0 20px;
        margin-left:20px;
        .input-title-p{
          flex:1;
          height:80px;
          line-height:80px;
        }
        .input-min-box{
          width:200px;
          height:40px;
          margin-top:20px;
        }
      }
    }
  }
</style>
