<template>
  <Modal
    class="modify-unformal-grading-task"
    v-model="modalIsShow"
    title="创建试评任务"
    :mask-closable="false"
    @on-visible-change="visibleChange"
  >
    <div class="task-body">
      <upload-button
        btn-icon="md-cloud-upload"
        :btn-content="uploadBtnName"
        :upload-url="uploadUrl"
        :upload-data="data"
        :format="['xls', 'xlsx']"
        :auto-upload="false"
        @upload-success="uploadSuccess"
        @file-change="selectedFile"
        ref="UploadButton"
      >
        <Button
          type="primary"
          :disabled="$refs.UploadButton && $refs.UploadButton.loading"
          @click="startUpload"
          style="margin-left: 10px"
          slot="extra"
          >开始上传</Button
        >
      </upload-button>
    </div>
    <div slot="footer">
      <Button type="text" @click="cancel">取消</Button>
      <Button type="primary" :disabled="isSubmit" @click="submit"
        >开始试评</Button
      >
    </div>
  </Modal>
</template>

<script>
import { uploadGradingUser } from "@/api";
import UploadButton from "@/components/UploadButton";

export default {
  name: "modify-unformal-grading-task",
  components: { UploadButton },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      uploadBtnName: "导入考生数据",
      uploadUrl: this.GLOBAL.domain + "/import/students/batchAllForTrial"
    };
  },
  methods: {
    visibleChange(visible) {
      if (visible) {
        console.log("try");
      }
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    startUpload() {
      this.$refs.UploadButton.startUpload();
    },
    selectedFile(file) {
      this.uploadBtnName = file.name;
    },
    uploadSuccess(response) {
      this.uploadBtnName = "导入考生数据";
      console.log(response);
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate();
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await uploadGradingUser(this.modalForm).catch(() => {
        this.isSubmit = false;
      });

      if (!data) return;

      this.isSubmit = false;
      this.$Message.success("发布任务成功！");
      this.$emit("modified");
      this.cancel();
    }
  }
};
</script>
