<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;display:none;">
          <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;display:none" 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;
            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 {
    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: '123', //退还账户
        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.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.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>
