<!--退课表单审核信息-->
<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;
  }

</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">{{changeTitle}}</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.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 class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">变更类型:</span>
                  <span class="backOtherInfo">
                    {{setingObj.DataObj.ChangeTypeStr}}
                  </span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">变更范围:</span>
                  <span class="backOtherInfo">
                    {{setingObj.DataObj.MoveTypeStr}}
                  </span>
                </div>
              </div>

            </div>
            <q-table no-data-label="暂无相关数据" flat style="width:100%;" v-if="dataList&&dataList.length>0"
              :pagination="pages" class="sticky-column-table no-bottom-table" separator="none" :data="dataList"
              :columns="setingObj.DataObj.ChangeType==1?columns:columns2">
              <template v-slot:body-cell-PlanTimeList="props">
                <q-td :props="props">
                  <div v-for="(item,index) in props.row.PlanTimeList">
                    {{index+1}}节课 {{item.StartTime}}-{{item.EndTime}}
                  </div>
                </q-td>
              </template>
              <template v-slot:body-cell-ClassDate2="props">
                <q-td :prop="props">
                  <span style="color:red">{{props.row.ClassDate2}}</span>
                </q-td>
              </template>
              <template v-slot:body-cell-ClassRoomName="props">
                <q-td :prop="props">
                  <span
                    :class="{'BillredClass':setingObj.DataObj.ChangeType==3&&setingObj.DataObj.MoveType==1}">{{props.row.ClassRoomName}}</span>
                </q-td>
              </template>
              <template v-slot:body-cell-TeacherName="props">
                <q-td :prop="props">
                  <span
                    :class="{'BillredClass':setingObj.DataObj.ChangeType==2&&setingObj.DataObj.MoveType==1}">{{props.row.TeacherName}}</span>
                </q-td>
              </template>
              <template v-slot:body-cell-PlanTimeList2="props">
                <q-td :props="props">
                  <div :class="{'BillredClass':setingObj.DataObj.ChangeType==1&&setingObj.DataObj.MoveType==1}"
                    v-for="(item,index) in props.row.PlanTimeList2">
                    {{index+1}}节课 {{item.StartTime}}-{{item.EndTime}}
                  </div>
                </q-td>
              </template>
            </q-table>
            <!--全局调整-->
            <template v-if="setingObj.DataObj.MoveType==2">
              <!--全局调整课程-->
              <template v-if="setingObj.DataObj.ChangeType==1">
                <div class="row backInfo_One">
                  <div class="col EmpList">
                    <div class="normalName">开班时间</div>
                    <div class="normalInner">{{setingObj.DataObj.AllChangePlanModel.OpenTimeStr}}</div>
                  </div>
                  <div class="col EmpList">
                    <div class="normalName">排课安排</div>
                    <div class="normalInner">
                      <span v-if="setingObj.DataObj.AllChangePlanModel.ClassStyle==1">按周排课</span>
                      <span v-if="setingObj.DataObj.AllChangePlanModel.ClassStyle==2">按月排课</span>
                      <span v-if="setingObj.DataObj.AllChangePlanModel.ClassStyle==3">固定日期</span>
                      <span v-if="setingObj.DataObj.AllChangePlanModel.ClassStyle==4">约课</span>
                    </div>
                  </div>
                </div>
                <div class="row backInfo_One">
                  <div class="col EmpList">
                    <div class="normalName">
                      <span v-if="setingObj.DataObj.AllChangePlanModel.ClassStyle==1">按周排课</span>
                      <span v-if="setingObj.DataObj.AllChangePlanModel.ClassStyle==2">按月排课</span>
                      <span v-if="setingObj.DataObj.AllChangePlanModel.ClassStyle==3">固定日期</span>
                      <span v-if="setingObj.DataObj.AllChangePlanModel.ClassStyle==4">约课</span>
                    </div>
                    <div class="normalInner" style="width:100%;word-break:break-all">
                      <span style="margin:0 5px 5px 0;display:inline-block;"
                        v-for="(item,index) in setingObj.DataObj.AllChangePlanModel.WeekDayList">{{item}}</span>
                    </div>
                  </div>
                  <div class="col EmpList">
                    <div class="normalName">学习课时</div>
                    <div class="normalInner">
                      {{setingObj.DataObj.AllChangePlanModel.ClassHours}}
                    </div>
                  </div>
                </div>
                <div class="row backInfo_One">
                  <div class="col EmpList">
                    <div class="normalName">课时分钟数</div>
                    <div class="normalInner">
                      {{setingObj.DataObj.AllChangePlanModel.ClassHourMinute}}
                    </div>
                  </div>
                </div>
                <table style="width:100%;border-collapse: collapse;" class="changeBTable">
                  <thead>
                    <tr>
                      <th>
                        日期/周
                      </th>
                      <th>
                        开始时间
                      </th>
                      <th>结束时间</th>
                      <th>
                        消耗课时
                      </th>
                    </tr>
                  </thead>
                  <tbody v-for="(nItem,nIndex) in setingObj.DataObj.AllChangePlanModel.DefaultTimeList"
                    :key="nIndex+10000">
                    <tr v-for="(sItem,sIndex) in nItem.TimeList">
                      <td :rowspan="nItem.TimeList.length" v-if="sIndex==0">
                        <span style="margin-right:5px;" v-for="oItem in nItem.DateList">{{oItem}}</span>
                      </td>
                      <td>
                        {{sItem.StartTime}}
                      </td>
                      <td>
                        {{sItem.EndTime}}
                      </td>
                      <td>
                        {{sItem.TimeHour}}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </template>
              <!--全局调整老师-->
              <template v-if="setingObj.DataObj.ChangeType==2">
                <div class="row backInfo_One">
                  <div class="col EmpList">
                    <div class="normalName">变更后老师:</div>
                    <div class="normalInner">{{setingObj.DataObj.AllChangePlanModel.TeacherName}}</div>
                  </div>
                  <div class="col EmpList">
                    <div class="normalName">生效时间</div>
                    <div class="normalInner">
                      {{setingObj.DataObj.TakeEffectTime.split('T')[0]}}
                    </div>
                  </div>
                </div>
              </template>
              <!--全局调整教室-->
              <template v-if="setingObj.DataObj.ChangeType==3">
                <div class="row backInfo_One">
                  <div class="col EmpList">
                    <div class="normalName">变更后教室:</div>
                    <div class="normalInner">{{setingObj.DataObj.AllChangePlanModel.ClassRoomName}}</div>
                  </div>
                  <div class="col EmpList">
                    <div class="normalName">生效时间</div>
                    <div class="normalInner">
                      {{setingObj.DataObj.TakeEffectTime.split('T')[0]}}
                    </div>
                  </div>
                </div>
              </template>
            </template>
            <!--固定日期调整-->
            <template v-if="setingObj.DataObj.MoveType==1">
              <!--取消课程-->
              <template v-if="setingObj.DataObj.ChangeType==4">
                <div class="row backInfo_One" style="margin-top:0;">
                  <table style="width:100%">
                    <tr>
                      <td style="width:75px;text-align:left;color:#999999;vertical-align:top;">取消：</td>
                      <td style="text-align:left">
                        <span style="margin-right:10px;display:inline-block;"
                          v-if="setingObj.DataObj.OldChangePlanItemList&&setingObj.DataObj.OldChangePlanItemList.length>0"
                          v-for="(sItem,sIndex) in setingObj.DataObj.OldChangePlanItemList">{{sItem.ClassDateStr}}</span>
                      </td>
                    </tr>
                  </table>
                </div>
              </template>
            </template>
            <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>
  </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'
          }
        ],
        pages: {
          rowsPerPage: 100000
        },
        dataList: []
      }
    },
    created() {
      this.getEmployee();
    },
    mounted() {
      console.log("this.setingObj", this.setingObj)
      this.changeBillMsg.Id = this.setingObj.Id;
      this.changeBillMsg.SpecialNode = this.setingObj.SpecialNode;
      if (this.setingObj.DataObj.ChangeType == 1) {
        this.changeTitle = '课程时间变更'
        if (this.setingObj.DataObj.MoveType == 1) {
          this.dataList = [];
          if (this.setingObj.DataObj.OldChangePlanItemList && this.setingObj.DataObj.NewChangePlanItemList) {
            this.setingObj.DataObj.OldChangePlanItemList.forEach((x, index) => {
              var obj = {
                ClassRoomName: x.ClassRoomName,
                ClassDateStr: x.ClassDateStr,
                TeacherName: x.TeacherName,
                PlanTimeList: x.PlanTimeList,
                ClassDate2: this.setingObj.DataObj.NewChangePlanItemList[index].ClassDateStr,
                PlanTimeList2: this.setingObj.DataObj.NewChangePlanItemList[index].PlanTimeList
              }
              this.dataList.push(obj);
            })
            console.log(this.dataList, 'datraList');
          }
        }
      }
      if (this.setingObj.DataObj.ChangeType == 2) {
        this.changeTitle = '老师变更'
        this.dataList = this.setingObj.DataObj.NewChangePlanItemList
      }
      if (this.setingObj.DataObj.ChangeType == 3) {
        this.changeTitle = '教室变更'
        this.dataList = this.setingObj.DataObj.NewChangePlanItemList
      }
      if (this.setingObj.DataObj.ChangeType == 4) {
        this.changeTitle = '取消上课变更'
        this.dataList = this.setingObj.DataObj.NewChangePlanItemList
      }
      console.log(this.setingObj.DataObj.OldChangePlanItemList);
    },
    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');
      },
    }
  }

</script>
