<!--退课表单审核信息-->
<style>
  .backbill-Dialog .drawerTop {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #f0f5fb;
    padding: 5px 10px;
    align-items: center;
  }

  .backbill-Dialog .classFirst {
    color: #000000;
    font-weight: bold;
  }

  .backbill-Dialog .className {
    margin-left: 10px;
  }

  .backbill-Dialog .classStatus {
    padding: 3px 8px;
    background-color: #c8d7fc;
    color: #2961fe;
    font-size: 12px;
    border-radius: 2px;
    margin-left: 20px;
  }

  .backbill-Dialog .normalName {
    color: #999999;
  }

  .backbill-Dialog .normalInner {
    color: #111111;
  }

  .drop_NameDown {
    margin-top: 20px;
    width: 300px;
  }

  .backinfoContent {
    margin: 10px;
    padding-bottom: 80px;
  }

  .backinfoContent .role_Line {
    width: 3px;
    height: 11px;
    margin-right: 10px;
    background-color: #3fc4ff;
    display: inline-block;
  }

  .backinfoContent .backinfo_Item {
    color: #000000;
    font-weight: bold;
  }

  .backinfoContent .backInfo_One {
    margin: 20px 0;
  }

  .backinfoContent .backOtherInfo {
    color: #111111;
  }

  .backinfoContent .backInfo_Title {
    display: inline-block;
    width: 75px;
    text-align: left;
    color: #999999;
  }

  .backinfoContent .replayReason {
    width: 100%;
    min-height: 100px;
    background-color: #f0f5fb;
    border-radius: 3px;
    padding: 20px;
    margin: 20px 0;
  }

  .backinfoContent .replay_Title {
    font-weight: bold;
    color: #111111;
  }

  .backinfoContent .chaosong_Peo {
    display: inline-block;
    padding: 2px 3px;
    color: #fff;
    border-radius: 3px;
    margin: 0 5px 5px 0;
    background-color: #9cf;
  }

  .backinfoContent .topBaseInfo {
    /* height: 300px; */
    overflow: auto;
  }

  .topBaseInfo::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #f5f5f5;
  }

  /*!*定义滚动条轨道 内阴影+圆角*!*/
  .topBaseInfo::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  /*!*定义滑块 内阴影+圆角*!*/
  .topBaseInfo::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: -webkit-gradient(linear,
        0 0,
        0 100%,
        color-stop(0.5, rgba(255, 255, 255, 0.2)),
        color-stop(0.5, transparent),
        to(transparent));
    background-color: #0ae;
  }

  ._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;
    text-align: center;
  }

  ._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: 100%;
    height: 100%;
    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;
  }

</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
    <q-card style="margin-top: 61px; width: 850px" class="no-border-radius backbill-Dialog">
      <div class="drawerTop">
        <div style="display: flex; align-items: center">
          <div class="className">
            <div class="classFirst">退课审批</div>
          </div>
        </div>
      </div>
      <q-tabs style="margin: 15px" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
        <q-tab :ripple="false" name="first" label="详细信息" />
        <q-tab :ripple="false" name="second" label="审批记录" />
      </q-tabs>
      <div v-if="tabCheck == 'first'" style="margin: 0 15px">
        <div class="backinfoContent">
          <div>
            <div class="topBaseInfo">
              <div class="backinfo_Item">
                <span class="role_Line"></span>基本信息
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">退课编号：</span>
                  <span class="backOtherInfo">{{
                    setingObj.DataObj.BackNum
                  }}</span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">申请人：</span>
                  <span class="backOtherInfo">{{
                    setingObj.CreateByName
                  }}</span>
                </div>
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">学员姓名：</span>
                  <span class="backOtherInfo">{{
                    setingObj.DataObj.GuestName
                  }}</span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">申请时间：</span>
                  <span class="backOtherInfo">{{ setingObj.CreateTime }}</span>
                </div>
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">合同信息：</span>
                  <span class="backOtherInfo" style="cursor: pointer; text-decoration: underline"
                    @click="getlookContractNo(setingObj.DataObj.ContractId)" v-if="
                      setingObj.DataObj.ContractNo &&
                      setingObj.DataObj.ContractNo != ''
                    ">
                    {{ setingObj.DataObj.ContractNo }}
                  </span>
                  <span v-else>无</span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">退课协议：</span>
                  <span class="backOtherInfo" style="cursor: pointer; text-decoration: underline"
                    @click="goToBackProtocol(setingObj.DataObj.BackClassProtocolId)">{{ setingObj.DataObj.ProtocolNum }}</span>
                </div>
              </div>
              <div class="backinfo_Item">
                <span class="role_Line" style="background-color: #f28c1d"></span>教学信息
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">校区：</span>
                  <span class="backOtherInfo">{{
                    setingObj.DataObj.SchoolName
                  }}</span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">班级信息：</span>
                  <span class="backOtherInfo">
                    {{ setingObj.DataObj.ClassName }}
                    <span style="color: #2961fe; cursor: pointer"
                      @click="goClassManage(setingObj.DataObj.ClassName)">{{ setingObj.DataObj.ClassNo }}</span>
                  </span>
                </div>
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">带班老师：</span>
                  <span class="backOtherInfo">{{
                    setingObj.DataObj.TeacherName
                  }}</span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">学习课程：</span>
                  <span class="backOtherInfo">{{
                    setingObj.DataObj.CourseName
                  }}</span>
                </div>
              </div>
              <div class="backinfo_Item">
                <span class="role_Line" style="background-color: #02c499"></span>学习信息
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">总课时：</span>
                  <span> {{ setingObj.DataObj.TotalHours }} 课时 </span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">已学课时：</span>
                  <span class="backOtherInfo" style="cursor: pointer; text-decoration: underline"
                    @click="getlookFinishHours()">
                    {{ setingObj.DataObj.CompleteHours }} 课时
                  </span>
                </div>
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">剩余课时：</span>
                  <span> {{ setingObj.DataObj.SurplusHours }} 课时 </span>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="backinfo_Item">
                <span class="role_Line" style="background-color: #8175fb"></span>其他信息
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">关联单号：</span>
                  <span class="backOtherInfo" style="color: #2961fe; cursor: pointer"
                    @click="goOrderStatic(setingObj.DataObj.OrderId)">{{ setingObj.DataObj.OrderId }}</span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">预计退费：</span>
                  <span class="backOtherInfo" style="color: #f72e52">¥{{ setingObj.DataObj.BackMoney }}</span>
                </div>
              </div>
            </div>
            <div class="row">
              <span class="backInfo_Title">附件：<span v-if="fj.length === 0">无</span></span>
            </div>
            <div class="row flex" v-if="fj.length > 0">
              <div class="_addUpload_box clearfix flex">
                <template v-for="(item, index) in fj">
                  <div style="width: 138px; height: 92px; overflow: hidden" :key="index" @click="showUpLoadFile(item)">
                    <img :src="item.url" v-if="item.type === 2" style="width: 100%; height: auto; overflow: hidden" />
                    <span v-if="item.type === 1" class="iconfont" :class="
                        item.suffix == 'PDF'
                          ? 'icon-pdf'
                          : item.suffix == 'TXT'
                          ? 'icon-txt'
                          : item.suffix == 'DOCX' || item.suffix == 'DOC'
                          ? 'icon-word'
                          : 'icon-excel'
                      "></span>
                    <span v-if="item.type === 3" class="iconfont icon-yasuobao"></span>
                    <span v-if="item.type === 4" class="iconfont icon-shipin"></span>
                    <span v-if="item.type === 5" class="iconfont icon-wenjian"></span>
                  </div>
                </template>
              </div>
            </div>
            <div class="replayReason">
              <div class="replay_Title">退课原因</div>
              <div style="color: #666666; margin-top: 5px">
                {{ setingObj.DataObj.ApplyReason }}
              </div>
            </div>
            <template v-if="setingObj.SpecialNode == 1">
              <span>
                <q-input filled stack-label :dense="false" v-model="backBillMsg.BackMoney" class="col-12"
                  label="退课金额" />
              </span>
              <span>
                系统计算课时费为：{{
                  classPriceObj.ClassHours - classPriceObj.FinishHours
                }}（课时）X {{ classPriceObj.classHourPrice }}（课单价）X
                (1-0.1) （违约金）={{
                  classPriceObj.backMoney
                }}元，请你最终确认退款金额
              </span>
            </template>
            <div v-if="showType == 2">
              <div style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-top: 20px;
                ">
                <div>审批意见</div>
                <div>
                  <q-radio v-model="backBillMsg.AuditStatus" :val="2" label="通过" />
                  <q-radio v-model="backBillMsg.AuditStatus" :val="3" label="驳回" />
                </div>
              </div>
              <q-input filled stack-label :dense="false" v-model="backBillMsg.Description" type="textarea"
                label="审批意见" />
            </div>
            <div style="margin-top: 20px">
              <div class="row">
                <div class="col-6" style="display: flex; align-items: top">
                  <template v-if="tempPeople.length > 0">
                    <div style="display: inline-block; width: 45px">抄送:</div>
                    <div style="
                        display: inline-block;
                        margin-left: 5px;
                        width: 340px;
                      ">
                      <span class="chaosong_Peo" v-for="(childItem, cindex) in tempPeople">
                        {{ getName(childItem) }}
                      </span>
                    </div>
                  </template>
                </div>
                <div class="col-6" style="
                    justify-content: flex-end;
                    display: flex;
                    align-items: center;
                  ">
                  <i class="iconfont icon-aite" style="
                      font-size: 20px;
                      margin: 7px 20px 0 0;
                      cursor: pointer;
                    " v-if="showType == 2">
                    <q-popup-proxy>
                      <q-banner>
                        <div style="width: 350px">
                          <div style="margin: 10px 0 15px 0">抄送</div>
                          <q-select class="col-6 q-pb-lg q-pr-lg" multiple clearable filled stack-label use-input
                            option-value="Id" option-label="EmployeeName" v-model="tempPeople" ref="ManagerId"
                            :options="EmployeeList" label="选择人员" :dense="false" emit-value map-options
                            @filter="filterFn">
                            <template v-slot:no-option>
                              <q-item>
                                <q-item-section class="text-grey">
                                  未找到相关数据
                                </q-item-section>
                              </q-item>
                            </template>
                          </q-select>
                        </div>
                      </q-banner>
                    </q-popup-proxy>
                  </i>
                  <q-btn class="q-mr-md" label="关闭" @click="closeBackInfo" />
                  <q-btn v-if="showType == 2" color="accent q-px-md" label="确认" @click="saveBackClassInfo()" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabCheck == 'second'">
         <flowinfoForm :seting-obj="setingObj" :showType="showType" @close="closeShenheForm" @success="refreshPage">
        </flowinfoForm>
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeShenheForm" style="
        height: 40px !important;
        border-top-left-radius: 4px !important;
        border-bottom-left-radius: 4px !important;
      ">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
    <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;
          transform: translateY(-50%);
        ">
        <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-dialog>
</template>

<script>
  import flowinfoForm from "../sale/flowinfo-form";
  import {
    saveBackBillAduit,
    queryBackBillMoney
  } from "../../api/sale/bill";
  import {
    queryEmployee
  } from "../../api/users/user";

  export default {
    props: {
      setingObj: {
        type: Object,
        default: null,
      },
      showType: {
        type: Number,
        default: 1,
      },
    },
    components: {
      flowinfoForm,
    },
    data() {
      return {
        persistent: true,
        tabCheck: "first", //默认选第一个
        backBillMsg: {
          Id: 0,
          BackMoney: 0, //实际退款金额
          Description: "", //审批意见
          AuditStatus: 2, //审核状态
          SpecialNode: 0, //是否特殊节点
          RecipientIds: "", //抄送人
        },
        classPriceObj: {}, //课程价格信息
        EmployeeList: [],
        AllemployeeList: [],
        tempPeople: [], //抄送人数组
        //附件---s
        picIsShow: false,
        picObj: [],
        initialIndex: 0,
        //附件---e
      };
    },
    computed: {
      fj() {
        let arr = [];
        let fjlist = this.setingObj.ReceiptFileList;
        fjlist.map((item) => {
          let suffix = item.split(".")[item.split(".").length - 1].toUpperCase();
          if ("DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF|TXT".indexOf(suffix) != "-1") {
            let obj = {
              url: item,
              type: 1,
              suffix: suffix,
            };
            arr.push(obj);
          } else if ("GIF|JPG|JPEG|PNG|BMP|WEBP".indexOf(suffix) != "-1") {
            let obj = {
              url: item,
              type: 2,
              suffix: suffix,
            };
            arr.push(obj);
          } else if ("ZIP|RAR|7Z|TAR".indexOf(suffix) != "-1") {
            let obj = {
              url: item,
              type: 3,
              suffix: suffix,
            };
            arr.push(obj);
          } else if (
            "MP4|3GP|AVI|MOV|WMV|RMVB|MKV|M4V|FLV".indexOf(suffix) != "-1"
          ) {
            let obj = {
              url: item,
              type: 4,
              suffix: suffix,
            };
            arr.push(obj);
          } else {
            let obj = {
              url: item,
              type: 5,
              suffix: suffix,
            };
            arr.push(obj);
          }
        });
        return arr;
      },
    },
    created() {
      this.getEmployee();
    },
    mounted() {
      this.backBillMsg.Id = this.setingObj.Id;
      this.backBillMsg.SpecialNode = this.setingObj.SpecialNode;
      if (this.backBillMsg.SpecialNode == 1) {
        this.getBackBillMoney();
      }
    },
    methods: {
      getBackBillMoney() {
        queryBackBillMoney({
          BackId: this.setingObj.RelationId,
        }).then((res) => {
          if (res.Code == 1) {
            this.classPriceObj = res.Data;
          }
        });
      },
      closeBackInfo() {
        this.persistent = false;
        this.$emit("close");
      },
      //退课单据审核
      saveBackClassInfo() {
        var str = "";
        if (this.tempPeople && this.tempPeople.length > 0) {
          this.tempPeople.forEach((item) => {
            str += "," + item;
          });
        }
        if (str && str != "") {
          str = str.substr(1);
        }
        this.backBillMsg.RecipientIds = str;
        saveBackBillAduit(this.backBillMsg).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");
          }
        });
      },
      //获取员工列表
      getEmployee() {
        var qMsg = {
          EmployeeName: "",
        };
        queryEmployee(qMsg).then((res) => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            if (jsonData && jsonData.length > 0) {
              this.AllemployeeList = JSON.parse(JSON.stringify(jsonData));
              this.EmployeeList = JSON.parse(JSON.stringify(jsonData));
            }
          }
        });
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === "") {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList));
          } else {
            const needle = val.toLowerCase();
            this.EmployeeList = this.AllemployeeList.filter(
              (v) => v.EmployeeName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取员工姓名
      getName(id) {
        let str = "";
        this.EmployeeList.forEach((x) => {
          if (id == x.Id) {
            str = x.EmployeeName;
          }
        });
        return str;
      },
      //跳转到班级管理
      goClassManage(ClassName) {
        this.OpenNewUrl("/course/classManage", {
          ClassName: ClassName,
        });
      },
      //跳转到报名统计
      goOrderStatic(OrderId) {
        this.OpenNewUrl("/sale/orderStatistics", {
          OrderId: OrderId,
        });
      },
      getlookContractNo(ContractId) {
        //跳转合同管理
        let routeUrl = this.$router.resolve({
          path: "/contractView",
          query: {
            ContractId: ContractId,
          },
        });
        window.open(routeUrl.href, "_blank");
      },
      //跳转到退课协议
      goToBackProtocol(Id) {
        this.OpenNewUrl("/courseRefund", {
          Id: Id,
        });
      },
      getlookFinishHours() {
        //跳转学员消耗课时明细
        let StartMonth = "";
        let EndMonth = this.setingObj.CreateTime.split(" ")[0];
        let Name = encodeURI(this.setingObj.DataObj.GuestName);
        this.OpenNewUrl("/financial/studentsClassfee", {
          ClassId: this.setingObj.DataObj.ClassId,
          StartMonth: StartMonth,
          EndMonth: EndMonth,
          StudentName: Name,
          comefrom: 1,
        });
      },
      refreshPage() {
        this.persistent = false;
        this.$emit("success");
      },
      closeShenheForm() {
        this.persistent = false;
        this.$emit("close");
      },
      showUpLoadFile(i) {
        // 预览上传文件
        if (i.type == 2) {
          this.picObj.push(i.url);
          this.picIsShow = true;
        } else if (i.type == 1) {
          if (i.suffix == "PDF" || i.suffix == "TXT") {
            this.previewPDF(i.url);
          } else {
            this.downloadFile(i);
          }
        } else {
          this.downloadFile(i);
        }
      },
      downloadFile(i) {
        const a = document.createElement("a");
        a.setAttribute("download", "");
        a.setAttribute("href", i.url);
        a.click();
      },
    },
  };

</script>
