<template>
  <div>
    <el-dialog
      :title="work_name"
      :visible.sync="dialogVisible"
      width="650px"
      top="0"
      :before-close="cancelBtn"
      :close-on-click-modal="false"
      @open="open"
    >
      <div class="referHome">
        <el-form
          :model="formData"
          :rules="referRules"
          ref="formRef_stu"
          label-position="top"
          class="readForm"
        >
          <!-- 老师布置的作业 -->
          <div class="cont_title">
            <div class="line"></div>
            <div class="lf">
              <span>作业要求</span>
            </div>
          </div>
          <div class="cont_title_2">作业内容</div>
          <div v-html="work_contexts" class="cont_info">}</div>
          <div class="cont_title_2">相关附件</div>
          <div class="upload_box">
            <div v-if="teaFileList.length > 0">
              <div
                class="img_list"
                v-for="(item, index) in teaFileList"
                :key="index"
              >
                <div>
                  <el-image :src="fileImg"></el-image>
                  <div class="item_name">{{ item.name }}</div>
                  <div class="item_remove" @click="downloadStuFile(item.url)">
                    下载
                  </div>
                </div>
              </div>
            </div>

            <div v-if="teaFileList.length <= 0" class="img_list">
              <div>
                <div class="item_name">暂无相关附件</div>
              </div>
            </div>

            <div style="clear: both"></div>
          </div>
          <!-- 我的作业（未提交） -->
          <div class="cont_title">
            <div class="line"></div>
            我的作业
          </div>
          <el-form-item
            label="文字描述(如超过300字，建议以附件形式上传)"
            prop="stu_answer"
          >
            <el-input
              ref="stu_answer"
              type="textarea"
              v-model="formData.stu_answer"
              placeholder="请输入300字以内的描述"
              size="small"
              :maxlength="300"
              show-word-limit
              :disabled="student_status == 1 || student_status == 2"
            />
          </el-form-item>
          <el-form-item label="相关附件" prop="stu_enclosure_url">
            <div class="fj_info">1、请上传1-10份相关附件;</div>
            <div class="fj_info">
              2、单个附件大小不超过100M,支持JPG、JPEG、PNG、docx、doc、pdf、mp4等格式;
            </div>
            <div class="upload_box">
              <div
                class="img_list"
                v-for="(item, index) in fileList"
                :key="index"
              >
                <div>
                  <el-image class="home_icon" :src="fileImg"></el-image>
                  <div class="item_name">{{ item.name }}</div>
                  <div class="flex">
                    <div
                      v-show="student_status == 0"
                      class="item_remove"
                      @click="handleRemove(item)"
                    >
                      删除
                    </div>
                    <div
                      v-show="student_status == 0"
                      class="item_remove"
                      @click="handleCheck(item.url)"
                    >
                      查看作业
                    </div>
                    <!--查看作业图片  -->
                    <el-dialog
                      title="作业"
                      :visible.sync="dialogVisibleImage"
                      width="30%"
                      :before-close="handleImageClose"
                      append-to-body
                    >
                      <el-image
                        :src="item.url"
                        :preview-src-list="srcList"
                      ></el-image>
                    </el-dialog>
                  </div>
                </div>
              </div>

              <el-upload
                v-if="fileList.length < 10 && student_status == 0"
                ref="stu_enclosure_url"
                name="multipartFile"
                action="#"
                :file-list="fileList"
                :disabled="isUploading || fileList.length >= 10"
                :limit="10"
                list-type="picture-card"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="uploadPicture"
              >
                <i
                  v-if="!isUploading"
                  class="el-icon-plus avatar-uploader-icon"
                ></i>
                <i
                  v-if="isUploading"
                  class="el-icon-loading avatar-uploader-icon"
                ></i>
              </el-upload>
              <div
                class="upload_box"
                v-if="student_status == 1 || student_status == 2"
              >
                <div
                  class="img_list"
                  v-for="(item, index) in stu_fileList"
                  :key="index"
                >
                  <div>
                    <el-image :src="fileImg"></el-image>
                    <div class="item_name">{{ item.name }}</div>
                  </div>
                </div>
                <div v-if="stu_fileList.length <= 0" class="img_list">
                  <div>
                    <div class="item_name">暂无相关附件</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- </div> -->
          </el-form-item>
          <!-- 我的作业（已提交待评分 -不可编辑 ）-->
          <!-- <div v-if="student_status == 1 || student_status == 2">
          <div class="cont_title">
            <div class="line"></div>
            我的作业
          </div>
          <el-form-item label="文字描述(如超过300字，建议以附件形式上传)">
            <el-input
              type="textarea"
              v-model="formData.stu_answer"
              placeholder="请输入300字以内的描述"
              size="small"
              :maxlength="300"
              show-word-limit
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="相关附件">
            <div class="fj_info">1、请上传1-10份相关附件;</div>
            <div class="fj_info">
              2、单个附件大小不超过100M,支持JPG、JPEG、PNG、docx、doc、pdf、mp4等格式;
            </div>
            <div class="upload_box">
              <div
                class="img_list"
                v-for="(item, index) in stu_fileList"
                :key="index"
              >
                <div>
                  <el-image :src="fileImg"></el-image>
                  <div class="item_name">{{ item.name }}</div>
                </div>
              </div>
              <div v-if="stu_fileList.length <= 0" class="img_list">
                <div>
                  <div class="item_name">暂无相关附件</div>
                </div>
              </div>
            </div>
          </el-form-item>
        </div> -->
          <!-- 评阅结果 -->
          <div v-if="student_status == 2" style="height: 350px">
            <div class="cont_title">
              <div class="line"></div>
              <div class="lf">
                <span>评阅结果</span>
              </div>
            </div>
            <div v-if="this.time_out != 3" class="cont_title_2">导师评分</div>
            <div v-if="this.time_out != 3" class="cont_info">{{ score }}</div>
            
            
            <div v-if="this.time_out == 3" class="cont_title_2">导师评语</div>
            <div v-if="this.time_out == 3" v-html="teacher_commment" class="cont_info">}</div>
            <div v-if="this.time_out != 3" class="cont_title_2">相关附件</div>
            <div v-if="this.time_out != 3" class="upload_box">
              <div v-if="tea_scoreFileList.length > 0">
                <div
                  class="img_list"
                  v-for="(item, index) in tea_scoreFileList"
                  :key="index"
                >
                  <div>
                    <el-image :src="fileImg"></el-image>
                    <div class="item_name">{{ item.name }}</div>
                    <div
                      class="item_remove"
                      @click="downloadScoreFile(item.url)"
                    >
                      下载
                    </div>
                  </div>
                </div>
              </div>

              <div v-if="tea_scoreFileList.length <= 0" class="img_list">
                <div>
                  <div class="item_name">暂无相关附件</div>
                </div>
              </div>
            </div>
          </div>

          <el-form-item class="btn" v-if="student_status == 0">
            <el-button type="primary" v-preventReClick="1000" @click="confirm"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  PostWorkStudentOss,
  delPic,
  getStudentWork,
  subStudentWork,
  downloadTeacherWork,
} from "r/index/homework";
import fileImg from "@/assets/img/homework/file_img.png";

export default {
  name: "ReadForm",
  props: {
    dialogVisibleFu: Boolean,
    timeOut: [Number, String], //判断是超时
    work_contexts: [Number, String], //作业内容
    enclosure_urls: [Object, String], //老师作业地址
    work_nums: [Number],
    workName: [String], //作业名字
    student_status: [Number], //作业状态
    order_nums: [Number], //作业状态
  },
  data() {
    var validateNum = (rule, value, callback) => {
      console.log(value, "value");
      // let code = this.$store.state.indexIdentity;
      // this.formData.stu_enclosure_url = window.localStorage.getItem(
      //   "student_file_" + window.localStorage.getItem("phone" + code) + code
      // );
      // console.log(
      //   this.stu_fileList,' this.stu_fileList'
      // );
      // return
      // this.formData.stu_enclosure_url = this.stu_fileList
      console.log(this.formData.stu_answer);
      console.log(this.formData.stu_enclosure_url);
      if (
        this.formData.stu_answer == "" &&
        this.formData.stu_enclosure_url == ""
      ) {
        callback(new Error("请至少填写一项"));
      } else {
        callback();
      }
    };

    return {
      dialogVisibleImage: false,
      referRules: {
        stu_answer: [
          { required: true, validator: validateNum, trigger: "blur" },
        ],
        stu_enclosure_url: [
          { required: true, validator: validateNum, trigger: "blur" },
        ],
      },
      titleName: "",
      isUploading: false, // 图片上传蒙层
      work_context: "", //简介
      work_name: "", //作业名称
      time_out: 1,
      fileImg: fileImg,
      loading: false,
      dialogVisible: this.dialogVisibleFu,
      dialogVisibleimage: false,
      formData: {
        teacher_id: "",
        stu_answer: "",
        stu_enclosure_url: "",
      }, // 老师-评阅结果
      disabled: false, //限制输入框
      stu_fileListoss: "", // 学生-上传相关附件（展示-存在缓存）
      teaFileList: [], // 老师-布置作业附件
      fileList: [], //学生上传的作业文件
      stu_fileList: [], //学生上传的文件(传给接口的格式)
      score: "", //老师评分
      teacher_commment: "", //老师评语
      tea_scoreFileList: [], //老师评语的附件
      srcList: [], //在线预览图片-放大
    };
  },
  created() {
 
    // console.log(this.formData.stu_enclosure_url);
    let code = this.$store.state.indexIdentity;
    let stu_fileListoss = window.localStorage.getItem(
      "student_file_" + window.localStorage.getItem("phone" + code) + code
    );
    if (stu_fileListoss && JSON.parse(stu_fileListoss).length > 0) {
      this.stu_fileListoss = JSON.parse(stu_fileListoss);
    }
  },
  methods: {
    open() {
         console.log(this.timeOut)
    console.log(this.time_out)
      // console.log(this.student_status);
      this.titleName = this.order_nums;
      // console.log(this.student_status);
      this.getTeachList();
      if (this.student_status == 0) {
        this.formData = {};
      } else if (this.student_status == 1) {
        this.getStudentWork(this.student_status);
      } else if (this.student_status == 2) {
        this.getStudentWork(this.student_status);
      }
    },
    //老师作业展示
    getTeachList() {
      let url = this.enclosure_urls;
      // console.log(this.enclosure_urls);
      if (this.enclosure_urls) {
        let arr = url.split(",");
        arr.forEach((item) => {
          this.teaFileList.push({
            url: item,
            name: item.split("work/")[1],
            status: "success",
          });
        });
      } else {
        this.stu_fileList = [];
      }
    },

    // 下载老师附件
    downloadStuFile(url) {
      //   this.download(
      //     "http://api.campcenter.cn/web/download/downloadTeacherWork",
      //     {
      //       enclosure_url: url,
      //       identity: this.$store.state.indexIdentity
      //     },
      //  ""
      //   );
      downloadTeacherWork({ enclosure_url: url }).then((res) => {
        // console.log(res, "res");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        let url = res.data.url;
        let reg = /^.+(\.pdf|\.txt|\.mp3|\.mp4)$/;
        if (reg.test(url)) {
          window.open(url, "_black");
        } else {
          window.open(url, "_self");
        }
        this.$message.success("下载成功");
      });
    },
    // 下载老师评分结果
    downloadScoreFile(url) {
      downloadTeacherWork({ enclosure_url: url }).then((res) => {
        // console.log(res, "res");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        let url = res.data.url;
        let reg = /^.+(\.pdf|\.txt|\.mp3|\.mp4)$/;
        if (reg.test(url)) {
          window.open(url, "_black");
        } else {
          window.open(url, "_self");
        }
        this.$message.success("下载成功");
      });
    },
    // 学生作业回显
    getStudentWork(student_status) {
      // console.log(student_status, "student_status");
      let stu_work_num = this.work_nums;
      // console.log(stu_work_num);
      // console.log(this.formData);
      //  return
      getStudentWork({ teacher_id: stu_work_num }).then((res) => {
        // console.log(res, "getStudentWork");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.$message.success(res.data.message);
        if (student_status == 1) {
          // 学生已提交
          this.formData.stu_answer = res.data.data.stu_answer;
          // console.log(this.formData);
          let gotfileList = res.data.data.stu_enclosure_url_arr;
          if (gotfileList) {
            this.stu_fileList = gotfileList.map((item) => {
              return {
                name: item.split("/work/")[1],
                url: item,
              };
            });
          }
          this.$forceUpdate();
        } else if (student_status == 2) {
          //老师已评阅
          this.formData.stu_answer = res.data.data.stu_answer;
          let gotfileList = res.data.data.stu_enclosure_url_arr;
          if (gotfileList) {
            this.stu_fileList = gotfileList.map((item) => {
              return {
                name: item.split("/work/")[1],
                url: item,
              };
            });
          }
          this.score = res.data.data.score; //老师评分
          this.teacher_commment = res.data.data.teacher_commment; //老师评语
          // console.log(res.data.data.teacher_commment, " this.teacher_commment");
          let scoreFileList = res.data.data.teacher_url;
          if (scoreFileList) {
            let arr = scoreFileList.split(",");
            // console.log(arr, "arr");
            this.tea_scoreFileList = arr.map((item) => {
              return {
                name: item.split("workforstudent/")[1],
                url: item,
              };
            });
          }
          this.$forceUpdate(); //强制刷新
        }
      });
    },

    // 未完成
    notReadHandle() {
      this.formData.teacher_id = this.work_nums;
      // if (!this.formData.stu_enclosure_url) {
      // delete this.formData.stu_enclosure_url;
      // } else {
      this.formData.stu_enclosure_url = this.stu_fileListoss;
      // }
      // if (!this.formData.stu_answer) {
      //   delete this.formData.stu_answer;
      // }
      // console.log(this.stu_fileList, "this.stu_fileList");
      // return
      subStudentWork(this.formData)
        .then((response) => {
          // console.log(response);
          if (response.data.code != 200) {
            return this.$message.error(response.data.message);
          }
          this.$message.success(response.data.message);
          this.cancelBtnTrue();
        })
        .catch((error) => {
          console.log(error);
        });
    },

    // 成功确认取消,关闭弹框，修改父组件的值
    cancelBtnTrue() {
      let code = this.$store.state.indexIdentity;
      window.localStorage.removeItem(
        "student_file_" + window.localStorage.getItem("phone" + code) + code
      );
      this.stu_fileList = [];
      this.fileList = [];
      this.stu_fileListoss = "";
      this.teaFileList = [];

      this.$refs["formRef_stu"].resetFields();
      this.dialogVisible = false;
      this.$emit("closeDialog", this.dialogVisible, true);
      // this.$parent.getTeacherWork();
      // location.reload();
    },
    // 取消,关闭弹框，修改父组件的值
    cancelBtn() {
      let code = this.$store.state.indexIdentity;
      window.localStorage.removeItem(
        "student_file_" + window.localStorage.getItem("phone" + code) + code
      );
      this.stu_fileList = [];
      this.fileList = [];
      this.stu_fileListoss = "";
      this.teaFileList = [];

      this.dialogVisible = false;
      this.$emit("closeDialog", this.dialogVisible, false);
    },
    //上传前
    beforeAvatarUpload(file) {
      const isLt500M = file.size / 1024 / 1024 < 500;
      if (!isLt500M) {
        this.$message.info("上传图片大小不能超过 500MB!");
      }
      return isLt500M;
    },

    uploadPicture(params) {
      this.isUploading = true;
      // console.log("已经准备好上传图片", params);
      this.file = params.file;
      // console.log(this.file, "1111");
      console.log(this.file, "1111");
      let raw = params.file;
      let image = {
        name: raw.name,
        size: raw.size,
        type: raw.type,
      };
      this.getOssConfigs(image, params.file);
    },
    async getOssConfigs(image, file) {
      let obj = {
        url: "",
        savefile: "",
      };
      await PostWorkStudentOss({
        image: image,
        teacher_id: this.work_nums,
      })
        .then((res) => {
          // console.log(res, "开始上传图片");
          if (res.data.code === 200) {
            let oss_url = res.data.config.host;
            let filename = res.data.config.file;
            let formData = new FormData();
            formData.append("OSSAccessKeyId", res.data.config.accessid);
            formData.append("policy", res.data.config.policy);
            formData.append("signature", res.data.config.signature);
            formData.append("filename", res.data.config.file);
            formData.append("key", res.data.config.savefile);
            formData.append("callback", res.data.config.callback);
            formData.append("success_action_status", 200);
            formData.append("file", file);
            // console.log(formData);
            this.upload(oss_url, formData)
              .then((ress) => {
                console.log(ress, "ress");
                if (ress.data.code != 200) {
                  // console.log(ress, "ress");
                  this.isUploading = false;
                  return this.$message.error(ress.data.message);
                }
                this.resultPicture = filename + "?t=" + Date.parse(new Date());
                this.$forceUpdate();
                this.$message.success("上传成功");
                obj = {
                  url: ress.data.picture_path,
                  savefile: res.data.config.savefile,
                  name: res.data.config.savefile.split("/work/")[1],
                };
                this.fileList.push(obj);
                // console.log(this.fileList, "fileList");
                this.stu_fileListoss = this.fileList
                  .map((item) => {
                    return item.url;
                  })
                  .join(",");
                this.formData.stu_enclosure_url = this.stu_fileListoss;
                // console.log(this.stu_fileListoss, "stu_fileListoss");
                let code = this.$store.state.indexIdentity;
                window.localStorage.setItem(
                  "student_file_" +
                    +window.localStorage.getItem("phone" + code) +
                    code,
                  JSON.stringify(this.stu_fileListoss)
                );
                this.isUploading = false;
              })
              .catch((err) => {
                this.isUploading = false;
                this.$message.error(err);
              });
          } else {
            this.isUploading = false;
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.isUploading = false;
          // console.log(err);
        });
    },
    // 下载证明资料图片
    handleDownload(file) {
      // console.log(file,'file22');
      window.location.href = file.url;
    },
    //删除图片
    handleRemove(file) {
      // console.log(file, "file");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let getfile = file.url;
          // console.log(savefile.match(/^(?:[^\/]|\/\/)*/),'222222')；//获取域名
          let str = getfile.split(
            "https://campiste.oss-cn-beijing.aliyuncs.com/"
          ); //https://yingdi-achievement.oss-cn-beijing.aliyuncs.com/进行分割，
          // console.log(str, "str");
          let savefile = str[1];
          // console.log(savefile, "savefile");
          let stu_work_num = this.work_nums;
          delPic({ object: savefile, teacher_id: stu_work_num }).then((res) => {
            // console.log(res, "delpic");
            if (res.data.code != 200) {
              return this.$message.error(res.data.message);
            }
            // console.log(this.fileList);
            // console.log(this.stu_fileListoss);
            this.fileList.forEach((item, idx) => {
              // console.log(idx, "idx");
              // console.log(item.url == file.url);
              if (item.url == file.url) {
                this.fileList.splice(idx, 1);
                let code = this.$store.state.indexIdentity;
                window.localStorage.setItem(
                  "student_file_" +
                    window.localStorage.getItem("phone" + code) +
                    code,
                  JSON.stringify(this.stu_fileListoss)
                );
              }
            });

            this.stu_fileListoss = this.fileList
              .map(function (item, index) {
                undefined;
                return item.url;
              })
              .join(",");
            // console.log(this.stu_fileListoss);
            // console.log(this.fileList);
            this.$message.success(res.data.message);
          });
        })
        .catch((err) => {
          // console.log(err, "err");
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    // 查看已上传的学生作业
    handleCheck(url) {
      console.log(url, "url");
      // console.log(url.match(/\.(jpeg|jpg|gif|png)$/) != null)
      // 是否为图片
      if (url.match(/\.(jpeg|jpg|gif|png)$/) != null) {
        this.dialogVisibleImage = true;
        // console.log(url.split(" "),'111')
        this.srcList = url.split(" ");
      } else {
        let onlineViewType = [
          "doc",
          "docx",
          "xls",
          "xlsx",
          "xlsm",
          "ppt",
          "pptx",
        ];
        let fileTypeName = url
          .substring(url.lastIndexOf(".") + 1, url.length)
          .split("?")[0];
        let isWord = onlineViewType.find((type) => type === fileTypeName);
        if (isWord) {
          url = "http://view.officeapps.live.com/op/view.aspx?src=" + url;
        }
        window.open(url, "_blank");
      }
    },
    handleImageClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 提交按钮
    confirm() {
      this.$confirm(
        "提交后不可以修改本次作业和填写其他作业，您确认要提交本次作业吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$refs["formRef_stu"].validate((valid) => {
            if (!valid) return;
            // console.log(valid, "valid");
            // 未完成
            // return
            this.notReadHandle();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },

  watch: {
    dialogVisibleFu() {
      this.dialogVisible = this.dialogVisibleFu;
    },
    work_nums() {
      this.formData.teacher_id = this.work_nums;
    },
    workName() {
      this.work_name = this.workName;
    },
    timeOut() {
      this.time_out = this.timeOut;
      console.log(this.time_out, "timeout");
    },
  },
};
</script>

<style scoped lang="scss">
@import "a/scss/btn";
@import "a/scss/homework/refer";
.flex {
  display: flex;
}
</style>






