<style>
  .paymentDetail .p_title {
    color: #000000;
    font-size: 20px;
    height: 30px !important;
    display: flex;
    align-items: center;
  }

  .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;
    margin-bottom: 20px;
  }

</style>
<template>
  <div class="page-body paymentDetail">
    <div class="page-search items-center">
      <div class="p_titleList">

        <div class="p_title">
          <q-btn color="accent" size="sm" class="q-mr-sm" label="返回" @click="goBack" />
          活动收支</div>
      </div>
      <div class="row">
        <div class="col paymentList" v-if="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.ActivityName}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">开始时间</div>
            <div class="pay_Inner">{{dataList.ClassInfo.StartTimeStr}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">结束时间</div>
            <div class="pay_Inner">{{dataList.ClassInfo.EndTimeStr}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListOne">地址</div>
            <div class="pay_Inner">{{dataList.ClassInfo.LocationName}}</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/bjsr.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/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.OtherPayReceive}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">实付</div>
            <div class="pay_Inner orangeStyle">¥{{dataList.OtherPayActual}}</div>
          </div>
          <div class="pay_ListMent">
            <div class="pay_ListTwo">待付</div>
            <div class="pay_Inner orangeStyle ">¥{{getShiShou(dataList.OtherPayReceive,dataList.OtherPayActual)}}</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 orangeStyle">¥{{dataList.ActivityCommission}}</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: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" @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: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-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 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.FinicePayList==0">
            <td :colspan="8" align="center">暂无数据</td>
          </tr>
          <tr v-for="(item,index) in dataList.FinicePayList" :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>
  export default {
    data() {
      return {
        dataList: {
          ClassInfo: {}
        }, //数据
        msg: {
          Id: 0,
        },
      }
    },
    mounted() {
      if (this.$route.query.Id) {
        this.msg.Id = this.$route.query.Id;
      }
      this.getData();
    },
    methods: {
      getData() {
        this.loading = true;
        this.apipostDS("/api/Education/GetActivityBalanceSheet", this.msg, (res) => {
          this.loading = false
          if (res.data.resultCode === 1) {
            this.dataList = res.data.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: '单据详情'
          }
        })
      },
      //跳转到收款单type=2付款，1收款
      goShoukuan(type) {
        // let TCIDARR = []
        // TCIDARR.push(this.msg.ClassId)
        let orderObj = {
          // OrderID: 0,
          OrderSource: 17,
          // Obj: {},
          // SourceID: 0,
          // TCIDList: TCIDARR,
          OtherType: 41,
          ReFinanceId: this.msg.Id
        }
        this.$router.push({
          path: '/financial/financalDocument/ChoiceAddFinancialDocuments',
          query: {
            "Type": type,
            // "ReFinanceId":this.msg.Id,
            // "companyID": this.msg.Id,
            // "path": "",
            'blank': 'y',
            'orderObj': JSON.stringify(orderObj),
            // 'tradeWay': '',
          }
        });

      },
      goBack() {
        this.$router.go(-1)
      },
    }
  }

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

</style>
