<style>
  @import url('../css/TicketingModule.css');
  .sanjiao-box{
    position: relative;
  }
  .sanjiao-box .Receipt_table td{
    padding: 0 10px;
  }
  .hover_text span{
    cursor: pointer;
    text-decoration: underline;
  }
  .czBillModule td{
    text-align: center!important;
    padding:6px 0!important;
  }
</style>
<template>
  <div class="m_TicketingModule">
    <div  v-if="OtherType==7">
      <div class="_tit">
        <span class="_text">预付款单据</span>
        <div>
          <span class="_btn" v-if="tableShow" @click="tableShow=false">收起 <i class="iconfont icon-gengduo _rotate"></i> </span>
          <span class="_btn" v-else @click="tableShow=true">展开 <i class="iconfont icon-gengduo"></i> </span>
        </div>
      </div>
      <div v-show="tableShow" class="sanjiao-box _padding_20_15">
        <table border="1" class="czBillModule _border_color_b Receipt_table" bordercolor="#c94052" style="border-collapse:collapse;width: 100%;" v-loading='loading'>
          <tr>
            <th>单号</th>
            <th>公司</th>
            <th>费用类型</th>
            <th>币种</th>
            <th>汇率</th>
            <th>金额</th>
            <th>冲抵金额</th>
          </tr>
          <tr class="_color_b" v-for="(item,index) in czList" :key="index">
            <td class="hover_text" @click="goDetail(item.FrID)" ><span>{{item.FrID}}</span></td>
            <td>{{item.BranchName}}</td>
            <td>{{item.CostTypeName}}</td>
            <td>{{item.CurrencyName}}</td>
            <td>{{item.Rate}}</td>
            <td>{{item.Money}}</td>
            <td>{{item.MatchMoney}}</td>
          </tr>
        </table>
      </div>
    </div>
    <div v-if="IsAdvanceFinance==1" style="border-top: 1px solid #DDDDDD;">
      <div class="_tit">
        <span class="_text">冲抵单据</span>
        <div>
          <span class="_btn" v-if="tableShow1" @click="tableShow1=false">收起 <i class="iconfont icon-gengduo _rotate"></i> </span>
          <span class="_btn" v-else @click="tableShow1=true">展开 <i class="iconfont icon-gengduo"></i> </span>
        </div>
      </div>
      <div v-show="tableShow1" class="sanjiao-box _padding_20_15">
        <table border="1" class="czBillModule _border_color_b Receipt_table" bordercolor="#c94052" style="border-collapse:collapse;width: 100%;" v-loading='loading'>
          <tr>
            <th>单号</th>
            <th>公司</th>
            <th>费用类型</th>
            <th>币种</th>
            <th>汇率</th>
            <th>状态</th>
            <th>金额</th>

          </tr>
          <tr class="_color_b" v-for="(item,index) in czTableList" :key="index">
            <td class="hover_text" @click="goDetail(item.FrID)" ><span>{{item.FrID}}</span></td>
            <td>{{item.BranchName}}</td>
            <td>{{item.CostTypeName}}</td>
            <td>{{item.CurrencyName}}</td>
            <td>{{item.Rate}}</td>
            <td>{{item.StatusStr}}</td>
            <td>{{item.Money}}</td>

          </tr>
          <tr class="_color_b">
            <td colspan="6">合计</td>
            <td>{{cdtotal}}</td>
          </tr>
        </table>
      </div>
    </div>
    <div v-if="LeaderRefundDetailList && LeaderRefundDetailList.length>0 && LeaderState">
      <div class="_tit">
        <span class="_text">领队领款单据</span>
        <div>
          <span class="_btn" v-if="tableShow2" @click="tableShow2=false">收起 <i class="iconfont icon-gengduo _rotate"></i> </span>
          <span class="_btn" v-else @click="tableShow2=true">展开 <i class="iconfont icon-gengduo"></i> </span>
        </div>
      </div>
      <div v-show="tableShow2" class="sanjiao-box _padding_20_15">
        <table border="1" class="czBillModule _border_color_b Receipt_table" bordercolor="#c94052" style="border-collapse:collapse;width: 100%;" v-loading='loading'>
          <tr>
            <th>单号</th>
            <th>公司</th>
            <th>费用类型</th>
            <th>原币</th>
            <th>汇率</th>
            <th>本位币</th>
            <th>备注</th>
            <th>制单人</th>

          </tr>
          <tr class="_color_b" v-for="(item,index) in LeaderRefundDetailList" :key="index">
            <td class="hover_text" @click="goDetail(item.FinanceId)" ><span>{{item.FinanceId}}</span></td>
            <td>{{item.BName}}</td>
            <td>{{item.CostTypeName}}</td>
            <td>{{item.OriginalMoney}}</td>
            <td>{{item.Rate}}</td>
            <td>{{item.Money}}</td>
            <td>{{item.Remark}}</td>
            <td>{{item.EmName}}</td>

          </tr>
        </table>
      </div>
    </div>
    <div v-if="ReceiptModel && ReceiptModel.Id>0 && LeaderState">
      <div class="_tit">
        <span class="_text">财务收据</span>
        <div>
          <span class="_btn" v-if="tableShow2" @click="tableShow2=false">收起 <i class="iconfont icon-gengduo _rotate"></i> </span>
          <span class="_btn" v-else @click="tableShow2=true">展开 <i class="iconfont icon-gengduo"></i> </span>
        </div>
      </div>
      <div v-show="tableShow2" class="sanjiao-box _padding_20_15">
        <table border="1" class="czBillModule _border_color_b Receipt_table" bordercolor="#c94052" style="border-collapse:collapse;width: 100%;" v-loading='loading'>
          <tr>
            <th>ID</th>
            <th>团号</th>
            <th>账户</th>
            <th>原币</th>

          </tr>
          <tr class="_color_b">
            <td class="hover_text" @click="goDetailDoc(ReceiptModel.Id)" ><span>{{ReceiptModel.Id}}</span></td>
            <td><span>{{ReceiptModel.TCNUM}}（{{ReceiptModel.TCID}}）</span></td>
            <td>{{ReceiptModel.AccountName}}</td>
            <td>{{ReceiptModel.WBMoney}}</td>

          </tr>
        </table>
      </div>
    </div>
    <!-- 电商商品 -->
    <div v-if="OtherType==9 && ECommerceGoodsModel.Id>0 && LeaderState">
      <div class="_tit">
        <span class="_text">电商商品</span>
        <div>
          <span class="_btn" v-if="tableShow3" @click="tableShow3=false">收起 <i class="iconfont icon-gengduo _rotate"></i> </span>
          <span class="_btn" v-else @click="tableShow3=true">展开 <i class="iconfont icon-gengduo"></i> </span>
        </div>
      </div>
      <div v-show="tableShow3" class="sanjiao-box _padding_20_15">
        <table border="1" class="czBillModule _border_color_b Receipt_table" bordercolor="#c94052" style="border-collapse:collapse;width: 100%;" v-loading='loading'>
          <tr>
            <th width="35%">编号</th>
            <th>名称</th>

          </tr>
          <tr class="_color_b">
            <td class="hover_text" @click="goElectricityGoods(ECommerceGoodsModel.Id)" ><span>{{ECommerceGoodsModel.Id}}</span></td>
            <td @click="goElectricityGoods(ECommerceGoodsModel.Id)">
              <span>{{ECommerceGoodsModel.Name}}</span>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 电商商品 关联团团号信息 -->
    <div v-if="OtherType==9 && details.TCID>0 && LeaderState">
      <div class="_tit">
        <span class="_text">关联团号信息</span>
        <div>
          <span class="_btn" v-if="tableShow4" @click="tableShow4=false">收起 <i class="iconfont icon-gengduo _rotate"></i> </span>
          <span class="_btn" v-else @click="tableShow4=true">展开 <i class="iconfont icon-gengduo"></i> </span>
        </div>
      </div>
      <div v-show="tableShow4" class="sanjiao-box _padding_20_15">
        <table border="1" class="czBillModule _border_color_b Receipt_table" bordercolor="#c94052" style="border-collapse:collapse;width: 100%;" v-loading='loading'>
          <tr>
            <th width='35%'>团ID</th>
            <th>团号</th>

          </tr>
          <tr class="_color_b">
            <td class="hover_text" @click="goTravelControlList(details.TCID)" ><span>{{details.TCID}}</span></td>
            <td @click="goTravelControlList(details.TCID)">
              <span>{{details.TCNUM}}</span>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:["FrID"],
    data(){
      return{
        tableShow: true,
        tableShow1: true,
        tableShow2: true,
        tableShow3: true,
        tableShow4: true,
        tit: '',
        details:{},
        loading: true,
        czList:[],
        czTableList:[],
        GetDetail:{},
        OtherType:0,
        ReFinanceId:0,
        IsAdvanceFinance:-1,
        cdtotal:0,
        LeaderRefundDetailList:[],
        LeaderState:false,
        ECommerceGoodsModel:{},
        ReceiptModel:{},
      }
    },watch:{
        FrID:{
          handler(val){
            this.getDataDes();
          },
          immediate: true
        }

    },created(){



    },mounted(){


    },
    methods:{

      getDataDes(){
        this.apipost('Financial_post_GetDetail', {ID:this.FrID,Type:1}, res => {
          this.loading = false
          if (res.data.resultCode == 1) {
            let data=res.data.data;
            this.LeaderRefundDetailList=data.LeaderRefundDetailList;
            this.ReceiptModel=data.ReceiptModel;
            this.LeaderState=true;
            this.OtherType=data.OtherType;
            this.ReFinanceId=data.ReFinanceId;
            this.IsAdvanceFinance=data.IsAdvanceFinance;
            this.ECommerceGoodsModel=data.ECommerceGoodsModel;
            this.details=data;
            if(this.OtherType==7){
              this.getDetails()
            }else{
              this.getczTableList();
            }
          }
        }, err => {})

      },
      goTravelControlList(id){
        this.$router.push({ name: 'TravelControlList',query:{"TCID":id,blank:'y',tab:'团控列表'} })
      },
      goDetailDoc(id){
        this.$router.push({ name: 'DocumentStatistics',query:{"id":id,blank:'y',tab:'单据详情'} })
      },
      goDetail(id){
        this.OpenNewUrl("/financial/financalDocument/FinancialDocumentsDetail", {
          id: id,
          tab:'单据详情'
        });
      },
      goElectricityGoods(id){
        this.$router.push({ name: 'ElectricityGoods',query:{"Id":id,unEdit:true,blank:'y'} })
      },
      getczTableList(){
        this.loading = true
        let msg={
          pageIndex:1,
          pageSize:100,
          ReFinanceId:this.FrID
        };
        this.cdtotal=0;
        this.apipost('Financial_get_GetAdvanceMatchFinancePageList', msg, res => {
          this.loading = false
          if (res.data.resultCode == 1) {
            let data=res.data.data.pageData;
            this.czTableList=data;
            data.forEach(item => {
              this.cdtotal+=item.Money;
            });
            this.cdtotal=this.cdtotal.toFixed(2);

          }
          else{
            this.Error(res.data.message)
          }
        }, err => {})
      },
      getDetails(){
        this.loading = true;
        let msg={
          pageIndex:1,
          pageSize:20,
          FrID:this.ReFinanceId,
          CostTypeID:'',
          sTradeDate:'',
          eTradeDate:'',
        };
        this.apipost('Financial_get_GetAdvanceFinancePageList', msg, res=>{
          if(res.data.resultCode == 1) {
            this.loading = false
            let data= res.data.data.pageData;
            this.czList = data;
          }
        }, null)
      }
    }
  }
</script>
