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

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

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

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

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

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

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

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

  .studyPayment .orangeStyle {
    color: #F28C1D;
  }

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

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

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

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

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

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

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

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

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

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

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

  .p_titleList {
    position: relative;
  }

</style>
<template>
  <div class="page-body studyPayment">
    <div class="page-search items-center">
      <div class="p_titleList">
        <div class="p_title">留学就业收支明细</div>
        <q-btn label="导出" color="accent q-px-md" size="sm"
          style="font-weight:400 !important;position:absolute;right:0;top:0" @click="exportOrder" />
      </div>
      <div class="row">
        <div class="col paymentList" v-if="dataList&&dataList.ClassInfo">
          <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.ClassInfo.ClassName}}</div>
          </div>
        </div>
        <div class="col paymentList">
          <div class="pay_topList">
            <img src="../../assets/images/myimg/bjsr.png" alt="" />
            <span class="pay_Title">收入</span>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">应收</div>
            <div class="pay_Inner">¥{{dataList.IncomeReceive}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">实收</div>
            <div class="pay_Inner orangeStyle">¥{{dataList.IncomeActual}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">待收</div>
            <div class="pay_Inner orangeStyle">¥{{getShiShou(dataList.IncomeReceive,dataList.IncomeActual)}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">注</div>
            <div class="pay_Inner">应收=订单应收总额，实收=订单 实收总额</div>
          </div>

        </div>
        <div class="col paymentList">
          <div class="pay_topList">
            <img src="../../assets/images/myimg/qt.png" alt="" />
            <span class="pay_Title">其他</span>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">应收</div>
            <div class="pay_Inner">¥{{dataList.OtherIncomeReceive}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">实收</div>
            <div class="pay_Inner orangeStyle">¥{{dataList.OtherIncomeActual}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">待收</div>
            <div class="pay_Inner orangeStyle">¥{{getShiShou(dataList.OtherIncomeReceive,dataList.OtherIncomeActual)}}
            </div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">注</div>
            <div class="pay_Inner">此处不进入"利润"计算，单纯只统计除班级费外的其他总收入</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 class="pay_ListMent">
            <div class="pay_ListTwo">注</div>
            <div class="pay_Inner">成本单据总额(含退款)+销售提成+ 课时费</div>
          </div>
        </div>
        <div class="col paymentList">
          <div class="pay_topList">
            <img src="../../assets/images/myimg/lr.png" alt="" />
            <span class="pay_Title">利润</span>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">实际利润</div>
            <div class="pay_Inner">¥{{dataList.ProfitActual}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">当前利润</div>
            <div class="pay_Inner orangeStyle">¥{{dataList.ProfitNow}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">注</div>
            <div class="pay_Inner">实收-(应付/实付)+其他收入-总支出</div>
          </div>
        </div>
        <div class="col paymentList">
          <div class="pay_topList">
            <img src="../../assets/images/myimg/tc.png" alt="" />
            <span class="pay_Title">提成</span>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">销售提成</div>
            <div class="pay_Inner">¥{{dataList.SaleCommission}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">课时费</div>
            <div class="pay_Inner">¥{{dataList.TeacherProfitNow}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">绩效奖励</div>
            <div class="pay_Inner orangeStyle ">¥{{dataList.MeritsProfit}}</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="新增收款" color="accent q-px-md" size="sm" style="font-weight:400 !important;"
            @click="goShoukuan(1)" />
        </div>
        <div class="pay_TopTitle" style="margin:15px 0 15px 20px;font-size:12px;">
          <span class="Pay_Line" style="background-color:#02C499;"></span>学费收入
        </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.FiniceReciveList==0">
            <td :colspan="8" align="center">暂无数据</td>
          </tr>
          <tr v-for="(item,index) in dataList.FiniceReciveList" :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 in item.TradeWayList">
                支付方式：{{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 in item.AuditList">
                {{AuditItem.AuditEmName}}
                <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
              </div>
            </td>
          </tr>
        </table>
        <div class="pay_TopTitle" style="margin:30px 0 15px 20px;font-size:12px;">
          <span class="Pay_Line" style="background-color:#02C499;"></span>其他收入
        </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.OtherFiniceReciveList==0">
            <td :colspan="8" align="center">暂无数据</td>
          </tr>
          <tr v-for="(item,index) in dataList.OtherFiniceReciveList" :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 in item.TradeWayList">
                支付方式：{{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 in item.AuditList">
                {{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="新增付款" color="accent q-px-md" size="sm" style="font-weight:400 !important;"
            @click="goShoukuan(2)" />
        </div>
        <div class="pay_TopTitle" style="margin:15px 0 15px 20px;font-size:12px;">
          <span class="Pay_Line" style="background-color:#F28C1D;"></span>其他支出
        </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.OtherFinicePayList==0">
            <td :colspan="8" align="center">暂无数据</td>
          </tr>
          <tr v-for="(item,index) in dataList.OtherFinicePayList" :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 in item.TradeWayList">
                支付方式：{{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 in item.AuditList">
                {{AuditItem.AuditEmName}}
                <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    GetClassBalanceSheet,
  } from '../../api/finance/index';
  import {
    EduDownLoad,
  } from '../../api/common/common';
  export default {
    meta: {
      title: "留学就业收支明细"
    },
    props: {},
    components: {},
    data() {
      return {
        dataList: [], //数据
        msg: {
          SourceId: 0,
          School_Id: 0,
        },
      }
    },
    created() {
      if (this.$route.query.SourceId && this.$route.query.SourceId) {
        this.msg.SourceId = this.$route.query.SourceId;
        this.msg.School_Id = this.$route.query.School_Id;
      }
    },
    mounted() {

      this.getData();
    },
    methods: {
      getData() {
        GetClassBalanceSheet(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.$router.push({
          path: '/financial/financalDocument/' + path,
          query: {
            "id": item.FrID,
            blank: 'y',
            tab: '单据详情'
          }
        })
      },
      //导出单据
      exportOrder() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad("/Finance/GetClassBalanceSheetToExcel", msg, "收支明细.xls")
      },
      //跳转到收款单
      goShoukuan(type) {
        let TCIDARR = []
        TCIDARR.push(this.msg.SourceId);
        let orderObj = {
          OrderID: 0,
          OrderSource: 18,
          Obj: {},
          SourceID: 0,
          TCIDList: TCIDARR
        }
        this.$router.push({
          path: '/financial/financalDocument/ChoiceAddFinancialDocuments',
          query: {
            "Type": type,
            "companyID": this.msg.School_Id,
            "path": "",
            'blank': 'y',
            'orderObj': JSON.stringify(orderObj),
            'tradeWay': '',
          }
        });
      }
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
