<style>
  .paymentDetail .p_title {
    font-weight: bold;
    color: #000000;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .paymentDetail .paymentList {
    height: 170px;
    border-radius: 3px;
    box-shadow: 0 0 5px #d1d1d1;
    margin-right: 10px;
    padding: 12px;
  }

  .paymentDetail .paymentList:last-child {
    margin-right: 0;
  }

  .paymentDetail .pay_topList {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .paymentDetail .pay_Title {
    margin-left: 5px;
    color: #111111;
    font-size: 13px;
    font-weight: bold;
  }

  .paymentDetail .pay_ListMent {
    display: flex;
    font-size: 12px;
    margin-bottom: 6px;
  }

  .paymentDetail .pay_ListOne {
    width: 50px;
    color: #999999;
    text-align: left;
  }

  .paymentDetail .pay_Inner {
    margin-left: 10px;
    color: #111111;
    font-weight: bold;
  }

  .paymentDetail .orangeStyle {
    color: #F28C1D;
  }

  .paymentDetail .pay_ListTwo {
    width: 25px;
    color: #999999;
    text-align: left;
  }

  .paymentDetail .pay_InorOut {
    margin-top: 20px;
  }

  .paymentDetail .Pay_Line {
    width: 3px;
    height: 11px;
    margin-right: 10px;
    background-color: #3FC4FF;
    display: inline-block;
  }

  .paymentDetail .pay_TopTitle {
    font-weight: bold;
    color: #000000;
    font-size: 13px;
  }

  .paymentDetail .payTable {
    width: 100%;
    border-collapse: collapse;
  }

  .paymentDetail .payTable tr th {
    background: #fff;
    height: 40px;
    font-size: 12px;
    font-weight: bold;
    color: #2D2D2D;
    background: #DDDEE0;
  }

  .paymentDetail .payTable tr {
    background: #fff;
    text-align: center;
    height: 40px;
  }

  .paymentDetail .payTable tr td {
    font-size: 13px;
    text-align: center;
    color: #2D2D2D;
    padding: 10px 0;
    font-weight: bold;
    border-bottom: 1px solid #E5E5E5;
  }

  .paymentDetail .finince_Order {
    color: #2961FE;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
  }

  .paymentDetail .finice_pass {
    display: inline-block;
    width: 50px;
    height: 25px;
    line-height: 25px;
    background: #ccf3eb;
    color: #02C499;
    border-radius: 2px;
  }

  .paymentDetail .financeYing {
    width: 110px;
    text-align: left;
    margin: auto;
  }

  .p_titleList {
    position: relative;
  }
</style>
<template>
  <div class="page-body paymentDetail">
    <div class="page-search items-center">
      <div class="p_titleList">
        <div class="p_title">试听班级收支明细</div>
        <div style="display: flex;align-items: center;position:absolute;right:0;top:0">
          <q-btn label="导出" color="accent q-px-md" size="sm" style="font-weight:400 !important;" @click="exportOrder" />
        </div>

      </div>
      <div class="row">
        <div class="col paymentList" v-if="dataList">
          <div class="pay_topList">
            <img src="../../assets/images/myimg/bjqk.png" alt="" />
            <span class="pay_Title">试听班级情况</span>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">班级名称</div>
            <div class="pay_Inner">{{dataList.ReserveClassName}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">课程名称</div>
            <div class="pay_Inner">{{dataList.LessonName}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">开课时间</div>
            <div class="pay_Inner">{{dataList.ClassTime}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">试讲老师</div>
            <div class="pay_Inner">{{dataList.TeacherName}}</div>
          </div>
        </div>


        <div class="col paymentList">
          <div class="pay_topList">
            <img src="../../assets/images/myimg/zc.png" alt="" />
            <span class="pay_Title">支出</span>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">应付</div>
            <div class="pay_Inner">¥{{dataList.PayReceive}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">实付</div>
            <div class="pay_Inner orangeStyle">¥{{dataList.PayActual}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">待付</div>
            <div class="pay_Inner orangeStyle ">¥{{getShiShou(dataList.PayReceive,dataList.PayActual)}}</div>
          </div>
        </div>
      </div>
      <div class="pay_InorOut">
        <div class="pay_TopTitle" style="display:flex;justify-content: space-between;align-items:center;">
          <div><span class="Pay_Line"></span>收入</div>
          <q-btn label="新增收款" v-if="isShowBtn" color="accent q-px-md" size="sm" style="font-weight:400 !important;"
            @click="goShoukuan(1)" />
        </div>
        <table class="payTable">
          <tr>
            <th width="180">单号</th>
            <th width="200">费用类型</th>
            <th width="500">交易明细</th>
            <th width="300">金额</th>
            <th width="200">交易日期</th>
            <th width="250">制单人员</th>
            <th width='180'>审核状态</th>
            <th width="200">当前审核人</th>
          </tr>
          <tr v-if="dataList && dataList.incomeList==0">
            <td :colspan="8" align="center">暂无数据</td>
          </tr>
          <tr v-for="(item,index) in dataList.incomeList" :key="index">
            <td>
              <span class="finince_Order">{{item.FrID}}</span>
            </td>
            <td><span v-for="subItem in item.CostTypeList" :key="subItem.subCode">{{subItem}}</span></td>
            <td style="text-align:left;">
              <div v-for="(childItem,childIndex) in item.TradeWayList" :key="childIndex">
                支付方式：{{childItem.Alias}}<span class="TB_Rate"> 币种：{{childItem.CurrencyName}}</span>
                <span class="Team_Coins orangeStyle">{{childItem.OriginalMoney}}*{{childItem.Rate}}</span>
                <span class="TB_Rate" style="margin-left:10px;">汇率：{{childItem.Rate}}</span>
              </div>
            </td>
            <td>
              <div class="financeYing">
                应收：{{item.Money}}<br />
                实收：{{item.PayMoney}}
              </div>
            </td>
            <td>{{item.TradeDate}}</td>
            <td>
              <div>{{item.RB_CreateByName}}</div>
              <div>{{item.CreateDate}}</div>
            </td>
            <td>
              <div class="finice_pass">{{item.StatusStr}}</div>
            </td>
            <td>
              <div v-for="(AuditItem,auditIndex) in item.AuditList" :key="auditIndex">
                {{AuditItem.AuditEmName}}
                <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
              </div>
            </td>
          </tr>
        </table>
        <div class="pay_TopTitle"
          style="margin-top:30px;display:flex;justify-content: space-between;align-items:center;">
          <div><span class="Pay_Line" style="background:#F72E52;"></span>支出</div>
          <q-btn label="新增付款" v-if="isShowBtn" color="accent q-px-md" size="sm" style="font-weight:400 !important;"
            @click="goShoukuan(2)" />
        </div>
        <table class="payTable">
          <tr>
            <th width="180">单号</th>
            <th width="200">费用类型</th>
            <th width="500">交易明细</th>
            <th width="300">金额</th>
            <th width="200">交易日期</th>
            <th width="250">制单人员</th>
            <th width='180'>审核状态</th>
            <th width="200">当前审核人</th>
          </tr>
          <tr v-if="dataList && dataList.outList==0">
            <td :colspan="8" align="center">暂无数据</td>
          </tr>
          <tr v-for="(item,index) in dataList.outList" :key="index">
            <td>
              <span class="finince_Order" @click="goOrderDetail('FinancialDocumentsDetail',item)">{{item.FrID}}</span>
            </td>
            <td><span v-for="subItem in item.CostTypeList" :key="subItem.subCode">{{subItem}}</span></td>
            <td style="text-align:left;">
              <div v-for="(childItem,childIndex) in item.TradeWayList" :key="childIndex">
                支付方式：{{childItem.Alias}}<span class="TB_Rate">币种：{{childItem.CurrencyName}}</span>
                <span class="Team_Coins orangeStyle">-{{childItem.OriginalMoney}}*{{childItem.Rate}}</span>
                <span class="TB_Rate" style="margin-left:10px;">汇率：{{childItem.Rate}}</span>
              </div>
            </td>
            <td>
              <div class="financeYing">
                应付：{{item.Money}}<br />
                实付：{{item.PayMoney}}
              </div>
            </td>
            <td>{{item.TradeDate}}</td>
            <td>
              <div>{{item.RB_CreateByName}}</div>
              <div>{{item.CreateDate}}</div>
            </td>
            <td>
              <div class="finice_pass">{{item.StatusStr}}</div>
            </td>
            <td>
              <div v-for="(AuditItem,auditIndex) in item.AuditList" :key="auditIndex">
                {{AuditItem.AuditEmName}}
                <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    GetReserveClassBalanceSheet,
  } from '../../api/finance/index';
  import {
    EduDownLoad,
  } from '../../api/common/common';
  export default {
    props: {},
    components: {},
    data() {
      return {
        dataList: [], //数据
        msg: {
          ReserveClassId: 0,
        },
        isShowBtn: true
      }
    },
    created() {
      if (this.$route.query && this.$route.query.ReserveClassId) {
        this.msg.ReserveClassId = this.$route.query.ReserveClassId;
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        GetReserveClassBalanceSheet(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        })
      },
      //减法 得实收
      getShiShou(num1, num2) {
        if (num1 && num2) {
          return parseInt(num1) - parseInt(num2);
        } else {
          return 0;
        }
      },
      //跳转到订单详情
      goOrderDetail(path, item) {
        this.OpenNewUrl('/financial/financalDocument/' + path, {
          "id": item.FrID,
        })
      },
      //导出单据
      exportOrder() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad("/Finance/GetReserveClassBalanceSheetToExcel", msg, "试听班级收支明细.xls")
      },
      //跳转到收款单
      goShoukuan(type) {
        let TCIDARR = []
        TCIDARR.push(this.msg.ReserveClassId)
        let orderObj = {
          OrderID: 0,
          OrderSource: 19,
          Obj: {},
          SourceID: 0,
          TCIDList: TCIDARR
        }
        this.OpenNewUrl('/financial/financalDocument/ChoiceAddFinancialDocuments', {
          "Type": type,
          "companyID": 0,
          "path": "",
          'blank': 'y',
          'orderObj': JSON.stringify(orderObj),
          'tradeWay': '',
        })
      },
      goclasslist() {
        this.$router.push({
          path: 'classManage',
        });
      },
      goclasslist2(path) {
        this.$router.push({
          path: '/sale/' + path,
          query: {
            ClassName: this.ClassName
          }
        });
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>