<style>
  .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>
  <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.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.GuestName}}</span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title">申请时间：</span>
            <span class="backOtherInfo">{{setingObj.CreateTimeStr}}</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>
          </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 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.FinishHours}} 课时</span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title">缺勤次数：</span>
            <span class="backOtherInfo">暂无</span>
          </div>
        </div>
        <div class="row backInfo_One">
          <div class="col-6">
            <span class="backInfo_Title">考试评分：</span>
            <span class="backOtherInfo">暂无</span>
          </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">{{setingObj.OrderId}}</span>
          </div>
          <div class="col-6">
            <span class="backInfo_Title">关联销售：</span>
            <span class="backOtherInfo">{{setingObj.EnterName}}</span>
          </div>
        </div>
        <div class="row backInfo_One">
          <div class="col-6">
            <span class="backInfo_Title">预计退费：</span>
            <span class="backOtherInfo" style="color:#F72E52">¥{{setingObj.BackMoney}}</span>
          </div>
        </div>
      </div>
      <div class="replayReason">
        <div class="replay_Title">退课原因</div>
        <div style="color:#666666;margin-top:5px;">
          {{setingObj.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="退课金额"
            :rules="[val => !!val || '请填退课金额']" />
        </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;">
          <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>
</template>

<script>
  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: {

    },
    data() {
      return {
        persistent: true,
        backBillMsg: {
          BackId: 0,
          BackMoney: 0, //实际退款金额
          Description: "", //审批意见
          AuditStatus: 0, //审核状态
          SpecialNode: 0, //是否特殊节点
          RecipientIds: "", //抄送人
        },
        classPriceObj: {}, //课程价格信息
        EmployeeList: [],
        AllemployeeList: [],
        tempPeople: [], //抄送人数组
      }
    },
    created() {},
    mounted() {
      this.backBillMsg.BackId = this.setingObj.BackId;
      this.backBillMsg.SpecialNode = this.setingObj.SpecialNode;
      if (this.backBillMsg.SpecialNode == 1) {
        this.getBackBillMoney();
      }
      this.getEmployee();
    },
    methods: {
      getBackBillMoney() {
        queryBackBillMoney({
          BackId: this.backBillMsg.BackId
        }).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;
      }
    },
  }

</script>
