<style>
.apply_List {
  width: 100%;
  height: 44px;
  background-color: #f7f7f7;
  line-height: 44px;
  margin-bottom: 10px;
}

.apply_List span {
  display: inline-block;
  text-align: center;
  font-size: 14px;
  color: #000000;
}

.guest_Status span {
  cursor: pointer;
  color: #2961fe;
}

._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="IsShowBackClassDialog"
    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>
      <div style="margin: 20px">
        <div>
          <div
            class="apply_List"
            v-for="(item, index) in studentList"
            :key="index"
            v-if="item.IsShow"
          >
            <span style="width:10%  white-space: nowrap;">{{
              item.GuestName
            }}</span>
            <span style="width: 10%">{{ item.SexStr }}</span>
            <span style="width: 10%">{{ item.Age }}</span>
            <span style="width: 20%">{{ item.Mobile }}</span>
            <span style="width: 10%">
              <template v-if="item.ClassHours"
                >已学：{{ item.ClassHours }}课时
              </template>
            </span>
            <span style="width: 10%">{{ item.GuestStateStr }}</span>
            <span style="width: 20%" class="guest_Status">
              <span v-if="item.GuestState == 1" @click="clickItem(item, 1)"
                >申请</span
              >
              <span
                style="margin-left: 10px"
                v-if="item.GuestState == 4"
                @click="clickItem(item, 2)"
                >重新申请</span
              >
              <span
                style="margin-left: 10px"
                v-if="chooseItem && chooseItem.Id == item.Id"
                @click="cancelApply"
                >取消申请</span
              >
            </span>
          </div>
        </div>
        <div class="row" style="margin-top: 20px">
          <div class="col-6 q-pr-lg">
            <q-input
              filled
              v-model="BackAccountName"
              label="退还账户名"
            ></q-input>
          </div>
          <div class="col-6">
            <q-input filled v-model="BackAccount" label="退还账号"></q-input>
          </div>
        </div>
        <q-input
          filled
          stack-label
          :dense="false"
          v-model="applyReason"
          style="margin-top: 20px"
          type="textarea"
          class="col-12"
          label="申请理由"
        />
        <q-input
          filled
          stack-label
          :dense="false"
          v-model="StateMent"
          style="margin-top: 20px"
          type="textarea"
          class="col-12"
          label="协议申明（在退课协议中显示）"
        />
        <div class="row">
          <div class="col-12 q-mt-md 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-separator />
      </div>
      <q-card-actions align="right" class="bg-white">
        <q-btn
          label="取消"
          flat
          color="grey-10"
          style="font-weight: 400 !important"
          @click="closeBackClassForm"
        />
        <q-btn
          label="确认申请"
          color="accent"
          class="q-px-md"
          style="font-weight: 400 !important"
          @click="saveOrderBackClass"
        />
      </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 { getOrderGuestPageList, SetBackClassApply } from "../../api/sale/sale";
import { UploadSelfFile } from "../../api/common/common";
export default {
  name: "backclass-form",
  props: {
    saveObj: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      IsShowBackClassDialog: true,
      backClassMsg: {
        OrderId: 0,
        ClassId: 0,
        pageIndex: 1,
        pageSize: 1000,
      },
      applyReason: "", //申请理由
      loading: false,
      columns: [
        {
          name: "GuestName",
          label: "姓名",
          field: "GuestName",
          align: "left",
        },
        {
          name: "SexStr",
          label: "性别",
          field: "SexStr",
          align: "left",
        },
        {
          name: "Age",
          label: "年龄",
          field: "Age",
          align: "left",
        },
        {
          name: "Mobile",
          label: "联系电话",
          align: "left",
          field: "Mobile",
        },
        {
          name: "ClassHours",
          label: "已上课时",
          field: "ClassHours",
          align: "left",
        },
        {
          name: "GuestStateStr",
          label: "状态",
          field: "GuestStateStr",
          align: "left",
        },
        {
          name: "optioned",
          label: "操作",
          field: "Id",
        },
      ],
      studentList: [], //学员列表
      chooseItem: {}, //当前选择项
      saveMsg: [],
      ReceiptFileList: [],
      picIsShow: false,
      picObj: [],
      initialIndex: 0,

      BackAccountName: "", //退还户名
      BackAccount: "", //退还账户
      StateMent: "", //协议申明
    };
  },
  created() {
    this.backClassMsg.OrderId = this.saveObj.OrderId;
    this.backClassMsg.ClassId = this.saveObj.ClassId;
    this.getStudentList();
  },
  methods: {
    //取消申请
    cancelApply() {
      this.chooseItem = {};
      if (this.studentList && this.studentList.length > 0) {
        this.studentList.forEach((item) => {
          item.IsShow = true;
        });
      }
    },
    //当前点击项
    clickItem(item, type) {
      if (this.studentList && this.studentList.length > 0) {
        this.studentList.forEach((item) => {
          item.IsShow = false;
        });
      }
      item.IsShow = true;
      this.chooseItem = item;
    },
    //关闭弹窗
    closeBackClassForm() {
      this.IsShowBackClassDialog = false;
      this.applyReason = "";
      this.backClassMsg.OrderId = 0;
      this.backClassMsg.ClassId = 0;
      this.chooseItem = {};
      this.$emit("close");
    },
    //获取订单学员列表
    getStudentList() {
      this.studentList = [];
      getOrderGuestPageList(this.backClassMsg).then((res) => {
        if (res.Code == 1) {
          this.studentList = res.Data.PageData;
        }
      });
    },
    //获取学员退课申请
    saveOrderBackClass() {
      if (!this.chooseItem) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `请选择要申请的学员`,
        });
        return;
      }
      var applyMsg = {
        GuestId: this.chooseItem.Id,
        OrderId: this.chooseItem.OrderId,
        applyReason: this.applyReason,
        ReceiptFileList: this.ReceiptFileList,
        BackAccountName: this.BackAccountName,
        BackAccount: this.BackAccount,
        StateMent: this.StateMent,
      };
      if (!applyMsg.GuestId) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `请选择要申请的学员`,
        });
        return;
      }
      if (applyMsg.ReceiptFileList.length === 0) {
        this.$q.notify({
          type: "negative",
          position: "top",
          message: `请上传附件`,
        });
        return;
      }
      SetBackClassApply(applyMsg).then((res) => {
        if (res.Code == 1) {
          this.$q.notify({
            icon: "iconfont icon-chenggong",
            color: "accent",
            timeout: 2000,
            message: "修改成功！",
            position: "top",
          });
          //调用父页面成功方法
          this.$emit("success");
          this.$emit("close");
        }
      });
    },
    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.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.ReceiptFileList.push(x.FileUrl);
            this.$message.success(this.$t("tips.scchenggong"));
          }
        },
        1
      );
    },
  },
};
</script>
