<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>
          <!-- <div class="text-caption q-mb-lg q-px-md text-grey-6">上课时间</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>

          <!-- <div class="text-caption q-mb-lg q-px-md text-grey-6">学员列表</div> -->
          <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>
              <!-- <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-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;
            width: 800px;
            height: 600px;
            left: 50%;
            top: 50%;
            margin-left: -400px;
            margin-top: -300px;
          "
        >
          <el-carousel
            :initial-index="initialIndex"
            height="600px"
            :interval="5000"
            trigger="click"
          >
            <el-carousel-item
              style="height: 600px; overflow: auto"
              v-for="(item, index) in picObj"
              :key="index"
            >
              <img :src="item" style="" />
            </el-carousel-item>
          </el-carousel>
        </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;
      }
      // if (this.msg.ReceiptFileList.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>

<style >
</style>
