<style>
  .common_Style {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
  }

  .classForm_monday {
    background-color: #ced9f8;
    color: #2961fe;
  }

  .classForm_tuesday {
    background-color: #d9f3ff;
    color: #3fc4ff;
  }

  .classForm_wednesday {
    background-color: #f6e2cb;
    color: #f28c1d;
  }

  .classForm_thursday {
    background-color: #ccf3eb;
    color: #02c499;
  }

  .classForm_friday {
    background-color: #f7cfd6;
    color: #f72e52;
  }

  .classForm_saturday {
    background-color: #fff5cc;
    color: #ffcc00;
  }

  .classForm_sunday {
    background-color: #e6e3fe;
    color: #8175fb;
  }

  .planTimeLi tbody::before {
    content: "";
    display: table-row;
    height: 20px;
  }

  ._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>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 1000px; max-width: 1000px" class="stop">
      <q-card-section>
        <div class="text-h6">创建临时上课邀请申请单</div>
      </q-card-section>
      <q-card-section class="q-pt-none" style="height: 80vh">
        <q-scroll-area :thumb-style="thumbStyle" :content-style="contentStyle"
          :content-active-style="contentActiveStyle" class="full-width full-height">
          <div class="row q-col-gutter-lg">
            <q-select filled stack-label option-value="ClassId" option-label="ClassName" v-model="msg.ClassId"
              :options="classList" @input="changeClass" emit-value map-options label="班级" class="col-6" use-input
              clearable @filter="filterFn">
              <template v-slot:option="{
                  itemProps,
                  itemEvents,
                  opt,
                  selected,
                  toggleOption,
                }">
                <q-item v-bind="itemProps" v-on="itemEvents">
                  <q-item-section>
                    <q-item-label v-html="opt.ClassName"></q-item-label>
                  </q-item-section>
                  <q-item-section side>
                    <q-item-label v-html="opt.OpenTime"></q-item-label>
                  </q-item-section>
                </q-item>
              </template>
            </q-select>
          </div>
          <div class="row items-center q-ma-sm"></div>
          <q-expansion-item expand-separator label="上课时间" :value="true">
            <div class="col">
              <q-table no-data-label="暂无相关数据" flat :pagination="pages"
                class="sticky-column-table sticky-header-column-table" separator="none" :data="currentClass"
                :columns="columns" row-key="index" selection="multiple" :selected.sync="selected">
                <template v-slot:body-cell-TimeList="props">
                  <q-td auto-width :props="props">
                    {{ props.row.StartTime }}-{{ props.row.EndTime }}
                  </q-td>
                </template>
                <template v-slot:bottom></template>
              </q-table>
            </div>
          </q-expansion-item>
          <q-expansion-item expand-separator label="学员列表" :value="true">
            <div class="row q-mb-md q-col-gutter-lg">
              <q-input filled v-model="msg.GuestName" clearable class="col-6" label="学员姓名" maxlength="200"
                @clear="getNotClassStudentList">
                <template v-slot:append>
                  <q-icon name="search" style="cursor: pointer" @click="getNotClassStudentList" />
                </template>
              </q-input>
            </div>
            <div class="row items-center">
              <div class="col">
                <q-table no-data-label="暂无相关数据" flat :pagination="pages"
                  class="sticky-column-table sticky-header-column-table" :data="stuList" :columns="stuColumns"
                  row-key="Id" selection="multiple" :selected.sync="selectedStu">
                  <template v-slot:bottom></template>
                </q-table>
              </div>
            </div>
          </q-expansion-item>
          <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>
              <div class="_addUpload_box clearfix">
                <template v-for="(file, fIndex) in saveMsg">
                  <div v-if="file.Type == 3" :key="fIndex">
                    <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" :key="fIndex+100000">
                    <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" :key="fIndex+200000">
                    <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" :key="fIndex+300000">
                    <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" :key="fIndex+400000">
                    <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-scroll-area>
      </q-card-section>
      <q-separator />
      <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 {
    getClassDropDownList
  } from "../../api/school/index";
  import {
    UploadSelfFile
  } from "../../api/common/common";
  import {
    getNotClassStudentList,
    setStuInviteApply,
  } from "../../api/teacher/student";
  import Lockr from "lockr";
  export default {
    data() {
      return {
        pages: {
          rowsPerPage: 0,
        },
        persistent: true,
        saveLoading: false,
        contentStyle: {},
        contentActiveStyle: {},
        thumbStyle: {
          right: "2px",
          borderRadius: "5px",
          backgroundColor: "#027be3",
          width: "5px",
          opacity: 0.75,
        },
        msg: {
          ClassId: 0,
          GuestName: "",
          Remarks: "", //备注
          ReceiptFileList: [],
        },
        selected: [],
        classList: [],
        classListAll: [],
        queryClass: {
          CourseId: 0,
          IsAddDefault: 1,
          SchoolId: -1,
          Teacher_Id: 0,
          MoreStatus: "1,2",
          IsQuerySurplusPlan: 1,
        },
        currentClass: [],
        columns: [{
            name: "RoomName",
            label: "教室名称",
            field: "RoomName",
            align: "left",
          },
          {
            name: "ClassDate",
            label: "上课日期",
            field: "ClassDate",
            align: "left",
          },
          {
            name: "TeacherName",
            label: "老师",
            field: "TeacherName",
            align: "left",
          },
          {
            name: "TimeList",
            label: "上课时间",
            field: "TimeList",
            align: "left",
          },
        ],
        classSetMsg: {
          OpenTime: "", //开班时间
          ClassStyle: 1, //排课方式(1-周，2-月，3-固定日期，4-约课)
          ClassHours: "",
          ClassHourMinute: "",
        },
        stuList: [],
        selectedStu: [],
        stuColumns: [{
            name: "Id",
            label: "编号",
            field: "Id",
            align: "left",
          },
          {
            name: "GuestName",
            label: "姓名",
            field: "GuestName",
            align: "left",
          },
          {
            name: "Mobile",
            label: "电话",
            field: "Mobile",
            align: "left",
          },
          {
            name: "ClassName",
            label: "班级",
            field: "ClassName",
            align: "left",
          },
          {
            name: "CourseName",
            label: "课程",
            field: "CourseName",
            align: "left",
          },
        ],
        saveMsg: [],
        picIsShow: false,
        picObj: [],
        initialIndex: 0,
      };
    },
    mounted() {
      let u = Lockr.get("loginUserInfo");
      if (u) {
        this.queryClass.Teacher_Id = u.AccountId;
      }
      this.getClass();
    },
    methods: {
      closeSaveForm() {
        this.$emit("close");
        this.persistent = false;
      },
      changeClass(val) {
        if (!val) {
          return;
        }
        this.currentClass = [];
        let list = this.classList.find((x) => {
          return x.ClassId == val;
        }).PlanList;
        list.map((item) => {
          item.TimeList.map((_item) => {
            let obj = JSON.parse(JSON.stringify(item));
            delete obj.TimeList;
            obj = {
              ...obj,
              ..._item,
            };
            this.currentClass.push(obj);
          });
        });
        this.currentClass.forEach((e, i) => {
          e.index = i + 1;
        });
        this.getNotClassStudentList();
      },
      getClass() {
        getClassDropDownList(this.queryClass).then((res) => {
          this.classList = [];
          this.msg.ClassId = 0;
          if (res.Code == 1) {
            res.Data.forEach((x) => {
              x.PlanList.forEach((y) => {
                let newPlan = JSON.parse(JSON.stringify(y));
                y.NewPlan = newPlan;
              });
            });
            this.classList = res.Data;
            this.classListAll = res.Data;
            var obj = {
              ClassName: "请选择",
              ClassId: 0,
            };
            this.classList.unshift(obj);
          }
        });
      },
      //筛选班级
      filterFn(val, update) {
        update(() => {
          if (val === "") {
            this.classList = JSON.parse(JSON.stringify(this.classListAll));
          } else {
            const needle = val.toLowerCase();
            this.classList = this.classListAll.filter(
              (v) => v.ClassName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取除本班学生的列表
      getNotClassStudentList() {
        if (this.msg.ClassId < 0 || !this.msg.ClassId) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: "请选择班级",
          });
          return;
        }
        if (!this.msg.GuestName) {
          this.msg.GuestName = "";
        }
        let obj = {
          ClassId: this.msg.ClassId,
          GuestName: this.msg.GuestName,
        };
        getNotClassStudentList(obj).then((res) => {
          if (res.Code === 1) {
            this.stuList = res.Data;
          }
        });
      },
      //提交
      save() {
        if (this.msg.ClassId <= 0) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: "请选择班级",
          });
          return;
        }
        if (this.selected.length === 0) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: "至少选择一次上课时间",
          });
          return;
        }
        if (this.selectedStu.length === 0) {
          this.$q.notify({
            type: "negative",
            position: "top",
            message: "至少选择一个学员",
          });
          return;
        }
        let timesIds = this.selected
          .map((e) => {
            return e.ClassTimeId;
          })
          .toString();
        let stuIds = this.selectedStu
          .map((e) => {
            return e.Id;
          })
          .toString();
        let obj = {
          Id: 0,
          ClassId: this.msg.ClassId,
          ClassTimeIds: timesIds,
          OrderGuestIds: stuIds,
          Remarks: this.msg.Remarks,
          ReceiptFileList: this.msg.ReceiptFileList,
        };
        this.saveLoading = true;
        setStuInviteApply(obj)
          .then((res) => {
            this.saveLoading = false;
            if (res.Code === 1) {
              this.$q.notify({
                icon: "iconfont icon-chenggong",
                color: "accent",
                timeout: 2000,
                message: "操作成功！",
                position: "top",
              });
              this.persistent = false;
              this.$emit("success");
              this.$emit("close");
            } else {
              this.$q.notify({
                type: "negative",
                position: "top",
                message: res.Message,
              });
            }
          })
          .catch((err) => {
            this.saveLoading = false;
          });
      },
      showUpLoadFile(i) {
        // 预览上传文件
        if (i.Type == 3) {
          this.picObj.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 图片
        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;
          }
        });
        let newArr = [];
        newArr.push(file.file);
        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>