<template>
  <div class="task-tab">
    <div v-if="isCreator">
      <el-button v-if="coderId"
                 @click="handleAddCoderClick"
                 icon="el-icon-circle-plus-outline"
                 style="color: #8dc9e2">Coder测试
      </el-button>
      <el-button v-if="evalId"
                 @click="handleAddEvalClick"
                 icon="el-icon-circle-plus-outline"
                 style="color: #f5b86e;">Eval测试
      </el-button>
      <el-timeline>
        <el-timeline-item
            v-for="task in courseTaskList"
            :key="task['id']"
            :timestamp="task['examId'] ? task.startTime.substring(0, 16) + ' — ' + task.endTime.substring(0, 16) : timestampToTime(task['startAt'] * 1000) + ' — ' + timestampToTime(task['endAt'] * 1000)"
            :color="courseTaskStatusColor(task)" @click="toTask(task)">
          <el-row>
            <el-tag v-if="task['examId']" class="timeline-content" size="small" color="#f5b86e" effect="dark"
                    style="border: none">E
            </el-tag>
            <el-tag v-else class="timeline-content" size="small" color="#8dc9e2" effect="dark"
                    style="border: none">C
            </el-tag>
            <el-row v-if="task['examId']" class="timeline-content">
              <el-tag v-if="this.state(task)==='NOT_STARTED'" size="small">未开始</el-tag>
              <el-tag v-else-if="this.state(task)==='RUNNING'" size="small" type="success">进行中</el-tag>
              <el-tag v-else-if="this.state(task)==='CLOSED'" size="small" type="info">已关闭</el-tag>
              <el-tag v-else-if="this.state(task)==='FINISHED'" size="small" type="info">已结束</el-tag>
            </el-row>
            <el-row v-else class="timeline-content">
              <el-tag v-if="this.state(task)==='NOT_STARTED'" size="small">未开始</el-tag>
              <el-tag v-else-if="this.state(task)==='RUNNING'" size="small" type="success">进行中</el-tag>
              <el-tag v-else-if="this.state(task)==='CLOSED'" size="small" type="info">已关闭</el-tag>
              <el-tag v-else-if="this.state(task)==='FINISHED'" size="small" type="info">已结束</el-tag>
            </el-row>
            <el-row v-if="task['examId']" class="task-title timeline-content">
              {{ task["examName"] }}
            </el-row>
            <el-row v-else class="task-title timeline-content">
              {{ task.name }}
            </el-row>
          </el-row>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div v-if="isStudent">
      <el-timeline>
        <el-timeline-item
            v-for="task in courseTaskList"
            :key="task['id']"
            :timestamp="task['examId'] ? task.startTime.substring(0, 16) + ' — ' + task.endTime.substring(0, 16) : timestampToTime(task['startAt'] * 1000) + ' — ' + timestampToTime(task['endAt'] * 1000)"
            :color="courseTaskStatusColor(task)" @click="toTask(task)">
          <el-row>
            <el-tag v-if="task['examId']" class="timeline-content" size="small" color="#f5b86e" effect="dark"
                    style="border: none">E
            </el-tag>
            <el-tag v-else class="timeline-content" size="small" color="#8dc9e2" effect="dark"
                    style="border: none">C
            </el-tag>
            <el-row v-if="task['examId']" class="timeline-content">
              <el-tag v-if="this.state(task)==='NOT_STARTED'" size="small">未开始</el-tag>
              <el-tag v-else-if="this.state(task)==='RUNNING' && task['isJoined']" size="small" type="success">
                已参加
              </el-tag>
              <el-tag v-else-if="this.state(task)==='RUNNING' && !task['isJoined']" size="small">未参加</el-tag>
              <el-tag v-else-if="this.state(task)==='FINISHED'" size="small" type="info">已结束</el-tag>
              <el-tag v-else-if="this.state(task)==='CLOSED'" size="small" type="info">已关闭</el-tag>
            </el-row>
            <el-row v-else class="timeline-content">
              <el-tag v-if="this.state(task)==='NOT_STARTED'" size="small">未开始</el-tag>
              <el-tag v-else-if="this.state(task)==='RUNNING' && task['joined']" size="small" type="success">已参加
              </el-tag>
              <el-tag v-else-if="this.state(task)==='RUNNING' && !task['joined']" size="small">未参加</el-tag>
              <el-tag v-else-if="this.state(task)==='CLOSED'" size="small" type="info">已关闭</el-tag>
              <el-tag v-else-if="this.state(task)==='FINISHED'" size="small" type="danger">已结束</el-tag>
            </el-row>
            <el-row v-if="task['examId']" class="task-title timeline-content">
              {{ task["examName"] }}
            </el-row>
            <el-row v-else class="task-title timeline-content">
              {{ task.name }}
            </el-row>
          </el-row>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
  <!-- 创建Coder考试-->
  <el-dialog v-model="coderExamDialog" :before-close="handleExamFormCancel" :width="1200"
             :title="coderExamForm.dialogTitle">
    <el-form ref="coderExamFormRef" :model="coderExamForm" :rules="coderExamFormRules" label-width="150px">
      <el-form-item label="所属课程" prop="course">
        <el-input disabled :placeholder="courseName"/>
      </el-form-item>
      <el-form-item label="测试名称" prop="name">
        <el-input class="course-form-item" v-model="coderExamForm.name" placeholder="请输入测试名称"></el-input>
      </el-form-item>
      <el-form-item label="测试时间" prop="range">
        <el-date-picker v-model="coderExamForm.range" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="允许学生查看控制台">
        <el-switch v-model="coderExamForm.isConsoleOutputShownForStu" :disabled="switchExamDisabled" active-text="开启"
                   inactive-text="不开启"/>
      </el-form-item>
      <el-form-item label="启用代码分析">
        <el-switch v-model="coderExamForm.isCodeAnalysisNeeded" :disabled="switchExamDisabled" active-text="开启"
                   inactive-text="不开启"/>
      </el-form-item>
      <el-form-item label="题目列表">
        <el-button type="text" @click="showProblemDialog">选择题目</el-button>
      </el-form-item>
      <el-form-item v-if="$store.state.problem.cart.length">
        <el-collapse accordion>
          <el-collapse-item
              v-for="problem in $store.state.problem.cart"
              :key="problem.id"
              :name="problem.id"
          >
            <template #title>
              <span>{{ problem.name }}</span>
              <el-tag
                  class="problem-type"
                  size="small" round style="margin-left: 15px"
              >{{ problem.type }}</el-tag>
            </template>
            <b>题目描述：</b>
            <span class="problem-description" style="line-height: 30px">{{ problem.description }}</span>
            <div class="remove-button" style="float: right;margin-right: 20px">
              <el-button
                  type="danger"
                  size="mini"
                  @click="$store.commit('removeProblem', problem)"
              >移除该题
              </el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form-item>
    </el-form>
    <div style="margin: auto;width: fit-content">
      <el-button type="primary" @click="handleExamCreate">确定</el-button>
      <el-button @click="handleExamFormCancel">取消</el-button>
    </div>
  </el-dialog>
  <!-- 展示Coder所有题目-->
  <el-dialog v-model="coderProblemDialog" :width="1200">
    <el-input v-model="dialogProblemName"
              style="width:200px;"
              placeholder="搜索"
    />
    <el-select v-model="dialogProblemTypeStr" style="width: 300px" @change="fetchProblemData(1)">
      <el-option v-for="item in problemTypeOptions" :key="item.value" :value="item.value">
        {{ item.label }}
      </el-option>
    </el-select>
    <el-table :data="problemList">
      <el-table-column type="expand">
        <template #default="props">
          <div>{{ props.row.description }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column label="类型">
        <template #default="scope">
          <span>{{ problemTypeToTagContent(scope.row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上传时间">
        <template #default="scope">
          <span>{{ formatTimestamp(scope.row.createdAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button
              type="primary"
              size="mini"
              @click="checkDetails"
          >详情
          </el-button
          >
          <el-button
              v-if="removeEnable(scope.row)"
              type="danger"
              size="mini"
              @click="$store.commit('removeProblem', scope.row)"
          >移出试题清单
          </el-button
          >
          <el-button
              v-else-if="addEnable(scope.row)"
              type="success"
              size="mini"
              @click="$store.commit('addProblem', scope.row)"
          >加入试题清单
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        style="margin-top: 10px;"
        :total="problemPageInfo.total"
        @current-change="changePage"
    />
    <div style="display: flex; justify-content: flex-end;">
      <el-button type="primary" size="large" @click="coderProblemDialog = false">确认</el-button>
      <el-button type="danger" size="large" @click="clearProblemCart">取消</el-button>
    </div>
  </el-dialog>

  <!-- 创建Eval考试-->
  <el-dialog v-model="evalExamDialog" :before-close="handleEvalExamFormCancel" :width="1200"
             :title="evalExamDialogTitle">
    <el-form ref="evalExamFormRef" :model="evalExamForm" :rules="evalExamFormRules" label-width="150px">
      <el-form-item label="所属课程" prop="course">
        <el-input disabled :placeholder="courseName"/>
      </el-form-item>
      <el-form-item label="测试名称" prop="examName">
        <el-input class="course-form-item" v-model="evalExamForm.examName" placeholder="请输入测试名称"></el-input>
      </el-form-item>
      <el-form-item label="职位" prop="position">
        <el-input class="course-form-item" v-model="evalExamForm.position" placeholder="请输入职位名称"></el-input>
      </el-form-item>
      <el-form-item label="技能点" prop="skills">
        <el-select v-model="evalExamForm.skills" multiple placeholder="请选择技能点">
          <el-option v-for="item in skillList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="预期难度" prop="difficulty">
        <el-input v-model.number="evalExamForm.difficulty"/>
      </el-form-item>
      <el-form-item label="测试时间" prop="range">
        <el-date-picker v-model="evalExamForm.range" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="在线监考">
        <el-switch v-model="evalExamForm.antiCheating" active-text="开启"
                   inactive-text="不开启"/>
      </el-form-item>
      <el-form-item label="需要邀请码加入">
        <el-switch v-model="evalExamForm.isPrivate" active-text="是"
                   inactive-text="否"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input class="course-form-item" v-model="evalExamForm.comment" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <div style="margin: auto;width: fit-content">
      <el-button type="primary" :disabled="!valid" @click="createEvalExam">创建评测</el-button>
      <el-button @click="handleEvalExamFormCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import portal from "@/utils/portal/portal";
import {ElMessage, ElMessageBox} from "element-plus";
import {formatTimestamp, problemTypeOptions, problemTypeToTagContent} from "@/utils/coder-utils";
import {toArray} from "core-js/internals/async-iterator-iteration";

export default {
  name: "TaskTab",
  props: {
    coderId: {
      required: true,
    },
    evalId: {
      required: true,
    },
    courseId: {
      required: true,
    },
    teacherId: {
      required: true,
    },
  },
  data() {
    const themeColor = {
      green: "#67C23A",
      orange: "#E38800",
      blue: "#1989FA",
      red: "#F56C6C"
    };
    return {
      themeColor,
      evalExamList: [],
      coderExamList: [],
      courseName: "",

      //create Coder exam
      coderExamDialog: false,
      coderExamDialogTitle: "新建Coder考试",
      coderExamForm: {
        examType: "coder",
        course: "",
        name: "",
        range: [],
        isCodeAnalysisNeeded: false,
        isConsoleOutputShownForStu: false
      },
      coderExamFormRules: {
        // type: {
        //   required: true, message: "请选择测试种类",
        // },
        name: {
          required: true, message: "请输入测试名称", trigger: "blur",
        },
        course: {
          required: true, message: "请选择课程名称",
        },
        range: {
          required: true, message: "请选择测试时间段", trigger: "blur",
        }
      },
      switchExamDisabled: false,

      //Coder problems
      coderProblemDialog: false,
      dialogProblemPage: 1,
      dialogProblemLimit: 10,
      dialogProblemTypeStr: "",
      dialogProblemName: "",
      problemList: [],
      problemPageInfo: {},

      //Create Eval exam
      evalExamDialog: false,
      evalExamDialogTitle: "新建Eval测试",
      evalExamForm: {
        course: "",
        examName: "",
        position: "",
        skills: [],
        difficulty: 50,
        range: [],
        startDate: "",
        startTime: "",
        endDate: "",
        endTime: "",
        comment: "",
        antiCheating: false,
        isPrivate: false,
        valid: true,//todo 将form表单的校验情况和确定按钮是否可用绑定
      },
      evalExamFormRules: {
        examName: [
          {required: true, message: "该项为必填项", trigger: "blur"},
          {min: 1, max: 25, message: "长度应在1到25之间", trigger: "change"}
        ],
        course: {
          required: true, message: "该项为必填项", trigger: "blur"
        },
        position: [
          {required: true, message: "该项为必填项", trigger: "blur"},
          {min: 1, max: 25, message: "长度应在1到25之间", trigger: "change"}
        ],
        skills: [
          {required: true, message: "至少选择一项", trigger: "change"},
        ],
        difficulty: [
          {required: true, message: "该项为必填项", trigger: "blur"},
          {type: "number", min: 1, max: 100, message: "1到100之间的数字", trigger: "change"}
        ],
        range: {
          required: true, message: "该项为必填项", trigger: "blur"
        },
      },
      skillList: [
        {
          value: "Java",
          label: "Java",
        },
        {
          value: "C++",
          label: "C++",
        },
        {
          value: "Python",
          label: "Python",
        },
        {
          value: "JavaScript",
          label: "JavaScript",
        },
        {
          value: "GO",
          label: "Go",
        },
        {
          value: "MySQL",
          label: "MySQL",
        },
        {
          value: "Redis",
          label: "Redis",
        },
        {
          value: "React",
          label: "React",
        },
        {
          value: "Vue",
          label: "Vue",
        },
      ],
      isEvalExamCreated: false,
      valid: true,
    };
  },
  computed: {
    isCreator() {
      return Number(this.teacherId) === Number(this.$store.state.user.id);
    },
    courseTaskList() {
      return []
          .concat(this.evalExamList)
          .concat(this.coderExamList)
          .sort((a, b) => {
            let a_time = a["startAt"] * 1000 || new Date(a.startTime).getTime();
            let b_time = b["startAt"] * 1000 || new Date(b.startTime).getTime();
            return b_time - a_time;
          });
    },
    isTeacher() {
      return this.$store.getters.isTeacher;
    },
    isStudent() {
      return this.$store.getters.isStudent;
    },
    problemTypeOptions() {
      return problemTypeOptions(true);
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const _this = this;
      _this.coderExamForm.course = _this.coderId;
      _this.courseName = (await _this.$apis.getCourseById(_this.courseId)).data.data.name || "";
      if (_this.isTeacher) {
        if (_this.evalId !== null) {
          _this.evalExamList = (await _this.$apis.getTeacherEvalExamsByCourseId(_this.evalId)).data.data || [];
        }
        if (_this.coderId !== null) {
          _this.coderExamList = (await _this.$apis.getTeacherCoderExamsByCourseId(_this.coderId)).data.data || [];
        }
      } else if (this.isStudent) {
        if (_this.evalId !== null) {
          _this.evalExamList = (await _this.$apis.getStudentEvalExamsByCourseId(_this.evalId)).data.data || [];
        }
        if (_this.coderId !== null) {
          _this.coderExamList = (await _this.$apis.getStudentCoderExamsByCourseId(_this.coderId)).data.data || [];
        }
      }
    },

    timestampToTime: portal.functions.timestampToTime,

    courseTaskStatusColor(VO) {
      const _this = this;
      if (_this.state(VO) === "FINISHED" || _this.state(VO) === "NOT_STARTED" || _this.state(VO) === "CLOSED") {
        return "grey";
      } else if (VO["isJoined"] || VO["joined"]) {
        return _this.themeColor.green;
      } else {
        return _this.themeColor.blue;
      }
    },

    state(VO) {
      if (VO["examId"]) {
        if (new Date(VO.endTime) < new Date()) {
          return "FINISHED";
        } else if (new Date(VO.startTime) > new Date()) {
          return "NOT_STARTED";
        } else {
          return "RUNNING";
        }
      } else {
        if (VO.status === "CLOSED") {
          return "CLOSED";
        } else if (VO["startAt"] * 1000 > new Date()) {
          return "NOT_STARTED";
        } else if (VO["endAt"] * 1000 < new Date()) {
          return "FINISHED";
        } else {
          return "RUNNING";
        }
      }
    },

    toTask(task) {
      const _this = this;
      const type = task["examId"] ? "eval" : "coder";
      // let evalUrl;
      // let evalExamUrl;
      // let coderUrl;
      // let url;
      // if (_this.isStudent) {
      //   evalUrl = "https://eval.seec.seecoder.cn/student/home/";
      //   evalExamUrl = "https://eval.seec.seecoder.cn/exam/";
      //   coderUrl = "https://coder.seec.seecoder.cn/exam/";
      //   switch (this.state(task)) {
      //     case "NOT_STARTED":
      //       url = type === "eval" ? evalUrl : coderUrl;
      //       break;
      //     case "CLOSED":
      //       url = type === "eval" ? evalUrl : coderUrl;
      //       break;
      //     case "FINISHED":
      //       url = type === "eval" ? evalUrl : coderUrl;
      //       break;
      //     case "RUNNING":
      //       if (task["isJoined"] || task["joined"]) {
      //         url = type === "eval" ? evalExamUrl + task["examId"] + "/before-exam" : coderUrl + task.id;
      //       } else {
      //         url = type === "eval" ? evalUrl : coderUrl;
      //       }
      //       break;
      //   }
      // } else {
      //   evalUrl = "https://eval.seec.seecoder.cn/teacher/exam/";
      //   coderUrl = "https://coder.seec.seecoder.cn/exam/";
      //   url = type === "eval" ? evalUrl + task["examId"] + "/details" : coderUrl + task.id;
      // }
      if (type === "coder") {
        _this.$router.push(`/exam/${task.id}`);

      } else { //只有eval直接跳转
        if (_this.isTeacher) {
          _this.$router.push({
            name: "teacher-examDetails",
            params: {
              examId: task["examId"],
            }
          });
        } else {
          _this.$router.push({
            name: "student-examDetails",
            params: {
              examId: task["examId"],
            }
          });
        }
      }
    },
    // 创建Coder考试的Dialog
    handleExamFormCancel() {
      this.coderExamDialog = false;
      this.$refs.coderExamFormRef.resetFields();
    },
    // 展示Coder所有的problem题目（代码题）
    showProblemDialog() { //打开弹框，获取初始数据
      this.fetchProblemData();
      this.coderProblemDialog = true;
    },
    fetchProblemData(page = 1) { // 按需获得Coder题目
      this.$apis.retrievePageProblem(page, this.dialogProblemLimit, this.dialogProblemTypeStr, this.dialogProblemName)
          .then(_res => {
            this.problemPageInfo = _res.data.page;
            this.problemList = _res.data.res;
          }).catch(err => {
        console.log(err);
      });
    },
    //验证表单数据，创建考试
    handleExamCreate() {
      const form = this.$refs.coderExamFormRef;
      form.validate((valid) => {
        if (valid) {
          console.log("validate 成功");
          this.createCoderExam();
        } else {
          console.log("validate 失败了");
          return false;
        }
      });
    },

    createCoderExam() {
      //创建Coder考试
      this.$apis.createCoderExam({
        course: this.coderExamForm.course,
        name: this.coderExamForm.name,
        startAt: this.coderExamForm.range[0].getTime() / 1000,
        endAt: this.coderExamForm.range[1].getTime() / 1000,
        problems: this.$store.state.problem.cart.map((item) => item.id),
        isConsoleOutputShownForStu: this.coderExamForm.isConsoleOutputShownForStu
      }).then(_res => {
        this.$store.commit("clearProblem");
        ElMessage.success("创建测试成功！");
        this.clearCoderExamForm(); //清空Coder考试表单内容
        this.init(); //重新获取数据，实时刷新页面
        this.coderExamDialog = false;
      }).catch(_err => {
        console.log(_err);
        ElMessage.warning("创建测试失败！");
      });
    },
    //查看题目详情（暂不支持）
    checkDetails() {
      ElMessage.warning("暂不支持查看详情！");
    },
    //题目购物车cart
    removeEnable(problem) { //是否可以移除题目
      return this.$store.state.problem.cart.length && this.$store.state.problem.cart
          .map((item) => item.id)
          .includes(problem.id);
    },

    clearProblemCart() {
      this.$store.commit("clearProblem");
      this.coderProblemDialog = false;
    },

    addEnable(problem) { //是否可以添加题目
      return this.$store.getters.isTeacher && problem.modifiedAt;
    },

    changePage(val) {
      this.fetchProblemData(val);
    },

    clearCoderExamForm() {
      this.coderExamForm = {
        examType: "coder",
        course: this.coderId,
        name: "",
        range: [],
        isCodeAnalysisNeeded: false,
        isConsoleOutputShownForStu: false
      };
    },

    formatTimestamp,

    problemTypeToTagContent,

    handleAddEvalClick() {
      this.evalExamDialog = true;
    },

    handleAddCoderClick() {
      this.coderExamDialog = true;
    },

    // 创建Eval考试的Dialog
    handleEvalExamFormCancel() {
      this.evalExamDialog = false;
      this.$refs.evalExamFormRef.resetFields();
    },

    //格式化日期函数
    formatDate(date, fmt) {
      if (typeof date == "string") {
        return date;
      }

      if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";

      if (!date || date == null) return null;
      var o = {
        "M+": date.getMonth() + 1, // 月份
        "d+": date.getDate(), // 日
        "h+": date.getHours(), // 小时
        "m+": date.getMinutes(), // 分
        "s+": date.getSeconds(), // 秒
        "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
        "S": date.getMilliseconds() // 毫秒
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
      return fmt;
    },


    // 创建Eval评测
    createEvalExam() {
      const obj = {
        creatorId: this.$store.state.user.id,
        examName: this.evalExamForm.examName,
        position: this.evalExamForm.position,
        skills: Object.values(this.evalExamForm.skills),
        difficulty: this.evalExamForm.difficulty,
        startTime: this.formatDate(this.evalExamForm.range[0], "yyyy-MM-dd hh:mm:ss"),
        endTime: this.formatDate(this.evalExamForm.range[1], "yyyy-MM-dd hh:mm:ss"),
        comment: this.evalExamForm.comment,
        antiCheating: this.evalExamForm.antiCheating,
        isPublic: !this.evalExamForm.isPrivate,
        isHidden: false,
        courseId: this.evalId,
        courseName: this.courseName
      };
      console.log("创建eval测试", obj);
      this.$apis.createEvalExam(obj).then(
          _res => {
            ElMessage.success("创建Eval评测成功");
            this.init();
            console.log(_res);
            this.evalExamDialog = false;
            this.isEvalExamCreated = !!_res.data;
            console.log(this.isEvalExamCreated);
            const examId = _res.data.data.result.examId;
            this.$router.push({
              name: "edit-exams",
              params: {
                examId: examId
              }
            });
          }
      ).catch(_err => {
        ElMessage.error("创建Eval评测失败");
      });
    }
  },
};
</script>

<style scoped>
@import "tabs.css";

.el-timeline {
  margin-top: 10px;
  padding-left: 10px;
}

.slider-demo-block {
  display: flex;
  align-items: center;
}

.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
</style>
