<style>
    .priceIncomeTable{
        width:1200px;
        border-collapse:collapse;
        font-size:14px;
    }
    .priceIncomeTable td{
        border: 1px solid #dcdfe6;
        height:34px;
        background-color: #fff;
        text-align: center;
    }
    .priceComtd{
        background: #e6e6e6!important;
    }
    .princeOrderSpan{
        margin-right:10px;
        display: inline-block;
    }
    .PriceRemark{
        width:100%;
        min-height: 100px;
        padding:10px;
        font-size: 14px;
        background-color: #fff;
    }
    .leftRemarkTitle{
        float:left;
        width:5%;
        text-align: right;
    }
    .rightRemarkContent{
        float:left;
        width:95%;
    }
    .priceContent{
        width:830px;
        padding:15px;
        background-color: #fff;
        min-height:500px;
        /* color:#c94052; */
        color:#666;
    }
    .pri_title{
        font-size: 18px;
        text-align: center;
        margin-bottom:20px;
    }
    .priceContent table td,.priceContent table th{
        height:34px;
        padding:10px;
    }
    .priceContent .pri_EmpName{
        float:left ;
        margin-left:20px;
    }
    .priceContent .pri_DateTime{
        float:right;
        margin-right: 20px;
    }
  .priceIncomeTable {
    width: 1200px;
    border-collapse: collapse;
    font-size: 14px;
  }

  .priceIncomeTable td {
    border: 1px solid #dcdfe6;
    height: 34px;
    background-color: #fff;
    text-align: center;
  }

  .priceComtd {
    background: #e6e6e6 !important;
  }

  .princeOrderSpan {
    margin-right: 10px;
    display: inline-block;
  }

  .PriceRemark {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
  }

  .leftRemarkTitle {
    float: left;
    width: 5%;
    text-align: right;
  }

  .rightRemarkContent {
    float: left;
    width: 95%;
  }

  .priceContent {
    width: 830px;
    padding: 15px;
    background-color: #fff;
    min-height: 500px;
  }

  .pri_title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }

  .priceContent table td, .priceContent table th {
    height: 34px;
    padding: 10px;
    border:1px solid #c94052;
  }

  .priceContent .pri_EmpName {
    float: left;
    margin-left: 20px;
  }

  .priceContent .pri_DateTime {
    float: right;
    margin-right: 20px;
  }

  .leftDepart {
    display: inline-block;
    width: 60%;
    height: 35px;
  }

  .rightDepart {
    width: 39%;
    height: 35px;
    display: inline-block;
  }

  .comTextAlign {
    text-align: left;
    padding: 10px 30px !important;
    color:#c94052;
  }
  .PC_ComConfirmTR td,.PC_ComConfirm{
    color:#c94052;
  }
</style>

<template>
  <div class="priceContent">
    <p class="pri_title">团队收入确认单</p>
    <div class="clearfix">
      <div class="leftDepart">
        <span>部门：</span>
        <span>{{confirmInfo.DepartmentName}}</span>
      </div>
      <!--<div class="rightDepart">-->
      <!--<span>单号：</span>-->
      <!--<span>123456</span>-->
      <!--</div>-->
    </div>
    <table border="1" style="border-collapse: collapse;width:100%;font-size:14px;text-align:center;">
      <tr>
        <td class="PC_ComConfirm">团号</td>
        <td class="PC_ComConfirm">团队编号</td>
        <td class="PC_ComConfirm" colspan="2">线路/系列</td>
        <td class="PC_ComConfirm">人数</td>
        <td colspan="3">{{confirmInfo.PeopleNum}}</td>
      </tr>
      <tr>
        <td>{{confirmInfo.TCID}}</td>
        <td>{{confirmInfo.TCNUM}}</td>
        <td colspan="2">
          <div style="width:260px;text-align:left;">{{confirmInfo.LineName}}【{{confirmInfo.LtName}}】</div>
        </td>
        <td class="PC_ComConfirm">领队</td>
        <td colspan="3">{{confirmInfo.LeaderName}}</td>
      </tr>
      <tr>
        <td class="PC_ComConfirm">团队收入合计</td>
        <td colspan="7">{{confirmInfo.TotalIncome}}</td>
      </tr>
      <tr>
        <td colspan="8" class="comTextAlign">交易明细</td>
      </tr>
      <tr class="PC_ComConfirmTR">
        <td>同行名称</td>
        <td>应收金额</td>
        <td>实收金额</td>
        <td>优惠金额</td>
        <td>手续费</td>
        <td>退款</td>
        <td>在途</td>
        <td>未收</td>
      </tr>
      <tr v-for="item in confirmInfo.TradeTravelOrderList">
        <td>
          <div>{{item.ContactName}}</div>
          <div style="display:none;">{{item.ContactMobile}}</div>
        </td>
        <td>{{item.PreferPrice}}</td>
        <td>{{item.Income}}</td>
        <td>{{item.DiscountMoney}}</td>
        <td>{{item.PlatformTax}}</td>
        <td>{{item.Refund}}</td>
        <td>{{item.ZaiTuMoney}}</td>
        <td>{{item.OutstandingAmount}}</td>
      <tr>
        <td colspan="8" class="comTextAlign">平台款项</td>
      </tr>
      <tr class="PC_ComConfirmTR">
        <td>平台名称</td>
        <td>应收金额</td>
        <td>实收金额</td>
        <td>优惠金额</td>
        <td>手续费</td>
        <td>退款</td>
        <td>在途</td>
        <td>未收</td>
      </tr>
      <tr v-for="item in confirmInfo.PlatformTravelOrderList">
        <td>{{item.BrandName}}</td>
        <td>{{item.PreferPrice}}</td>
        <td>{{item.Income}}</td>
        <td>{{item.DiscountMoney}}</td>
        <td>{{item.PlatformTax}}</td>
        <td>{{item.Refund}}</td>
        <td>{{item.ZaiTuMoney}}</td>
        <td>{{item.OutstandingAmount}}</td>
      </tr>
      <tr>
        <td class="PC_ComConfirm">其中</td>
        <td class="PC_ComConfirm">直客收入</td>
        <td colspan="6">{{confirmInfo.DirectGuestIncome}}</td>
      </tr>
      <tr>
        <td></td>
        <td class="PC_ComConfirm">同行交客收入</td>
        <td colspan="6">{{confirmInfo.PlatformGuestIncome}}</td>
      </tr>
      <tr>
        <td></td>
        <td class="PC_ComConfirm">平台收入</td>
        <td colspan="6">{{confirmInfo.PlatformIncome}}</td>
      </tr>
      <tr>
        <td colspan="8">
                <span class="pri_EmpName">
                    <span class="PC_ComConfirm">操作人：</span>{{confirmInfo.EmpName}}
                </span>
          <span class="pri_DateTime">
                    <span class="PC_ComConfirm">操作时间：</span>{{confirmInfo.DateTimeStr}}
                </span>
        </td>
      </tr>
    </table>
    <!-- <table border="1" bordercolor="#c94052" style="border-collapse: collapse;width:100%;font-size:14px;text-align:center;">
        <tr>
            <th>部门</th>
            <th>{{dataList.DepartmentName}}</th>
            <th>单号</th>
            <th width="200">{{dataList.Id}}</th>
        </tr>
        <tr>
            <th>团号</th>
            <th>团队编号</th>
            <th>人数</th>
            <th>领队</th>
        </tr>
        <tr>
            <td>{{dataList.TCNUM}}</td>
            <td>{{dataList.TCID}}</td>
            <td>{{dataList.PeopleNum}}</td>
            <td>{{dataList.LeaderName}}</td>
        </tr>
        <tr>
            <td>团费收入合计</td>
            <td colspan="3">{{dataList.TotalIncome}}</td>
        </tr>
        <tr>
            <td rowspan="3">其中</td>
            <td>直客收入</td>
            <td colspan="2">{{dataList.DirectGuestIncome}}</td>
        </tr>
        <tr>
            <td>同行交客收入</td>
            <td colspan="2">{{dataList.PlatformGuestIncome}}</td>
        </tr>
        <tr>
            <td>平台收入</td>
            <td colspan="2">{{dataList.PlatformIncome}}</td>
        </tr>
        <tr>
            <td colspan="4">
                <span class="pri_EmpName">
                    操作人：{{dataList.EmpName}}
                </span>
                <span class="pri_DateTime">
                    操作时间：{{dataList.DateTimeStr}}
                </span>
            </td>
        </tr>
    </table> -->
  </div>
</template>
<script>
  export default {
    data () {
      return {
        loading: false,
        msg: {
          tcid: ''
        },
        confirmInfo: {},
      }
    },
    methods: {
      getList () {
        //获取数据
        this.loading = true
        this.apipost(
          'travel_post_GetPriceIncomeConfirmInfo',
          this.msg,
          res => {
            this.loading = false
            if (res.data.resultCode == 1) {
              this.confirmInfo = res.data.data
            } else {
              this.Error(res.data.message)
            }
          },
          err => {
          }
        )
      },
    },
    mounted () {
      this.msg.tcid = this.$route.query.TCID
      this.getList()
    }
  }
</script>

