<template>
  <div class="finance-list-box" v-loading="loading">
      <div style="font-size:16px;">订单利润核算表</div>
      <div class="Team_Content" v-if="d">
          <el-row :gutter="12" v-if="d">
            <el-col :span="4">
              <div class="Team_DList">
                <div class="Team_firstTitle">
                  <span class="Team_comCoinType Team_shou">
                    <i class="iconfont icon-qian"></i>
                  </span>订单收入
                </div>
                <div class="Team_Incontent">
                  <div>应收：<span>￥{{d.YSMoney}}</span></div>
                  <div>实收：<span class="Team_Coins">￥{{d.SSMoney}}</span></div>
                  <div>手续费：<span class="Team_Coins">￥{{d.SSFee}}</span></div>
                  <div>待收：<span class="Team_Coins">￥{{d.DSMoney}}</span></div>
                  <div>
                    注：应收=订单应收总额，实收=订单实收总额（不包含手续费）
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="Team_DList">
                <div class="Team_firstTitle">
                  <span class="Team_comCoinType Team_shou">
                    <i class="iconfont icon-qian"></i>
                  </span>其他收入
                </div>
                <div class="Team_Incontent">
                  <div>应收：<span>￥{{d.OtherYS}}</span></div>
                  <div>实收：<span class="Team_Coins">￥{{d.OtherSS}}</span></div>
                  <div>手续费：<span class="Team_Coins">￥{{d.OtherFee}}</span></div>
                  <div>待收：<span class="Team_Coins">￥{{d.OtherDS}}</span></div> 
                  <div>
                    注：统计除订单上主业务外的其他总收入
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="Team_DList">
                <div class="Team_firstTitle">
                  <span class="Team_comCoinType Team_zhichu">
                    <i class="iconfont icon-qian"></i>
                  </span>成本支出
                </div>
                <div class="Team_Incontent">
                  <div>应付：<span>￥{{d.CostYFMoney}}</span></div>
                  <div>实付：<span class="Team_Coins">￥{{d.CostSFMoney}}</span></div>
                  <div>待付：<span class="Team_Coins">￥{{d.CostDFMoney}}</span></div>
                  <div>
                    注：成本总额+订单提成
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="Team_DList">
                <div class="Team_firstTitle">
                  <span class="Team_comCoinType Team_zhichu">
                    <i class="iconfont icon-qian"></i>
                  </span>退款
                </div>
                <div class="Team_Incontent">
                  <div>应退：<span>￥{{d.BackYFMoney}}</span></div>
                  <div>实退：<span class="Team_Coins">￥{{d.BackSFMoney}}</span></div>
                  <div>待退：<span class="Team_Coins">￥{{d.BackDFMoney}}</span></div>
                  <div>
                    注：订单产生的退款总额
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="Team_DList">
                <div class="Team_firstTitle">
                  <span class="Team_comCoinType Team_zhichu">
                    <i class="iconfont icon-qian"></i>
                  </span>其他支出
                </div>
                <div class="Team_Incontent">
                  <div>应付：<span>￥{{d.OtherYF}}</span></div>
                  <div>实付：<span class="Team_Coins">￥{{d.OtherSF}}</span></div>
                  <div>待付：<span class="Team_Coins">￥{{d.OtherDF}}</span></div>
                  <div>
                    注：订单产生的其他项目支出
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="Team_DList">
                <div class="Team_firstTitle">
                  <span class="Team_comCoinType Team_lirun">
                    <i class="iconfont icon-qian"></i>
                  </span>利润（计算规则请看注解）
                </div>
                <div class="Team_Incontent">
                  <div>实际利润：<span>￥{{d.RealityProfit}}</span></div>
                  <div>当前利润：<span class="Team_Coins">￥{{d.NowProfit}}</span></div>
                  <div>
                    注：(实收+其他收入)-成本(应付/实付)-其他(应付/实付)-退款(应付/实付)
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
      </div>
      <div class="Team_collection" v-if="d">
        <div class="clearfix TB_PrintDiv">
          <div class="TB_comtitle TB-Title">订单收入：
            <span>
              <span class="span_all">应收：¥{{d.YSMoney}}</span>
              <span class="span_all">实收：¥{{d.SSMoney}}</span>
            </span>
          </div>
        </div>
        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
          <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>
          <template v-if="isExsitList(1).length>0">
            <tr v-for="item in isExsitList(1)" :key="item.FrID">
              <td><span class="Team_income" @click="openDetails(item.FrID)">{{item.FrID}}</span>
              </td>
              <td><span v-for="(subItem,i) in item.CostTypeList" :key="i">{{subItem}}</span></td>
              <td>
                <div v-for="childItem in item.TradeWayList">
                  支付方式：{{childItem.Alias}}<span class="TB_Rate">币种：{{childItem.CurrencyName}}</span>
                  <span class="Team_Coins">{{childItem.OriginalMoney}}*{{childItem.Rate}}</span>
                  <span class="TB_Rate">汇率：{{childItem.Rate}}</span>
                </div>
              </td>
              <td style="font-size:14px;">
                应收：{{item.Money}}<br />
                实收：{{item.PayMoney}}
              </td>
              <td>{{item.TradeDate}}</td>
              <td>
                <div>{{item.EmName}}</div>
                <div class="Team_btmDiv">{{item.CreateDate}}</div>
              </td>
              <td>{{item.StatusStr}}</td>
              <td>
                <div v-for="AuditItem in item.AuditList">
                  {{AuditItem.EmName}}
                  <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
                </div>
              </td>
            </tr>
          </template>
          <tr v-else>
              <td colspan="8" class="none-finance">暂无相关单据</td>
          </tr>
        </table>
      </div>
      <div class="Team_collection" v-if="d">
        <div class="clearfix TB_PrintDiv">
          <div class="TB_comtitle TB-Title">其他收入
            <span>
              <span class="span_all">应收：¥{{d.OtherYS}}</span>
              <span class="span_all">实收：¥{{d.OtherSS}}</span>
            </span>
          </div>
        </div>
        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
          <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>
          <template v-if="isExsitList(2).length>0">
            <tr v-for="item in isExsitList(2)" :key="item.FrID">
              <td><span class="Team_income"  @click="openDetails(item.FrID)">{{item.FrID}}</span>
              </td>
              <td><span v-for="(subItem,i) in item.CostTypeList" :key="i">{{subItem}}</span></td>
              <td>
                <div v-for="childItem in item.TradeWayList">
                  支付方式：{{childItem.Alias}}<span class="TB_Rate">币种：{{childItem.CurrencyName}}</span>
                  <span class="Team_Coins">{{childItem.OriginalMoney}}*{{childItem.Rate}}</span>
                  <span class="TB_Rate">汇率：{{childItem.Rate}}</span>
                </div>
              </td>
              <td style="font-size:14px;">
                应收：{{item.Money}}<br />
                实收：{{item.PayMoney}}
              </td>
              <td>{{item.TradeDate}}</td>
              <td>
                <div>{{item.EmName}}</div>
                <div class="Team_btmDiv">{{item.CreateDate}}</div>
              </td>
              <td>{{item.StatusStr}}</td>
              <td>
                <div v-for="AuditItem in item.AuditList">
                  {{AuditItem.EmName}}
                  <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
                </div>
              </td>
            </tr>
          </template>
          <tr v-else>
              <td colspan="8" class="none-finance">暂无相关单据</td>
          </tr>
        </table>
      </div>
      <div class="Team_collection" v-if="d">
        <div class="clearfix TB_PrintDiv">
          <div class="TB_comtitle TB-Title">成本支出：
            <span>
              <span class="span_all">应付：¥{{d.CostYFMoney}}</span>
              <span class="span_all">实付：¥{{d.CostSFMoney}}</span>
            </span>
          </div>
        </div>
        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
          <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>
          <template v-if="isExsitList(3).length>0">
            <tr v-for="item in isExsitList(3)" :key="item.FrID">
              <td><span class="Team_income" @click="openDetails(item.FrID)">{{item.FrID}}</span>
              </td>
              <td><span v-for="(subItem,i) in item.CostTypeList" :key="i">{{subItem}}</span></td>
              <td>
                <div v-for="childItem in item.TradeWayList">
                  支付方式：{{childItem.Alias}}<span class="TB_Rate">币种：{{childItem.CurrencyName}}</span>
                  <span class="Team_Coins">{{childItem.OriginalMoney}}*{{childItem.Rate}}</span>
                  <span class="TB_Rate">汇率：{{childItem.Rate}}</span>
                </div>
              </td>
              <td style="font-size:14px;">
                应收：{{item.Money}}<br />
                实收：{{item.PayMoney}}
              </td>
              <td>{{item.TradeDate}}</td>
              <td>
                <div>{{item.EmName}}</div>
                <div class="Team_btmDiv">{{item.CreateDate}}</div>
              </td>
              <td>{{item.StatusStr}}</td>
              <td>
                <div v-for="AuditItem in item.AuditList">
                  {{AuditItem.EmName}}
                  <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
                </div>
              </td>
            </tr>
          </template>
          <tr v-else>
              <td colspan="8" class="none-finance">暂无相关单据</td>
          </tr>
        </table>
      </div>
      <div class="Team_collection" v-if="d">
        <div class="clearfix TB_PrintDiv">
          <div class="TB_comtitle TB-Title">其他支出：
            <span>
              <span class="span_all">应付：¥{{d.OtherYF}}</span>
              <span class="span_all">实付：¥{{d.OtherSF}}</span>
            </span>
          </div>
        </div>
        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
          <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>
          <template v-if="isExsitList(4).length>0">
            <tr v-for="item in isExsitList(4)" :key="item.FrID">
              <td><span class="Team_income" @click="openDetails(item.FrID)">{{item.FrID}}</span>
              </td>
              <td><span v-for="(subItem,i) in item.CostTypeList" :key="i">{{subItem}}</span></td>
              <td>
                <div v-for="childItem in item.TradeWayList">
                  支付方式：{{childItem.Alias}}<span class="TB_Rate">币种：{{childItem.CurrencyName}}</span>
                  <span class="Team_Coins">{{childItem.OriginalMoney}}*{{childItem.Rate}}</span>
                  <span class="TB_Rate">汇率：{{childItem.Rate}}</span>
                </div>
              </td>
              <td style="font-size:14px;">
                应收：{{item.Money}}<br />
                实收：{{item.PayMoney}}
              </td>
              <td>{{item.TradeDate}}</td>
              <td>
                <div>{{item.EmName}}</div>
                <div class="Team_btmDiv">{{item.CreateDate}}</div>
              </td>
              <td>{{item.StatusStr}}</td>
              <td>
                <div v-for="AuditItem in item.AuditList">
                  {{AuditItem.EmName}}
                  <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
                </div>
              </td>
            </tr>
          </template>
          <tr v-else>
              <td colspan="8" class="none-finance">暂无相关单据</td>
          </tr>
        </table>
      </div>
      <div class="Team_collection" v-if="d">
        <div class="clearfix TB_PrintDiv">
          <div class="TB_comtitle TB-Title">退款：
            <span>
              <span class="span_all">应退：¥{{d.BackYFMoney}}</span>
              <span class="span_all">实退：¥{{d.BackSFMoney}}</span>
            </span>
          </div>
        </div>
        <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
          <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>
          <template v-if="isExsitList(4).length>0">
            <tr v-for="item in isExsitList(4)" :key="item.FrID">
              <td><span class="Team_income" @click="openDetails(item.FrID)">{{item.FrID}}</span>
              </td>
              <td><span v-for="(subItem,i) in item.CostTypeList" :key="i">{{subItem}}</span></td>
              <td>
                <div v-for="childItem in item.TradeWayList">
                  支付方式：{{childItem.Alias}}<span class="TB_Rate">币种：{{childItem.CurrencyName}}</span>
                  <span class="Team_Coins">{{childItem.OriginalMoney}}*{{childItem.Rate}}</span>
                  <span class="TB_Rate">汇率：{{childItem.Rate}}</span>
                </div>
              </td>
              <td style="font-size:14px;">
                应收：{{item.Money}}<br />
                实收：{{item.PayMoney}}
              </td>
              <td>{{item.TradeDate}}</td>
              <td>
                <div>{{item.EmName}}</div>
                <div class="Team_btmDiv">{{item.CreateDate}}</div>
              </td>
              <td>{{item.StatusStr}}</td>
              <td>
                <div v-for="AuditItem in item.AuditList">
                  {{AuditItem.EmName}}
                  <span class="TB_Rate">{{AuditItem.AuditDate}}</span>
                </div>
              </td>
            </tr>
          </template>
          <tr v-else>
              <td colspan="8" class="none-finance">暂无相关单据</td>
          </tr>
        </table>
      </div>
  </div>
</template>

<script>
export default {
  props: ["orderId"],
  data() {
    return {
      loading: true,
      d: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.apipost2(
        "crm_post_GetCRMGuestOrderCheck",
        { OrderId: this.orderId },
        (res) => {
          if (res.data.resultCode == 1) {
            this.d = res.data.data;
          }
          this.loading = false;
        },
        (err) => {}
      );
    },
    openDetails(item) {
      let href;
      let url = this.domainManager().erpRoutingUrl;
      let data = [
        {
          path: "FinancialDocumentsDetail",
          id: item.FrID,
        },
      ];
      href =
        url +
        "automaticLogin?token=" +
        this.getLocalStorage().token +
        "&data=" +
        JSON.stringify(data);
      window.open(href);
    },
    isExsitList(code) {
      if (code == 1) {
        return this.d.FinanceList.filter(
          (x) => x.ReFinanceId2 == 2 && x.RelevanceFrId != 5
        );
      } else if (code == 2) {
        return this.d.FinanceList.filter(
          (x) => x.ReFinanceId2 == 2 && x.RelevanceFrId == 5
        );
      } else if (code == 3) {
        return this.d.FinanceList.filter(
          (x) => x.ReFinanceId2 == 3 && x.RelevanceFrId != 5
        );
      } else if (code == 4) {
        return this.d.FinanceList.filter(
          (x) => x.ReFinanceId2 == 3 && x.RelevanceFrId == 5
        );
      } else if (code == 5) {
        return this.d.FinanceList.filter((x) => x.ReFinanceId2 == 2);
      }
    },
  },
};
</script>

<style>
.finance-list-box {
  padding: 0 20px 20px 20px;
  position: absolute;
  top: 54px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}
.none-finance {
  height: 30px;
  text-align: center;
  color: #666666;
}
.TB_comtitle {
  color: #333333;
  padding-left: 10px;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
  border-left: 3px solid #4d7afd;
  margin-bottom: 20px;
}

.Team_Details {
  margin-top: 20px;
  font-size: 12px;
}

.Team_DList {
  border: 1px solid #e6e6e6;
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
  height: 167px;
}
.tipTable tr td {
  height: 30px !important;
}
.singeRowTable tr th {
  height: 30px;
  text-align: left !important;
}

.singeRowTable tr td {
  border: 1px solid #e5e5e5;
  padding: 0px !important;
  padding-left: 12px !important;
}

/* .Team_Content .el-col-5 {
  margin-right: 18px;
} */
.Team_Coins {
  color: #ff9c00;
}

.Team_income {
  color: #4d7afd;
  text-decoration: underline;
  cursor: pointer;
}

.TB-Title {
  float: left;
  position: relative;
  top: 10px;
}

.Team_ComCoin {
  width: 60%;
  margin: auto;
  text-align: left;
}

.Team_btmDiv {
  margin-top: 5px;
}

.Team_collection {
  margin-top: 40px;
}

.Team_outCome {
  color: #ff9c00;
}

.Team_Pay {
  color: #ff5150;
}

.TeamAddBtn {
  float: right;
  margin-bottom: 10px;
}

.Team_DList div {
  margin-bottom: 8px;
  color: #666666;
}

.Team_firstTitle {
  font-size: 14px;
  /* font-family: "PingFang-SC-Bold"; */
  color: #333333 !important;
}

.Team_comCoinType {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  top: -1px;
}

.Team_shou {
  background-color: #d7e6ff;
  color: #4d7afd;
}

.Team_firstTitle span {
  margin-right: 10px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  vertical-align: middle;
}
.Team_Incontent {
  font-size: 12px;
}
.Team_Incontent span {
  font-size: 12px;
  font-family: "PingFangSC-Fine";
}

.Team_zhichu {
  background-color: #fde2df;
  color: #ff504f;
}

.Team_lirun {
  background-color: #d1f3ea;
  color: #1bc594;
}

.Team_BtnList {
  margin-top: 30px;
  text-align: center;
}

.TB_Rate,
.TB_PayMoney {
  margin-left: 20px;
}

.TeamBalancePayment .TB_PrintDiv {
  height: 40px;
}

.span_all {
  margin-left: 15px;
}
.TeamExpectList {
  max-height: 105px;
  overflow: auto;
  margin-bottom: 0 !important;
}
</style>
