<template>
  <div id="problem-upload-body">
    <el-card>
      <template #header>

      </template>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        class="fill-card"
        label-width="80px"
      >
        <el-form-item label="题目名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择" value="">
            <el-option
              v-for="item in typeOptions"
              :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="form.description"
            :rows="3"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目文件" prop="file">
          <el-upload
            ref="file"
            :auto-upload="false"
            :limit="1"
            :on-change="onFileChange"
            :on-remove="onFileChange"
            accept=".zip"
            action=""
          >
            <el-button size="small" type="primary">选取</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <div class="form-button">
            <el-button plain type="danger" @click="resetForm">重置</el-button>
            <el-button
              :disabled="!files.length"
              :loading="loading"
              type="primary"
              @click="onSubmit"
            >上传
            </el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
const { problemTypeOptions } = require("@/utils/coder-utils.js");
const { errorMessage } = require("@/utils/coder-utils.js");
export default {
  name: "ProblemUpload",
  components: {},
  data() {
    return {
      form: {},
      rules: {
        name: [{ required: true, message: "请输入题目名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择题目类型", trigger: "blur" }],
        description: [
          { required: true, message: "请输入题目描述", trigger: "blur" }
        ]
      },
      files: [],
      loading: false
    };
  },
  computed: {
    typeOptions() {
      return problemTypeOptions();
    }
  },
  methods: {
    onFileChange(
      _,
      fileList
    ) {
      this.files = fileList;
    },
    resetForm() {
      const form = this.$refs.form;
      form.resetFields();
      const file = this.$refs.file;
      file.clearFiles();
      this.files = [];
    },
    onSubmit() {
      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.form)], {
        type: "application/json"
      });
      body.append("meta", meta);
      body.append("data", this.files[0].raw);
      this.$apis.createCoderProblem(body)
        .then((data) => {
          this.$router.push("/problem/" + data.res?.id);
        })
        .catch((err) => {
          this.$message.error({
            message: errorMessage(err),
            center: true
          });
          this.loading = false;
        });
    }
  }
};
</script>


<style>
#problem-upload-body {
  margin: 40px 10vw 80px 10vw;
  min-height: calc(100vh - 100px);
}
</style>