<template>
  <q-dialog
    v-model="persistent"
    content-class="bg-grey-1"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 800px; max-width: 900px" class="stop">
      <q-card-section>
        <div class="text-h6">创建停课申请单</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        <!-- <div class="text-caption q-mb-lg q-px-md text-grey-6">基本资料</div> -->
        <div class="col flex items-center">
          <div class="col-2 text-grey-6">停课生效日期：</div>
          <el-date-picker
            v-model="msg.TakeEffectTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            :picker-options="pickeroptions"
          >
          </el-date-picker>
        </div>
        <q-input
          filled
          type="textarea"
          :rows="3"
          style="margin-top: 20px"
          stack-label
          maxlength="2000"
          v-model="msg.Remarks"
          :dense="false"
          class="col-12 q-pb-lg"
          label="申请备注"
        />
        <div class="row">
          <div class="col-12 text-grey-6">
            上传附件：<span class="fj-tip" style="font-size: 10px; color: #f00"
              >*单文件限制5M内</span
            >
          </div>
          <div>
            <!-- <p>{{$t('fnc.scfujian')}}<span class="_addUpload_tips">{{$t('tips.wjdxbncgsz')}}</span></p> -->
            <div class="_addUpload_box clearfix">
              <template v-for="(file, fIndex) in saveMsg">
                <div v-if="file.Type == 3">
                  <div style="width: 100%; height: 100%; overflow: hidden">
                    <img
                      :src="file.Url ? file.Url : file.Content"
                      @click="showUpLoadFile(file)"
                    />
                  </div>
                  <span
                    class="iconfont icon-guanbi1"
                    @click="deleteUploadFile(fIndex)"
                  ></span>
                </div>
                <div v-if="file.Type == 1">
                  <div
                    class="iconfont"
                    :class="
                      file.Content.substring(
                        file.Content.lastIndexOf('.') + 1,
                        file.Content.length
                      ).toUpperCase() == 'PDF'
                        ? 'icon-pdf'
                        : file.Content.substring(
                            file.Content.lastIndexOf('.') + 1,
                            file.Content.length
                          ).toUpperCase() == 'TXT'
                        ? 'icon-txt'
                        : file.Content.substring(
                            file.Content.lastIndexOf('.') + 1,
                            file.Content.length
                          ).toUpperCase() == 'DOCX' ||
                          file.Content.substring(
                            file.Content.lastIndexOf('.') + 1,
                            file.Content.length
                          ).toUpperCase() == 'DOC'
                        ? 'icon-word'
                        : 'icon-excel'
                    "
                    @click="showUpLoadFile(file)"
                  ></div>
                  <span
                    class="iconfont icon-guanbi1"
                    @click="deleteUploadFile(fIndex)"
                  ></span>
                </div>
                <div v-if="file.Type == 2">
                  <div
                    class="iconfont icon-wenjian"
                    @click="showUpLoadFile(file)"
                  ></div>
                  <span
                    class="iconfont icon-guanbi1"
                    @click="deleteUploadFile(fIndex)"
                  ></span>
                </div>
                <div v-if="file.Type == 4">
                  <div
                    class="iconfont icon-yasuobao"
                    @click="showUpLoadFile(file)"
                  ></div>
                  <span
                    class="iconfont icon-guanbi1"
                    @click="deleteUploadFile(fIndex)"
                  ></span>
                </div>
                <div v-if="file.Type == 5">
                  <div
                    class="iconfont icon-shipin"
                    @click="showUpLoadFile(file)"
                  ></div>
                  <span
                    class="iconfont icon-guanbi1"
                    @click="deleteUploadFile(fIndex)"
                  ></span>
                </div>
              </template>
              <div class="_pic_upload">
                <el-upload
                  drag
                  :http-request="uploadFileBtn"
                  :multiple="true"
                  :show-file-list="false"
                  action=""
                >
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <div class="el-upload__text">
                    {{ $t("active.ld_djscwj") }}
                  </div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right" class="bg-white">
        <q-btn
          label="取消"
          flat
          color="grey-10"
          style="font-weight: 400 !important"
          @click="closeSaveForm"
        />
        <q-btn
          label="立即提交"
          color="accent q-px-md"
          style="font-weight: 400 !important"
          :loading="saveLoading"
          @click="save"
        />
      </q-card-actions>
      <div
        v-if="picIsShow"
        class="_show_img_box"
        @click="(picIsShow = false), (picObj = [])"
      >
        <div
          style="
            position: absolute;
            max-width: 800px;
            height: auto;
            left: 50%;
            top: 50%;
            margin-left: -400px;
            margin-top: -300px;
          "
        >
          <el-image
            style="width: 100%; height: 100%"
            fit="cover"
            v-for="(item, index) in picObj"
            :key="index"
            :src="item"
            :preview-src-list="picObj"
          >
          </el-image>
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>

<script>
import { setStopClassApply } from "../../api/teacher/student";
import { UploadSelfFile } from "../../api/common/common";
export default {
  props: {
    setObj: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      persistent: true,
      saveLoading: false,
      msg: {
        Id: 0,
        ClassId: 0,
        CourseId: 0,
        OrderGuestId: 0,
        TakeEffectTime: "",
        OldStudentStatus: 0,
        Remarks: "",
        ReceiptFileList: [],
      },
      pickeroptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now() - 8.64e7;
        },
      },
      saveMsg: [],
      //附件---s
      picIsShow: false,
      picObj: [],
      initialIndex: 0,
      //附件---e
    };
  },
  mounted() {
    if (this.setObj) {
      this.msg.ClassId = this.setObj.ClassId;
      this.msg.CourseId = this.setObj.CourseId;
      this.msg.OrderGuestId = this.setObj.Id;
      this.msg.OldStudentStatus = this.setObj.GuestState;
    }
  },
  methods: {
    closeSaveForm() {
      this.$emit("close");
      this.persistent = false;
    },
    save() {
      if (this.msg.TakeEffectTime == "" || !this.msg.TakeEffectTime) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `请选择停课生效日期：`,
        });
        return;
      }
      if (this.msg.Remarks == "" || !this.msg.Remarks) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `请填写申请备注`,
        });
        return;
      }
      if (this.msg.ReceiptFileList.length === 0) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `请上传附件`,
        });
        return;
      }
      this.saveLoading = true;
      setStopClassApply(this.msg)
        .then((res) => {
          this.saveLoading = false;
          if (res.Code === 1) {
            this.persistent = false;
            this.$message.success("操作成功");
            this.$emit("success");
          } else {
            this.$message.error(res.Message);
          }
        })
        .catch((err) => {
          this.saveLoading = false;
        });
    },
    showUpLoadFile(i) {
      // 预览上传文件
      if (i.Type == 3) {
        this.picObj.push(i.Url);
        // this.imgList.push(i.Url)
        this.picIsShow = true;
      } else {
        if (
          i.Content.substring(
            i.Content.lastIndexOf(".") + 1,
            i.Content.length
          ).toUpperCase() == "PDF" ||
          i.Content.substring(
            i.Content.lastIndexOf(".") + 1,
            i.Content.length
          ).toUpperCase() == "TXT"
        ) {
          this.previewPDF(i.Url);
        } else {
          window.open(
            "https://view.officeapps.live.com/op/view.aspx?src=" + i.Url
          );
        }
      }
    },
    deleteUploadFile(i) {
      // 删除上传文件
      this.saveMsg.splice(i, 1);
      this.msg.ReceiptFileList.splice(i, 1);
    },
    uploadFileBtn(file) {
      //上传
      if (file.file.size > 1024 * 1024 * 5) {
        this.$message.warning("文件大小不能超过5M");
        return;
      }
      //  1 文档  2 数据 3 图片,4压缩包，5视频
      let typeArr = [
        {
          stringArr: "GIF|JPG|JPEG|PNG|BMP|WEBP",
          type: 3,
        },
        {
          stringArr: "DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF|TXT",
          type: 1,
        },
        {
          stringArr: "ZIP|RAR|7Z|TAR",
          type: 4,
        },
        {
          stringArr: "MP4|3GP|AVI|MOV|WMV|RMVB|MKV|M4V|FLV",
          type: 5,
        },
      ];
      let ft = file.file.name
        .substring(file.file.name.lastIndexOf(".") + 1, file.file.name.length)
        .toUpperCase();
      let fileTypeNumber = 2;
      typeArr.forEach((x) => {
        if (x.stringArr.indexOf(ft) != "-1") {
          fileTypeNumber = x.type;
        }
      });
      this.$message.info(this.$t("tips.shangchuanzhong"));
      UploadSelfFile(
        "Temporary",
        file.file,
        (x) => {
          if (x.Code == 1) {
            this.saveMsg.push({
              Content: x.FileUrl,
              ID: 0,
              Type: fileTypeNumber,
              Url: x.FileUrl,
            });
            this.msg.ReceiptFileList.push(x.FileUrl);
            this.$message.success(this.$t("tips.scchenggong"));
          }
        },
        1
      );
    },
  },
};
</script>

<style>
._font_size12 {
  font-size: 12px !important;
}

._addUpload_box {
  display: block;
  margin-top: 15px;
}

._addUpload_box img {
  width: 100%;
}

._addUpload_box > div {
  float: left;
  width: 138px;
  height: 92px;
  border: 1px dashed rgba(210, 210, 210, 1);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 5px;
  margin-right: 10px;
  position: relative;
}

._addUpload_box > div:hover {
  background-color: #f5f5f5;
}

._addFile_name {
  padding-left: 15px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._addUpload_box .icon-guanbi1 {
  font-size: 12px;
  color: white;
  display: inline-block;
  margin-left: 15px;
  position: absolute;
  right: -6px;
  top: -9px;
  background-color: #f56c6c;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
}

._addUpload_box .icon-guanbi1:hover {
  font-size: 12px;
  color: #c94052;
}

._addUpload_box .icon-excel,
._addUpload_box .icon-pdf,
._addUpload_box .icon-txt,
._addUpload_box .icon-wenjian,
._addUpload_box .icon-yasuobao,
._addUpload_box .icon-shipin,
._addUpload_box .icon-word {
  text-align: center;
  font-size: 38px;
  color: green;
  line-height: 75px;
}
._addUpload_box .icon-yasuobao {
  color: gray;
}
._show_img_box {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  width: 100vw !important;
  height: 100vh;
  z-index: 999;
  text-align: center;
}

._addUpload_tips {
  font-size: 12px;
  color: #999999;
}

._jump_page {
  cursor: pointer;
  text-decoration: underline;
}

._jump_page:hover {
  color: #c94052;
}
.stop .el-upload-dragger {
  font-size: 28px;
  color: #8c939d;
  width: 126px;
  height: 80px;
  line-height: 41px;
  text-align: center;
}
</style>
