<template>
  <el-row id="manage-page-body">
    <el-col :span="3">
      <el-menu background-color="#f8f9fb" default-active="1" style="position: fixed;"
               @select="handleSelect">
        <el-menu-item index="0">
          <el-icon>
            <Back/>
          </el-icon>
          <span style="padding-left: 20px">返回首页</span>
        </el-menu-item>
        <el-menu-item index="1">
          <el-icon>
            <Document/>
          </el-icon>
          <span style="padding-left: 20px">全部课程</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon>
            <DocumentChecked/>
          </el-icon>
          <span style="padding-left: 20px">全部测试</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <DocumentChecked/>
          </el-icon>
          <span style="padding-left: 20px">全部题目</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="1"/>
    <el-col :span="18">
      <el-card id="all-test-card">
        <template #header>
          <div class="card-header">
          <span style="font-weight: bold; font-size: larger">
            全部课程
          </span>
            <div class="course-type-selector">
              <el-select v-model="courseType" class="m-2" placeholder="课程类型">
                <el-option
                  v-for="item in courseTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button class="ml-16" plain type="primary"
                         @click="dialogTitle='新增课程';dialogVisible=true;switchDisabled=false;">
                新建课程
              </el-button>
            </div>
          </div>
        </template>
        <div class="course-card-list-container">
          <CourseCard v-for="(item,index) in filterCourses" :key="index" :ref="'courseCard'+item.id" :courseVO="item" @delete="deleteCourse(item)" @update="beforeUpdateCourse(item)"/>
        </div>
      </el-card>

      <el-divider id="manage-page-divider"/>

      <el-card>
        <template #header>
          <div class="card-header">
          <span style="font-weight: bold; font-size: larger">
            全部测试
          </span>
<!--            <el-button class="ml-16" plain type="primary"-->
<!--                       @click="dialogExamTitle='新增测试';dialogExamVisible=true;switchExamDisabled=false;">-->
<!--              新建测试-->
<!--            </el-button>-->
          </div>
        </template>
        <el-tabs v-model="activeTestPaneName">
          <el-tab-pane label="评测题" name="eval">
            <div v-for="(item, key) in evalExamList" :key="key">
              <div>
                <el-divider style="margin: 10px 0 20px 0" content-position="left">{{ key }}</el-divider>
              </div>
              <div class="test-page-main">
                <TestCard v-for="exam in item" :key="exam.id" :testVO="exam"/>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="代码题" name="coder">
            <div v-for="(item, key) in coderExamList" :key="key">
              <div>
                <el-divider style="margin: 10px 0 20px 0" content-position="left">{{ key }}</el-divider>
              </div>
              <div class="test-page-main">
                <TestCard v-for="exam in item" :key="exam.id" :testVO="exam"/>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <el-divider/>

      <el-card>
        <template #header>
          <div class="card-header">
          <span style="font-weight: bold; font-size: larger">
            全部题目
          </span>
<!--            <el-button class="ml-16" plain type="primary"-->
<!--                       @click="handleProblemCreate">-->
<!--              新建题目-->
<!--            </el-button>-->
          </div>
        </template>

        <page-header>
          <template #actions>
            <el-input v-model="dialogProblemName"
                      style="width:200px;"
                      placeholder="搜索"
            />
            <el-select v-model="dialogProblemTypeStr" @change="fetchProblemData(1)">
              <el-option v-for="item in problemTypeOptions" :key="item.value" :value="item.value">
                {{item.label}}
              </el-option>
            </el-select>
            <el-button @click="uploadFile" type="primary" style="margin-right: 40px">
              <el-icon :size="14"><UploadFilled/></el-icon>
              上传题目
            </el-button>
          </template>
        </page-header>

        <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(scope.row.id)"
              >
                详情</el-button>
          </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page="problemPageInfo.page"
            :page-size="problemPageInfo.limit"
            :total="problemPageInfo.total"
            @current-change="changePage"
        />
      </el-card>
    </el-col>

<!--    创建门户课程-->
    <el-dialog v-model="dialogVisible" :before-close="handleFormCancel" :width="700" :title="dialogTitle">
      <el-form ref="formRef" :model="form" :rules="formRules" label-width="100px">
        <el-form-item label="课程名称" prop="name">
          <el-input class="course-form-item" v-model="form.name" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="所在学期" required>
          <el-row class="course-form-item">
            <el-col :span="11">
              <el-form-item prop="year">
                <el-select v-model="form.year" placeholder="年份">
                  <el-option v-for="item in Array.from(Array(100),(v,k)=>k+2022)" :key="item" :label="item"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="season">
                <el-select v-model="form.season" placeholder="季节">
                  <el-option key="1" label="春" value="春"></el-option>
                  <el-option key="2" label="夏" value="夏"></el-option>
                  <el-option key="3" label="秋" value="秋"></el-option>
                  <el-option key="4" label="冬" value="冬"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="课程简介" prop="description">
          <el-input class="course-form-item" v-model="form.description" placeholder="请输入课程简介"
                    type="textarea" :autosize="{minRows: 3}"></el-input>
        </el-form-item>
        <el-form-item label="课程时间" prop="time">
          <el-date-picker v-model="form.courseTime" range-separator="至"
                          start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课程邀请码" prop="invitationCode">
          <el-input class="course-form-item" v-model="form.invitationCode" placeholder="请输入课程邀请码"></el-input>
        </el-form-item>
        <el-form-item label="课程价格" prop="price">
          <el-input class="course-form-item" v-model="form.price" placeholder="请输入课程价格">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="MOOC链接">
          <el-input class="course-form-item" v-model="form.moocUrl" placeholder="请输入MOOC链接"></el-input>
        </el-form-item>
        <el-form-item label="课程图片">
          <el-upload
            :before-upload="beforeUpload"
            :file-list="form.fileList"
            :http-request="httpRequest"
            :limit="1"
            :on-change="handleChange"
            :on-exceed="handleExceed"
            :on-remove="handleChange"
            action=""
            class="upload-demo"
            list-type="picture">
            <el-button plain size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="Coder课程">
          <el-switch v-model="form.coderLink" :disabled="switchDisabled" active-text="创建" inactive-text="不创建"/>
        </el-form-item>
        <el-form-item label="Eval课程">
          <el-switch v-model="form.evalLink" :disabled="switchDisabled" active-text="创建" inactive-text="不创建"/>
        </el-form-item>
      </el-form>
      <div style="margin: auto;width: fit-content">
        <el-button type="primary" @click="handleFormConfirm">确定</el-button>
        <el-button @click="handleFormCancel">取消</el-button>
      </div>
    </el-dialog>


<!--    创建Coder考试-->
    <el-dialog v-model="dialogExamVisible" :before-close="handleExamFormCancel" :width="1200" :title="dialogExamTitle">
      <el-form ref="examFormRef" :model="examForm" :rules="examFormRules" label-width="150px">
        <el-form-item label="测试种类" prop="type">
          <el-select v-model="examForm.examType" class="m-2" placeholder="请选择种类">
            <el-option
                v-for="item in examCategoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isCoder" label="所属课程" prop="course">
          <el-select v-model="examForm.course" class="m-2" placeholder="请选择课程">
            <el-option
                v-for="item in courseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isCoder" label="测试名称" prop="name">
          <el-input class="course-form-item" v-model="examForm.name" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item v-if="isCoder" label="测试时间" prop="range">
          <el-date-picker v-model="examForm.range" range-separator="至"
                          start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="isCoder" label="允许学生查看控制台">
          <el-switch v-model="examForm.isConsoleOutputShownForStu" :disabled="switchExamDisabled" active-text="开启" inactive-text="不开启"/>
        </el-form-item>
        <el-form-item v-if="isCoder" label="启用代码分析">
          <el-switch v-model="examForm.isCodeAnalysisNeeded" :disabled="switchExamDisabled" active-text="开启" inactive-text="不开启"/>
        </el-form-item>
        <el-form-item v-if="isCoder" 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">{{ problem.type }}</el-tag>
              </template>
              <b>题目描述：</b>
              <span class="problem-description">{{ problem.description }}</span>
              <div class="remove-button">
                <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="dialogProblemVisible" :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"
          :total="problemPageInfo.total"
          @current-change="changePage"
      />
    </el-dialog>

    <el-dialog v-model="uploadFileDialog" :width="1000">
      <el-form
          ref="form"
          :model="uploadFileForm"
          label-width="80px"
          :rules="uploadFileRules"
          class="fill-card"
      >
        <el-form-item label="题目名称" prop="name">
          <el-input v-model="uploadFileForm.name"></el-input>
        </el-form-item>
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="uploadFileForm.type" placeholder="请选择" value="">
            <el-option
                v-for="item in problemTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目描述" prop="description">
          <el-input
              v-model="uploadFileForm.description"
              type="textarea"
              :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目文件" prop="file">
          <el-upload
              ref="file"
              action=""
              :auto-upload="false"
              :limit="1"
              accept=".zip"
              :on-change="onFileChange"
              :on-remove="onFileChange"
          >
              <el-button size="small" type="primary">选取</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <div class="form-button">
            <el-button type="danger" plain @click="resetForm">重置</el-button>
            <el-button
                type="primary"
                :loading="loading"
                :disabled="!uploadFiles.length"
                @click="submitProblem"
            >上传</el-button
            >
          </div>
        </el-form-item>
      </el-form>

    </el-dialog>
  </el-row>
</template>

<script>
import CourseCard from "@/components/CourseCard";
import { ElMessage, ElMessageBox } from "element-plus";
import { Back, Document } from "@element-plus/icons-vue";
import TestCard from "@/components/TestCard";
import {debounce} from "@/utils/debounce";
import {formatTimestamp, problemTypeOptions, problemTypeToTagContent} from "@/utils/coder-utils";
import PageHeader from "@/components/PageHeader";

export default {
  name: "ManagePage",
  components: {
    PageHeader,
    TestCard,
    Document,
    Back,
    CourseCard,
  },
  data() {
    const validateName = async (rule, value, callback) => {
      const res = await this.$apis.checkCourseNameUnique(this.form.id === null ? -1 : this.form.id, value);
      const isNameUnique = res.data.data;
      if (value === "") {
        callback(new Error("请输入课程名称"));
      } else if (!isNameUnique) {
        callback(new Error("课程名称重复"));
      } else {
        callback();
      }
    };
    const validateTime = (rule, value, callback) => {
      if (this.form.courseTime[0] === null || this.form.courseTime[1] === null) {
        callback(new Error("请选择课程始末时间"));
      } else {
        callback();
      }
    };
    const validateCode = async (rule, value, callback) => {
      const res = await this.$apis.checkCourseCodeUnique(this.form.id === null ? -1 : this.form.id, value);
      const isCodeUnique = res.data.data;
      if (value === "") {
        callback(new Error("请输入课程邀请码"));
      } else if (!isCodeUnique) {
        callback(new Error("课程邀请码重复"));
      } else {
        callback();
      }
    };
    const validatePrice = (rule, value, callback) => {
      let regs = /^(\d+)(\.\d+)?$/;
      if (regs.test(value)) {
        callback();
      } else {
        callback(new Error("请正确输入课程价格"));
      }
    };
    return {
      activeIndex: "1",
      activeTestPaneName: "eval",
      dialogVisible: false,
      dialogExamVisible: false,
      dialogTitle: "新增课程",
      dialogExamTitle: "新增测试",
      form: {
        id: null,
        name: "",
        year: "",
        season: "",
        description: "",
        courseTime: [
          null,
          null,
        ],
        invitationCode: "",
        price: "0",//input均会将Number类型转化成为字符串类型
        moocUrl: null,
        fileList: [],
        imageUrl: null,
        coderLink: false,
        evalLink: false,
      },
      examForm: {
        examType: "coder",
        course: "",
        name: "",
        range: [],
        isCodeAnalysisNeeded: false,
        isConsoleOutputShownForStu: false
      },
      formRules: {
        name: {
          required: true, validator: validateName, trigger: "blur",
        },
        year: {
          required: true, message: "请选择年份", trigger: "blur",
        },
        season: {
          required: true, message: "请选择季节", trigger: "blur",
        },
        description: {
          required: true, message: "请输入课程简介", trigger: "blur",
        },
        time: {
          required: true, validator: validateTime, trigger: "blur",
        },
        invitationCode: {
          required: true, validator: validateCode, trigger: "blur",
        },
        price: {
          required: true, validator: validatePrice, trigger: "blur",
        },
      },
      examFormRules: {
        // type: {
        //   required: true, message: "请选择测试种类",
        // },
        name: {
          required: true, message: "请输入测试名称", trigger: "blur",
        },
        course: {
          required: true, message: "请选择测试名称",
        },
        range: {
          required: true, message: "请选择测试时间段", trigger: "blur",
        }
      },
      coderCourses: [],
      courseOptions: [],

      switchDisabled: false,
      switchExamDisabled: false,
      //
      myCourseList: [],
      courseType: "all",
      courseTypeOptions: [
        { value: "all", label: "全部课程" },
        { value: "pending", label: "未开始" },
        { value: "start", label: "正在进行" },
        { value: "end", label: "已结束" },
      ],
      evalExamList: [],
      coderExamList: [],
      examType: "all",
      examTypeOptions: [
        { value: "all", label: "全部测试" },
        { value: "pending", label: "未开始" },
        { value: "start", label: "正在进行" },
        { value: "end", label: "已结束" },
      ],
      examCategoryOptions: [
        { value: "eval", label: "评测题"},
        { value: "coder", label: "代码题"},
      ],
      dialogProblemVisible: false,
      dialogProblemPage: 1,
      dialogProblemLimit: 10,
      dialogProblemTypeStr: "",
      dialogProblemName: "",
      problemList: [],
      problemPageInfo: {},

      //上传Coder代码题
      uploadFileDialog: false,
      uploadFileForm: {
        name: "",
        type: "",
        description: ""
      },
      uploadFileRules: {
        name: [{ required: true, message: "请输入题目名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择题目类型", trigger: "blur" }],
        description: [
          { required: true, message: "请输入题目描述", trigger: "blur" }
        ]
      },
      uploadFiles: [],
      loading: false,
    };
  },
  computed: {
    filterCourses: function () {
      if (this.courseType === "all") return this.myCourseList;
      if (this.courseType === "pending") return this.myCourseList.filter(i => this.state(i) === "NOT_STARTED");
      if (this.courseType === "start") return this.myCourseList.filter(i => this.state(i) === "RUNNING");
      if (this.courseType === "end") return this.myCourseList.filter(i => this.state(i) === "FINISHED");
      else return this.myCourseList;
    },
    isCoder() {
      return this.examForm.examType === "coder";
    },
    problemTypeOptions() {
      return problemTypeOptions(true);
    }
  },
  mounted() {
    this.$apis.getTeacherCourses().then(res => {
      this.myCourseList = res.data.data;
    });
    this.$apis.getTeacherEvalExamsGroupByCourse().then(res => {
      this.evalExamList = res.data.data;
    });
    this.$apis.getTeacherCoderExamsGroupByCourse().then(res => {
      this.coderExamList = res.data.data;
    });
    this.fetchProblemData();
  },
  watch: {
    //TODO 防抖！
    dialogProblemName() {
      debounce(this.fetchProblemData, 500);
    }
  },

  methods: {
    formatTimestamp,
    problemTypeToTagContent,
    state(courseVO) {
      const now = new Date();
      if (new Date(courseVO.endTime) < now) {
        return "FINISHED";
      } else if (new Date(courseVO.startTime) > now) {
        return "NOT_STARTED";
      } else {
        return "RUNNING";
      }
    },
    handleSelect(index) {
      if (index === "0") {
        this.$router.push("portal");
      }
      if (index === "1") {
        document.getElementById("app").scrollIntoView({ behavior: "smooth" });
      }
      if (index === "2") {
        document.querySelector("#manage-page-divider").scrollIntoView({ behavior: "smooth" });
      }
      this.activeIndex = index;
    },
    handleFormConfirm() {
      const _this = this;
      // 上传oss图片
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (this.form.fileList.length === 0) {
            this.form.imageUrl = null;
            createOrUpdateCourse();
          } else {
            if (this.form.fileList[0].raw) {
              client.put("/seecoder/image-" + this.form.name + ".jpg", this.form.fileList[0].raw)
                .then(res => {
                  this.form.imageUrl = res.res.requestUrls[0];
                  createOrUpdateCourse();
                })
                .catch(err => {
                  console.log(err);
                  ElMessage.error(err);
                });
            } else {
              createOrUpdateCourse();
            }
          }
        }
      });

      function createOrUpdateCourse() {
        console.log(_this.form);
        if (_this.form.id === null) {
          console.log("进入创建");
          let data = {
            name: _this.form.name,
            teacher: {
              id: _this.$store.state.user.id,
            },
            semester: _this.form.year + _this.form.season,
            imageUrl: _this.form.imageUrl,
            description: _this.form.description,
            startTime: _this.form.courseTime[0],
            endTime: _this.form.courseTime[1],
            invitationCode: _this.form.invitationCode,
            moocUrl: _this.form.moocUrl,
            createdTime: new Date(),
            price: Number(_this.form.price),
            coderId: _this.form.coderLink ? -1 : null,
            evalId: _this.form.evalLink ? -1 : null,
          };
          console.log(data);
          _this.$apis.createCourse(data)
            .then((res) => {
              console.log(res);
              _this.myCourseList.push(res.data.data);
              _this.dialogVisible = false;
              _this.clearForm();
              ElMessage.success("新建课程成功");
            })
            .catch(err => {
              ElMessage.error(err);
            });
        } else {
          _this.$apis.updateCourse({
            id: _this.form.id,
            name: _this.form.name,
            semester: _this.form.year + _this.form.season,
            imageUrl: _this.form.imageUrl,
            description: _this.form.description,
            startTime: _this.form.courseTime[0],
            endTime: _this.form.courseTime[1],
            invitationCode: _this.form.invitationCode,
            moocUrl: _this.form.moocUrl,
            price: Number(_this.form.price),
          })
            .then((res) => {
              for (let i = 0; i < _this.myCourseList.length; i++) {
                if (_this.myCourseList[i].id === _this.form.id) {
                  _this.myCourseList[i] = res.data.data;
                }
              }
              _this.$refs["courseCard" + _this.form.id][0].$props.courseVO = res.data.data;
              _this.dialogVisible = false;
              _this.clearForm();
              ElMessage.success("更新课程成功");
            })
            .catch(err => {
              console.log(err);
              ElMessage.error(err);
            });
        }
      }
    },
    handleFormCancel(done) {
      ElMessageBox.confirm("是否确认退出？退出后将不保存表格信息。", "提示", {
        confirmButtonText: "确认退出",
        cancelButtonText: "我再想想",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.dialogVisible = false;
          this.clearForm();
          // Zhurui修改，关闭dialog
          done();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleExamCreate(){
      const form = this.$refs.examFormRef;
      form.validate((valid) => {
        if (valid) {
          console.log("validate 成功");
          this.createCoderExam();
        } else {
          console.log("validate 失败了");
          return false;
        }
      });
    },
    createCoderExam(){
      //创建Coder考试
      this.$apis.createCoderExam({
        course: this.examForm.course,
        name: this.examForm.name,
        startAt: this.examForm.range[0].getTime()/1000,
        endAt: this.examForm.range[1].getTime()/1000,
        problems: this.$store.state.problem.cart.map((item) => item.id),
        isConsoleOutputShownForStu: this.examForm.isConsoleOutputShownForStu
      }).then(_res => {
        this.$store.commit("clearProblem");
        ElMessage.success("创建测试成功！");
        this.dialogExamVisible = false;
      }).catch(_err => {
        console.log(_err);
        ElMessage.warning("创建测试失败！");
      });
    },
    handleExamFormCancel(done) {
      //关闭dialog的提示
      ElMessageBox.confirm("是否确认退出？退出后将不保存表格信息。", "提示", {
        confirmButtonText: "确认退出",
        cancelButtonText: "我再想想",
        type: "warning",
        center: true,
      })
          .then(() => {
            this.dialogExamVisible = false;
            // this.clearForm();
            //TODO 清除表格信息
            done();
          })
          .catch((err) => {
            console.log(err);
          });
    },
    showProblemDialog(){ //打开弹框，获取初始数据
      this.fetchProblemData();
      this.dialogProblemVisible = true;
    },
    // handleProblemChange(){
    //   debounce(fetchProblemData,1000);
    // },
    checkDetails(problemId){
      this.$router.push(`/problem/${problemId}`);
    },
    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);
      });
    },
    removeEnable(problem) { //是否可以移除题目
      return this.$store.state.problem.cart.length && this.$store.state.problem.cart
          .map((item) => item.id)
          .includes(problem.id);
    },
    addEnable(problem) { //是否可以添加题目
      return this.$store.getters.isTeacher && problem.modifiedAt;
    },
    changePage(val){
      this.fetchProblemData(val);
    },
    clearForm() {
      this.form = {
        id: null,
        name: "",
        year: "",
        season: "",
        description: "",
        courseTime: [null, null],
        invitationCode: "",
        price: "0",//input均会将Number类型转化成为字符串类型
        moocUrl: null,
        fileList: [],
        imageUrl: null,
        coderLink: false,
        evalLink: false,
      };
    },
    // el-upload相关的方法
    handleChange(file, fileList) {
      this.form.fileList = fileList;
    },
    handleExceed(files, fileList) {
      ElMessage.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    httpRequest(event) {
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt10M = file.size / 1024 / 1024 < 3;
      const isPNG = file.type === "image/png";
      if (!(isJPG || isPNG)) {
        ElMessage.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt10M) {
        ElMessage.error("上传图片大小不能超过 3MB!");
      }
      return (isJPG || isPNG) && isLt10M;
    },
    // update & delete
    beforeUpdateCourse(item) {
      this.form.id = item.id;
      this.form.name = item.name;
      this.form.year = Number(item.semester.substring(0, 4));
      this.form.season = item.semester[4];
      this.form.description = item.description;
      this.form.courseTime[0] = new Date(item.startTime);
      this.form.courseTime[1] = new Date(item.endTime);
      this.form.invitationCode = item.invitationCode;
      this.form.price = String(item.price);
      this.form.moocUrl = item.moocUrl;
      this.form.fileList = item.imageUrl === null ? [] : [{
        name: item.name + "-image.jpg",
        url: item.imageUrl
      }];
      this.form.imageUrl = item.imageUrl;
      this.form.coderLink = item.coderId !== null;
      this.form.evalLink = item.evalId !== null;
      this.dialogTitle = "修改课程";
      this.switchDisabled = true;
      this.dialogVisible = true;
    },
    deleteCourse(item) {
      if (item.state === "EXAMPLE") {
        ElMessage.error("无法删除示例课程");
      } else {
        ElMessageBox.confirm(
          "确定删除课程",
          "Warning",
          {
            confirmButtonText: "立即删除",
            cancelButtonText: "让我想想",
            type: "warning",
            center: true,
          }
        )
          .then(() => {
            this.$apis.deleteCourse(item.id)
              .then(res => {
                for (let i = 0; i < this.myCourseList.length; i++) {
                  if (this.myCourseList[i].id === item.id) {
                    this.myCourseList.splice(i, 1);
                  }
                }
                ElMessage.success(res.data.data);
              });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "取消删除",
            });
          });
      }
    },
    handleProblemCreate(){
      alert("创建Coder题目");
    },
    uploadFile(){
      this.uploadFileDialog = true;
    },
    onFileChange(fileList){
      console.log(fileList);
      this.uploadFiles.push(fileList);
    },
    resetForm() {
      const form = this.$refs.form;
      form.resetFields();
      const file = this.$refs.file;
      file.clearFiles();
      this.uploadFiles = [];
    },
    submitProblem() {
      const form = this.$refs.form;
      form.validate((valid) => {
        if (valid) {
          this.uploadProblem();
        } else {
          return false;
        }
      });
    },
    uploadProblem() {
      this.loading = true;
      const body = new FormData();
      const meta = new Blob([JSON.stringify(this.uploadFileForm)], {
        type: "application/json",
      });
      body.append("meta", meta);
      body.append("data", this.uploadFiles[0].raw);
      this.$apis.createCoderProblem(body)
          .then((data) => {
            ElMessage.success("创建Coder代码题成功");
            this.loading = false;
            this.uploadFileDialog = false;
            // this.problemList.push()
            // this.$nuxt.$router.push("/problem/" + data.res?.id);
          })
          .catch((err) => {
            this.$message.error({
              message: errorMessage(err),
              center: true
            });
            this.loading = false;
          });
    }
  },

};
</script>

<style scoped>
@import "managePage.css";
</style>
