<!--退课表单审核信息-->
<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 .replayReason {
  width: 100%;
  min-height: 100px;
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  margin: 20px 0;
}

.backinfoContent .replay_Title {
  font-weight: 700;
  color: #111;
}

.backinfoContent .baseInfo_Item {
  margin-bottom: 20px;
}

.backinfoContent .EmpList {
  background-color: #f7f7f7;
  min-height: 70px;
  margin-right: 15px;
  border-radius: 3px;
  padding: 15px;
}

.backinfoContent .EmpList:last-child {
  margin-right: 0;
}

.backinfoContent .normalName {
  color: #999999;
  font-size: 12px;
}

.backinfoContent .normalInner {
  color: #111111;
  font-weight: bold;
  font-size: 13px;
  margin-top: 5px;
}

.changeBTable th {
  font-size: 12px;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.12);
  height: 40px;
  line-height: 40px;
}

.changeBTable td {
  text-align: center;
  height: 30px;
}

.BillredClass {
  color: red;
}
._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 v-if="setingObj.ReceiptType == 6">分拆</span>
                    <span v-if="setingObj.ReceiptType == 5">转班</span
                    >编号:</span
                  >
                  <span class="backOtherInfo">{{ setingObj.DataObj.Id }}</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-12">
                  <span class="backInfo_Title">申请时间:</span>
                  <span class="backOtherInfo">{{ setingObj.CreateTime }}</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.SchoolName }}</span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">班级信息:</span>
                  <span class="backOtherInfo">
                    {{ setingObj.ClassName }}
                    <span
                      style="color: #2961fe; cursor: pointer"
                      @click="goClassManage(setingObj.ClassName)"
                      >{{ setingObj.ClassNo }}</span
                    >
                  </span>
                </div>
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">带班老师:</span>
                  <span class="backOtherInfo">
                    {{ setingObj.TeacherName }}
                  </span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">学习课程:</span>
                  <span class="backOtherInfo">
                    {{ setingObj.CourseName }}
                  </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>
            <div class="replayReason">
              <div class="replay_Title">变更原因</div>
              <div style="color: rgb(102, 102, 102); margin-top: 5px">
                {{ setingObj.DataObj.Remarks }}
              </div>
            </div>
            <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="changeBillMsg.AuditStatus"
                    :val="2"
                    label="通过"
                  />
                  <q-radio
                    v-model="changeBillMsg.AuditStatus"
                    :val="3"
                    label="驳回"
                  />
                </div>
              </div>
              <q-input
                filled
                stack-label
                :dense="false"
                v-model="changeBillMsg.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;
          width: 800px;
          height: 600px;
          left: 50%;
          top: 50%;
          margin-left: -400px;
          transform: translateY(-50%);
        "
      >
        <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-dialog>
</template>

<script>
import flowinfoForm from "../sale/flowinfo-form";
import { saveBackBillAduit } 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", //默认选第一个
      loading: false,
      changeBillMsg: {
        Id: 0,
        Description: "", //审批意见
        AuditStatus: 2, //审核状态
        SpecialNode: 0, //是否特殊节点
        RecipientIds: "", //抄送人
      },
      classPriceObj: {}, //课程价格信息
      EmployeeList: [],
      AllemployeeList: [],
      tempPeople: [], //抄送人数组
      changeTitle: "",
      columns: [
        {
          name: "ClassRoomName",
          label: "教室名称",
          field: "ClassRoomName",
          align: "left",
        },
        {
          name: "ClassDateStr",
          label: "上课日期",
          field: "ClassDateStr",
          align: "left",
        },
        {
          name: "TeacherName",
          label: "老师",
          field: "TeacherName",
          align: "left",
        },
        {
          name: "PlanTimeList",
          label: "上课时间",
          field: "TimeList",
          align: "left",
        },
        {
          name: "ClassDate2",
          label: "目标日期",
          field: "ClassDate2",
          align: "left",
        },
        {
          name: "PlanTimeList2",
          label: "目标时间",
          field: "PlanTimeList2",
          align: "left",
        },
      ],
      columns2: [
        {
          name: "ClassRoomName",
          label: "教室名称",
          field: "ClassRoomName",
          align: "left",
        },
        {
          name: "ClassDateStr",
          label: "上课日期",
          field: "ClassDateStr",
          align: "left",
        },
        {
          name: "TeacherName",
          label: "老师",
          field: "TeacherName",
          align: "left",
        },
        {
          name: "PlanTimeList",
          label: "上课时间",
          field: "PlanTimeList",
          align: "left",
        },
      ],
      //附件---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.changeBillMsg.Id = this.setingObj.Id;
    this.changeBillMsg.SpecialNode = this.setingObj.SpecialNode;
  },
  methods: {
    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.changeBillMsg.RecipientIds = str;
      if (this.changeBillMsg.AuditStatus == 3) {
        this.$q
          .dialog({
            title: "提示信息",
            message: "确定要驳回吗？",
            cancel: true,
            persistent: true,
            ok: "确定",
            cancel: "取消",
          })
          .onOk(() => {
            saveBackBillAduit(this.changeBillMsg).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");
              }
            });
          })
          .onCancel(() => {});
      } else {
        saveBackBillAduit(this.changeBillMsg).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,
      });
    },
    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>
