<template>
  <el-form ref="form" :model="form" label-width="80px" label-position="top">
    <el-form-item label="设置考试时间">
      <mx-date-range-picker
        size="mini"
        v-model="form.time"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </el-form-item>
    <el-form-item label="设置阅卷模式">
      <el-radio-group v-model="form.scoringType" size="mini">
        <el-radio label="1" border>学生</el-radio>
        <el-radio label="2" border>老师</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="设置考试计时">
      <el-radio-group v-model="form.mode" size="mini">
        <el-radio label="90" border>90分钟</el-radio>
        <el-radio label="120" border>120分钟</el-radio>
        <div style="flex: 1;">
          <el-input size="mini" v-model="form.mode" type="number" min="0" placeholder="请输入时间" >
            <template slot="append">分钟</template>
          </el-input>
        </div>
      </el-radio-group>

      <div style="color: #999">
        是否公开成绩
        <el-switch
          style="margin-left: 10px"
          size="mini"
          v-model="form.publish"
          active-color="#13ce66"
          inactive-color="#999"
        >
        </el-switch>
      </div>
    </el-form-item>
    <el-form-item label="选择年级组">
      <el-radio-group
        v-model="form.gradeId"
        size="mini"
        v-if="gradeData.length > 0"
      >
        <el-radio
          v-for="gradeItem in gradeData"
          :key="gradeItem.code"
          :label="gradeItem.code"
          border
          >{{ gradeItem.name }}</el-radio
        >
      </el-radio-group>
      <div v-else style="color: #dbdbdb">未加入年级</div>
      <div class="checkbox-list">
        <el-checkbox label="1" @change="allCheckToggle">全部</el-checkbox>
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in clbumData"
            :key="item.id"
            :disabled="disabledList.includes(item.id)"
            :label="item.id"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </el-form-item>
    <el-form-item class="text-center">
      <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
      <el-button type="warning" @click="save()">确定设置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { openExamination } from "@/api/webApi/front";
import * as back from "@/api/webApi/back";
import * as system from "@/api/webApi/system";

export default {
  props: {
    evaluationId: {
      type: Number | String,
      default: "",
    },
    disabledList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      gradeLoading: false,
      gradeData: [],
      clbumData: [],
      checkList: [],
      // 表单参数
      form: {
        publish: false,
      },
    };
  },
  watch: {
    "form.gradeId": function (value) {
      this.checkList = [];
      this.clbumData = [];
      if (value) {
        let subjectParam = {
          gradeId: value,
        };
        back
          .getUserClasses(subjectParam)
          .then((response) => {
            this.clbumData = response.data;
          })
          .catch((err) => {
            this.loading = false;
          });
      }
    },
  },
  created() {
      this.getUserGrade();
  },
  methods: {
    save() {
      if (!this.form.time || this.form.time.length == 0) {
        this.$message.error("请选择考试时间！");
        return;
      }
      if (!this.form.scoringType) {
        this.$message.error("请选择阅卷模式！");
        return;
      }
      if (!this.form.mode) {
        this.$message.error("请选择考试模式！");
        return;
      }
      if (!this.form.publish) {
        this.form.publish = false;
      }
      if (this.checkList.length == 0) {
        this.$message.error("请选择班级！");
        return;
      }

      console.log(this.form);
      let Ajax = {
        classIds: this.checkList, //班级
        beginTime: this.form.time[0],
        endTime: this.form.time[1],
        mode: this.form.mode,
        scoringType: this.form.scoringType,
        evaluationId: this.evaluationId,
        publish: this.form.publish,
      };
      openExamination(Ajax)
        .then((response) => {
          this.$message.success("开启成功");
          this.$emit('openSuccess');
        })
        .catch((err) => {});
    },
    getUserGrade() {
      this.gradeLoading = true;
      let subjectParam = {
        pharseId: '',
      };
      system
        .getPharseGradeList(subjectParam)
        .then((response) => {
          let data = [];
          response.rows.forEach((item2) => {
            if (!data.find((i) => i.code == item2.gradeId)) {
              data.push({
                code: item2.gradeId,
                name: item2.grade.gradename,
              });
            }
          });
          this.gradeData = data;
        })
        .catch((err) => {
          this.gradeLoading = false;
        });
    },
    allCheckToggle(val) {
      this.checkList = [];
      if (val) {
        this.clbumData.forEach((item) => {
          if (this.disabledList.indexOf(item.id) != -1) {
          } else {
            this.checkList.push(item.id);
          }
        });
      }
    },
  },
};
</script>
<style scoped>
/deep/ .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-form-item--medium .el-form-item__label {
  padding: 0;
}

/deep/ .el-radio-group {
  display: flex;
  flex-wrap: wrap;
}

/deep/ .checkbox-list {
  border: 1px solid #999;
  padding: 10px;
  margin: 20px 0;
}

.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0;
  margin-bottom: 10px;
}
</style>
