<template>
  <el-dialog
    title="添加"
    :visible.sync="dialogVisible"
    width="70%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="任务名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="数据来源">
        <el-select v-model="form.source" placeholder="请选择">
          <el-option label="SNP" value="DNA"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="立即执行">
        <el-switch v-model="form.isRunNow"></el-switch>
      </el-form-item>
      <el-form-item label="执行时间" v-if="!form.isRunNow">
        <el-date-picker
          v-model="form.runTime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="删除时间">
        <el-date-picker
          v-model="form.delTime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="COAD.Rdata">
        <el-upload
          class="upload-demo"
          action="string"
          drag
          :multiple="false"
          :http-request="UploadImage"
          :on-change="fileChange"
          :file-list="fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item label="STAD.Rdata">
        <el-upload
          class="upload-demo"
          action="string"
          drag
          :multiple="false"
          :http-request="UploadImage2"
          :on-change="fileChange2"
          :file-list="fileList2"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item label="补充说明">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { createOrder, uploadFile } from "@/api";
import dayjs from "dayjs";
import { mapState } from "vuex";

const UploadFileApi = () => {};
export default {
  name: "add",
  props: {
    findList1: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      title: "",
      dialogVisible: false,
      form: {
        name: "",
        isRunNow: false,
        source: "",
        runTime: "",
        delTime: "",
      },
      fileList: [],
      fileList2: [],
      fileListID: [],
      fileListID2: [],
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    onBeforeUploadImage(file) {
      // console.log("file", file);
      return true;
      // const isIMAGE = file.type === "image/jpeg" || "image/jpg" || "image/png";
      // const isLt1M = file.size / 1024 / 1024 < 1;
      // if (!isIMAGE) {
      //   this.$message.error("上传文件只能是图片格式!");
      // }
      // if (!isLt1M) {
      //   this.$message.error("上传文件大小不能超过 1MB!");
      // }
      // return isIMAGE && isLt1M;
    },
    UploadImage(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      uploadFile(formData)
        .then((response) => {
          console.log(104, response);
          console.log("上传图片成功");
          if (response.code === 200) {
            this.fileListID = [response.data];
          }

          param.onSuccess(); // 上传成功的图片会显示绿色的对勾
          // 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
        })
        .catch((response) => {
          console.log("图片上传失败");
          param.onError();
        });
    },
    UploadImage2(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      uploadFile(formData)
        .then((response) => {
          console.log(104, response);
          console.log("上传图片成功");
          if (response.code === 200) {
            this.fileListID2 = [response.data];
          }

          param.onSuccess(); // 上传成功的图片会显示绿色的对勾
          // 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
        })
        .catch((response) => {
          console.log("图片上传失败");
          param.onError();
        });
    },
    fileChange(file) {
      // this.$refs.upload.clearFiles(); // 清除文件对象
      // this.logo = file.raw; // 取出上传文件的对象，在其它地方也可以使用
      this.fileList = [{ name: file.name, url: file.url }]; // 重新手动赋值filstList， 免得自定义上传成功了, 而fileList并没有动态改变， 这样每次都是上传一个对象
    },
    fileChange2(file) {
      // this.$refs.upload.clearFiles(); // 清除文件对象
      // this.logo = file.raw; // 取出上传文件的对象，在其它地方也可以使用
      this.fileList2 = [{ name: file.name, url: file.url }]; // 重新手动赋值filstList， 免得自定义上传成功了, 而fileList并没有动态改变， 这样每次都是上传一个对象
    },
    async submit() {
      if (!this.form.isRunNow) {
        if (!this.form.runTime) {
          this.$message({
            type: "error",
            message: "执行时间为必填项!",
          });
          return;
        }
        if (!dayjs(dayjs()).isBefore(this.form.runTime)) {
          this.$message({
            type: "error",
            message: "任务执行时间比当前时间早!",
          });
          return;
        }
      }
      if (!this.fileListID.length || !this.fileListID2.length) {
        this.$message({
          type: "error",
          message: "基因数据为必填项!",
        });
        return;
      }

      // if (  ) {
      //   this.$message({
      //     type: "error",
      //     message: "基因数据为必填项!",
      //   });
      //   return;
      // }
      const params = {
        ...this.form,
        user_id: this.userInfo.id,
        fileListID: this.fileListID,
        fileListID2: this.fileListID2,
      };
      const res = await createOrder(params);
      if (this.findList1) {
        this.dialogVisible = false;
        this.findList1()
      }
      // console.log(139, res);
      // this.dialogVisible = false
    },
  },
};
</script>
<style lang="less" scoped>
.page-box {
}
</style>
