<!--退课表单审核信息-->
<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(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
    background-color: #0ae;
  }

</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="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 class="backOtherInfo">{{setingObj.DataObj.FinishHours}} 课时</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="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)}}(课时)*{{classPriceObj.classHourPrice}}（课单价）={{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>
                    <!-- RecipientIds -->
                    <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>
  </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: [], //抄送人数组
      }
    },
    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
        })
      },
      refreshPage() {
        this.persistent = false;
        this.$emit('success');
      },
      closeShenheForm() {
        this.persistent = false;
        this.$emit('close');
      },
    }
  }

</script>
