<style>
.page_SalesFinancialDetail{}
.page_SalesFinancialDetail p.sfd_tit {
  border-left: 3px solid #E95252;
  text-indent: 10px;
  font-size: 16px;
  line-height: 30px;
  margin: 20px 0 10px 0;
}
.page_SalesFinancialDetail .sfd_nav{margin: 20px 0 0 0 ;}
.page_SalesFinancialDetail .sfd_nav li{float: left;font-size: 14px;color: #666666;padding: 15px 20px;cursor: pointer;position: relative;background-color: #f1f1f1;margin-right: 5px}
.page_SalesFinancialDetail .sfd_nav li._active{background-color:#FFFFFF;color: #333333 }
.page_SalesFinancialDetail .sfd_nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
.page_SalesFinancialDetail p.sfd_tit input{
  float: right
}
.page_SalesFinancialDetail .sfd_header{
  position: relative;
  width: 100%;
  margin-bottom: 15px;
}
.page_SalesFinancialDetail .sfd_header input{
  position: absolute;
  right: 0;
  bottom: 0;
}
.page_SalesFinancialDetail .sfd_header>ul {
  background-color: white;
  padding: 15px;
  border-radius: 4px;
  width: 800px;
}
.page_SalesFinancialDetail .sfd_header>ul>li {
  float: left;
  width: 33%;
  padding: 5px 0;
  min-height: 31px;
}
.page_SalesFinancialDetail .sfd_header>ul>li>span {
  font-size: 14px;
  color: #666;
}
.page_SalesFinancialDetail table.teamRevenueExpenditureTable {
  background: #eee;
  width: 100%;
  margin-bottom: 30px;
}
.page_SalesFinancialDetail table.teamRevenueExpenditureTable th {
  background: #D1D1D1;
  font-weight: normal !important;
  font-size: 14px;
  height: 30px;
  color: #333;
}
.page_SalesFinancialDetail table.teamRevenueExpenditureTable td {
  background: #fff;
  height: 36px;
  text-align: center;
  font-size: 12px;
}
.page_SalesFinancialDetail table.teamRevenueExpenditureTable td:first-child span {
  text-decoration: underline;
  cursor: pointer;
}
.page_SalesFinancialDetail td.noDataNotice p.iconfont {
  font-size: 120px;
  color: #ccc;
}
.page_SalesFinancialDetail td.noDataNotice p.text{
  color: #999;
  margin-bottom: 20px;
}
.page_SalesFinancialDetail .color_red{
  color: #e95252 !important;
}
.page_SalesFinancialDetail .sfd_header>ul:nth-child(1){
  padding-bottom: 0;
}
.page_SalesFinancialDetail .sfd_header>ul:nth-child(2){
  padding-top: 0;
}
</style>
<template>
  <div class="page_SalesFinancialDetail">
    
    <div v-loading="loading">
      <div class="sfd_header">
        <ul class="clearfix">
          <li><span>制单收入：</span>{{staInfo.PreferPrice}}</li>
          <li><span>实收：</span>{{staInfo.Income}}</li>
          
        </ul>
        <ul class="clearfix">
            <li><span>平台税金：</span>{{staInfo.PlatformTax}}</li>
            <li><span>退款：</span>{{staInfo.Refund}}</li>
            <li><span>成本：</span><span>{{staInfo.Cost}}</span></li>
        </ul>
        
      </div>
      <p class="sfd_tit clearfix">收款单 
          <!-- <input type="button"  v-if="(item.isOwn ? item.isOwn : item.IsOwn) ===1 && (item.orderState ? item.orderState : item.OrderState) !== '4' && (item.orderState ? item.orderState : item.OrderState) !== '3'" value="新增收款" class="normalBtn" @click="addFinancialOrder(1)"> -->
        </p>
      <table border="0" cellspacing="1" cellpadding="0" class="teamRevenueExpenditureTable">
        <tr>
          <th width="100">单号</th>
          <th width="200">费用类型</th>
          <th width="350">交易方式</th>
          <th width="100">同行转款</th>
          <th width="100">应收</th>
          <th width="100">实收</th>
          <th width="100">平台税金</th>
          <th width="150">交易日期</th>
          <th width="100">制单人员</th>
          <th width="120">当前状态</th>
        </tr>
        <tr v-for="(item, index) in dataList">
          <td width="100" @click="goUrl('财务单据','FinancialDocumentsDetail',item.FrID)"><span>{{item.FrID}}</span></th>
          <td width="">
            <template v-for="(s,si) in item.CostTypeList">
                <span  style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;margin-right: 4px;">{{s}}</span>
            </template>
          </td>
          <td width="">
            <template v-if="item.TradeWayList&&item.TradeWayList.length>0">
                <div class="_TradeWayList"   v-for="(tw,twIn) in item.TradeWayList" style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;margin: 5px auto;width:230px">
                    <p><span style="font-weight: bold;color:#333333">{{tw.Alias}}</span><span class="_bank_name" style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">{{item.TradeWayList[0].TypeName}}</span><span style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;" :style="{'background-color':tw.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{tw.AccountType==""?'无':tw.AccountType}}</span> </p>
                    <p style="color:#333333">{{tw.BankNo}}</p>
                </div>
            </template>
            <template v-else>
                <div class="_pad5">
                    无
                </div>
            </template>
          </td>
          <td width="">
            <p style="line-height:20px"><span>{{moneyFormat(item.PreferPrice)}}</span></p>
          </td>
          <td>
            <p style="line-height:20px"><span>{{moneyFormat(item.Money)}}</span></p>
          </td>
          <td>
            <p style="line-height:20px"><span>{{moneyFormat(item.PayMoney)}}</span></p>
          </td>
          <td>
            <p style="line-height:20px"><span>{{moneyFormat(item.Fee)}}</span></p>
          </td>
          <td width="">{{item.TradeDate}}</td>
          <td width="">{{item.EmName}}</td>
          <td width="">
            <i v-if="item.Status==1" class="iconfont icon-daiqueren" style="color: #4BCA81"></i>
            <i v-if="item.Status==4" class="iconfont icon-yiquxiao" style="color: #4BCA81"></i>
            <i v-if="item.Status==2" class="iconfont icon-yiqueren" style="color: #959595"></i>
            <i  v-if="item.Status==3" class="iconfont icon-shenhebohui" style="color: #E95252"></i>
            <i  v-if="item.Status==0" class="iconfont icon-zancun" style="color: #FF9C01"></i>
            <el-popover
                popper-class="detailsIT_Journal"
                width="250"
                trigger="click">
                    <div style="height: auto;max-height: 220px;background-color: #FFFFFF;">
                        <div class="changLog">
                            <p class="_log_t">流程日志</p>
                            <ul style="padding-left: 20px;max-height: 180px;overflow: auto;" v-if="GetFinancLogList" v-loading='LogLoading'>
                                <li style="border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;" v-for="(log,li) in GetFinancLogList">
                                    <span style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;"></span>
                                    <p> <span class="_color_blue">{{log.EmName}}</span>  <span class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                                    <p class="_dtel">{{log.StartValue}}</p>
                                </li>
                            </ul>
                            <ul v-else>
                                <li>暂无修改日志</li>
                            </ul>
                        </div>
                    </div>
                <span slot="reference" style="cursor: pointer;"  @click="Financial_post_GetFinancLogList(item.FrID)">{{item.StatusStr}}</span>
            </el-popover>
          </td>
        </tr>
        <tr v-if="dataList.length===0">
          <td colspan="10" class="noDataNotice">
            <div>
              <p class="iconfont icon-kong"></p>
              <p class="text">{{`暂无数据`}}</p>
            </div>
          </td>
        </tr>
      </table>
      <div style="text-align:center">
          <el-pagination
        background
        @current-change="handleCurrentChange"
        v-if="dataList.length>0"
        :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper"
        :page-size="msg.pageSize"
        :total="total"
        ></el-pagination>
      </div>
      <p class="sfd_tit clearfix">付款单 
          <!-- <input type="button"  v-if="(item.isOwn ? item.isOwn : item.IsOwn) ===1 && (item.orderState ? item.orderState : item.OrderState) !== '4' && (item.orderState ? item.orderState : item.OrderState) !== '3'" value="新增付款" class="normalBtn" @click="addFinancialOrder(2)"> -->
    </p>
      <table border="0" cellspacing="1" cellpadding="0" class="teamRevenueExpenditureTable">
        <tr>
          <th width="100">单号</th>
          <th width="200">费用类型</th>
          <th width="350">交易方式</th>
          <th width="100">同行转款</th>
          <th width="100">应付</th>
          <th width="100">实付</th>
          <th width="100">平台税金</th>
          <th width="150">交易日期</th>
          <th width="100">制单人员</th>
          <th width="120">当前状态</th>
        </tr>
        <tr v-for="(item, index) in dataListP">
          <td width="100" @click="goUrl('财务单据','FinancialDocumentsDetail',item.FrID)"><span>{{item.FrID}}</span></th>
          <td width="">
            <template v-for="(s,si) in item.CostTypeList">
                <span  style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;margin-right: 4px;">{{s}}</span>
            </template>
          </td>
          <td width="">
            <template v-if="item.TradeWayList&&item.TradeWayList.length>0">
                <div class="_TradeWayList"   v-for="(tw,twIn) in item.TradeWayList" style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;margin: 5px auto;width:230px">
                    <p><span style="font-weight: bold;color:#333333">{{tw.Alias}}</span><span class="_bank_name" style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">{{item.TradeWayList[0].TypeName}}</span><span style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;" :style="{'background-color':tw.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{tw.AccountType==""?'无':tw.AccountType}}</span> </p>
                    <p style="color:#333333">{{tw.BankNo}}</p>
                </div>
            </template>
            <template v-else>
                <div class="_pad5">
                    无
                </div>
            </template>
          </td>
          <td width="">
            <p style="line-height:20px"><span>{{moneyFormat(item.PreferPrice)}}</span></p>
          </td>
          <td>
            <p style="line-height:20px"><span>{{moneyFormat(item.Money)}}</span></p>
          </td>
          <td>
            <p style="line-height:20px"><span>{{moneyFormat(item.PayMoney)}}</span></p>
          </td>
          <td>
            <p style="line-height:20px"><span>{{moneyFormat(item.Fee)}}</span></p>
          </td>
          <td width="">{{item.TradeDate}}</td>
          <td width="">{{item.EmName}}</td>
          <td width="">
            <i v-if="item.Status==1" class="iconfont icon-daiqueren" style="color: #4BCA81"></i>
            <i v-if="item.Status==4" class="iconfont icon-yiquxiao" style="color: #4BCA81"></i>
            <i v-if="item.Status==2" class="iconfont icon-yiqueren" style="color: #959595"></i>
            <i  v-if="item.Status==3" class="iconfont icon-shenhebohui" style="color: #E95252"></i>
            <i  v-if="item.Status==0" class="iconfont icon-zancun" style="color: #FF9C01"></i>
            <el-popover
                popper-class="detailsIT_Journal"
                width="250"
                trigger="click">
                    <div style="height: auto;max-height: 220px;background-color: #FFFFFF;">
                        <div class="changLog">
                            <p class="_log_t">流程日志</p>
                            <ul style="padding-left: 20px;max-height: 180px;overflow: auto;" v-if="GetFinancLogList" v-loading='LogLoading'>
                                <li style="border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;" v-for="(log,li) in GetFinancLogList">
                                    <span style="background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;"></span>
                                    <p> <span class="_color_blue">{{log.EmName}}</span>  <span class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                                    <p class="_dtel">{{log.StartValue}}</p>
                                </li>
                            </ul>
                            <ul v-else>
                                <li>暂无修改日志</li>
                            </ul>
                        </div>
                    </div>
                <span slot="reference" style="cursor: pointer;"  @click="Financial_post_GetFinancLogList(item.FrID)">{{item.StatusStr}}</span>
            </el-popover>
          </td>
        </tr>
        <tr v-if="dataListP.length===0">
          <td colspan="10" class="noDataNotice">
            <div>
              <p class="iconfont icon-kong"></p>
              <p class="text">{{`暂无数据`}}</p>
            </div>
          </td>
        </tr>
      </table>
      <div style="text-align:center">
          <el-pagination
        background
        @current-change="handleCurrentChange2"
        v-if="dataListP.length>0"
        :current-page.sync="currentPage2"
        layout="total,prev, pager, next, jumper"
        :page-size="msg2.pageSize"
        :total="total2"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage:1,
      currentPage2:1,
      total:0,
      total2:0,
      orderId: 0,
      dataList: [],
      dataListP: [],
      loading: true,
      noData: true,
      activeTab: 1,
      tcnum: '',
      msg:{
        pageIndex: 1,
        pageSize: 15,
        ReFinanceId:0,
        Type:1,
      },
      msg2:{
        pageIndex: 1,
        pageSize: 15,
        ReFinanceId:0,
        Type:2,
      },
      GetFinancLogList: [],
      LogLoading: true,
      allMoney: 0,
      shiMoney: 0,
      allMoneyP: 0,
      shiMoneyP: 0,
      userId: null,
      item: {},
      ReFinanceId:0,
      staInfo:{},
    }
  }, methods: {
    Financial_post_GetFinancLogList: function(id){  // 获取单据日志
      if (this.checkboxShow) return
      this.LogLoading = true;
      this.apipost('Financial_post_GetFinancLogList',{ID: id, Type: 2}, res => {
        if (res.data.resultCode == 1) {
          let data = res.data.data;
          data.forEach(x=>{
            x.UpdateDate = this.$commonUtils.formatMsgTime(x.UpdateDate)
          })
          this.LogLoading = false;
          this.GetFinancLogList = data;
        }
      },null)
    },
    goUrl: function (name, path, id ) {
      this.$router.push({ name: path, query: { id: id, blank: 'y', tab: name} });
    },
    handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
    },
    handleCurrentChange2(val) {
        this.msg2.pageIndex = val;
        this.getList2();
    },
    getList(){
      this.apipost('Financial_get_GetECommerceGoodsFinancePageList', this.msg, res=>{
        this.loading = false;
        if (res.data.resultCode == 1) {
          let data = res.data.data.pageData;
            this.allMoney = 0;
            this.shiMoney = 0;
            data.forEach(x=>{
              this.allMoney += x.PreferPrice
                this.shiMoney += (x.PayMoney+x.Fee)
            })
            this.dataList = data;
            this.total=res.data.data.count;
        } else {
          this.loading = false;
          this.$message.error(res.data.message);
        }
      }, null)
    },
    getList2() {
      this.loading = true;
      this.apipost('Financial_get_GetECommerceGoodsFinancePageList', this.msg2, res=>{
        this.loading = false;
        if (res.data.resultCode == 1) {
          let data = res.data.data.pageData;
            this.allMoneyP = 0;
            this.shiMoneyP = 0;
            data.forEach(x=>{
              this.allMoneyP += x.PreferPrice
              // if(x.PayMoney>0){
              this.shiMoneyP += (x.PayMoney+x.Fee)
              // }
            })
            this.dataListP = data;
            this.total2=res.data.data.count;
        } else {
          this.loading = false;
          this.$message.error(res.data.message);
        }
      }, null)
    },
    addFinancialOrder: function (type) {  //  新增单据方法
      let TCIDARR = [this.tcid];
      let orderObj = {
        OrderID: this.orderId,
        OrderSource: 8,
        Obj: {},
        SourceID: 0,
        TCIDList: TCIDARR
      }
      if (type === 1) {
        this.$router.push({
          name: 'ChoiceAddFinancialDocuments',
          query:{
            "Type": 1,
            "companyID": this.outBranchId,
            "path": "",
            'blank': 'y',
            'orderObj': JSON.stringify(orderObj)
          }
        });
      } else if (type === 2) {
        this.$router.push({
          name: 'ChoiceAddFinancialDocuments',
          query:{
            "Type": 2,
            "companyID": this.outBranchId,
            "path": "",
            'blank': 'y',
            'orderObj': JSON.stringify(orderObj)
          }
        });
      }
    },
    getstaInfo(){
            this.loading=true;
            this.apipost("Financial_get_GetECommerceGoodsFinanceStatistics",{ReFinanceId:this.ReFinanceId}, res => {
                this.loading=false;
                if (res.data.resultCode == 1) {
                    this.staInfo = res.data.data;
                }
            });
        },
  }, mounted() {
    this.ReFinanceId=this.$route.query.ReFinanceId?this.$route.query.ReFinanceId:this.ReFinanceId;
    this.msg.ReFinanceId=this.$route.query.ReFinanceId?this.$route.query.ReFinanceId:this.ReFinanceId;
    this.msg2.ReFinanceId=this.$route.query.ReFinanceId?this.$route.query.ReFinanceId:this.ReFinanceId;
    this.userId = this.getLocalStorage().EmployeeId;
    let obj = this.$route.query.item ? JSON.parse(this.$route.query.item) : ''
    this.item = obj
    this.orderId = this.msg.OrderID = obj.orderId ? obj.orderId : obj.OrderId
    this.tcnum = obj.tcnum ? obj.tcnum : obj.TCNUM
    this.tcid = obj.tcid ? obj.tcid : obj.TCID
    this.outBranchId = obj.outBranchId ? obj.outBranchId : obj.OutBranchId
    this.getList()
    this.getList2()
    this.getstaInfo();
  }
}
</script>