<style>
 @import url('../../../assets/css/domestic/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;
  }
  .cd_btn {
    cursor: pointer;
    color: #2AAEF2;
  }
  .cd_btn:hover {
    color: aqua;
  }
</style>
<template>
   <div class="m_TicketingModule">
        <div  v-if="OtherType==7||OtherType==65||details.MatchFrId>0">
            <div class="_tit">
                <span class="_text">预付款单据</span>
                <div>
                    <span class="_btn" v-if="tableShow" @click="tableShow=false">{{$t('fnc.shouqi')}} <i class="iconfont icon-gengduo _rotate"></i> </span>
                    <span class="_btn" v-else @click="tableShow=true">{{$t('fnc.zhankai')}} <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>{{$t('fnc.danhao')}}</th>
                        <th>公司</th>
                        <th>{{$t('fnc.feiyongleixing')}}</th>
                        <th>币种</th>
                        <th>汇率</th>
                        <th>{{$t('fnc.jine')}}</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="OtherType==81">
            <div class="_tit">
                <span class="_text">预付款余额转移明细</span>
                <div>
                    <span class="_btn" v-if="tableShow" @click="tableShow=false">{{$t('fnc.shouqi')}} <i class="iconfont icon-gengduo _rotate"></i> </span>
                    <span class="_btn" v-else @click="tableShow=true">{{$t('fnc.zhankai')}} <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>
                        <th>转移状态</th>
                        <th>余额</th>
                    </tr>
                    <tr class="_color_b" v-for="(item,index) in matchTransferList" :key="index">
                        <td>{{item.BranchName}}</td>
                        <th>{{item.Type}}</th>
                        <td class="hover_text" @click="goDetail(item.MatchFrId)" ><span>{{item.MatchFrId}}</span></td>
                        <td>{{item.MatchFrMoney}}</td>
                        <td>{{item.CurrencyName}}</td>
                        <td class="hover_text" @click="goDetail(item.FinanceId)" ><span>{{item.FinanceId}}</span></td>
                        <td>{{item.FMoney}}</td>
                        <td>{{item.Status}}</td>
                        <td>{{item.YEMoney}}</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">
                <div v-if="IsFinancePermission" style="margin-bottom: 5px;">
                    <span class="cd_btn" @click="sureAccount()">对账确认 &nbsp;&nbsp;</span>
                    <span style="color: red;">
                      *
                    </span>
                    <el-date-picker format="yyyy-MM" value-format="yyyy-MM"
                    clearable class="w190 _border_b_1" v-model="Area_Name" type="month"
                      placeholder="请选择账期" align="right">
                    </el-date-picker>
                    <!-- <span class="cd_btn" @click="advanceToExcel()">导出Excel</span> -->
                </div>
                <table border="1" class="czBillModule _border_color_b Receipt_table" bordercolor="#c94052" style="border-collapse:collapse;width: 100%;" v-loading='loading'>
                    <tr>
                        <th>{{$t('fnc.danhao')}}</th>
                        <th>公司</th>
                        <th>{{$t('fnc.feiyongleixing')}}</th>
                        <th>币种</th>
                        <th>原币金额</th>
                        <th>汇率</th>
                        <th>{{$t('hotel.hotel_status')}}</th>
                        <th>{{$t('fnc.jine')}}</th>
                        <th>账期</th>
                    </tr>
                    <tr class="_color_b" v-for="(item,index) in czTableList" :key="index">
                        <td class="hover_text">
                            <el-checkbox v-if="item.ClientTypeCateId !=1 && IsFinancePermission" v-model="item.checked" style="margin-right:2px ;"></el-checkbox>
                            <span @click="goDetail(item.FrID)" >{{item.FrID}}</span>
                        </td>
                        <td>{{item.BranchName}}</td>
                        <td>{{item.CostTypeName}}</td>
                        <td>{{item.CurrencyName}}</td>
                        <td>{{item.WBMoney}}</td>
                        <td>{{item.Rate}}</td>
                        <td>
                            <span v-if="item.ClientTypeCateId ==1 && IsFinancePermission" style="color:#FF9600">已对账</span>
                            <span v-else>{{item.StatusStr}}</span>
                        </td>
                        <td>
                            {{item.Money}}
                            <span v-if="item.OtherType&&item.OtherType==65"
                            style="font-size: 12px;margin-left: 3px;color: #FF9600;">(退)</span>
                        </td>
                        <td>{{item.Area_Name?item.Area_Name:'-'}}</td>
                    </tr>
                    <tr class="_color_b">
                        <td colspan="4">原币合计</td>
                        <td>{{ybtotal}}</td>
                        <td colspan="2">{{$t('fnc.a_heji')}}</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>{{$t('fnc.danhao')}}</th>
                        <th>公司</th>
                        <th>{{$t('fnc.feiyongleixing')}}</th>
                        <th>原币</th>
                        <th>汇率</th>
                        <th>{{$t('fnc.bweibi')}}</th>
                        <th>{{$t('pub.pubRemark')}}</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%">{{$t('hotel.hotel_SerialNumber')}}</th>
                        <th>{{$t('hotel.hotel_nameOf')}}</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 v-if="OtherType==82">
            <div class="_tit">
                <span class="_text">车辆信息</span>
                <div>
                    <span class="_btn" v-if="tableShow" @click="tableShow=false">{{$t('fnc.shouqi')}} <i class="iconfont icon-gengduo _rotate"></i> </span>
                    <span class="_btn" v-else @click="tableShow=true">{{$t('fnc.zhankai')}} <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>
                    </tr>
                    <tr class="_color_b">
                        <td>{{JapanCarModel.CarName}}</td>
                        <th>{{JapanCarModel.CarNo}}</th>
                        <th>{{JapanCarModel.CarSeatNum}}</th>
                        <th>{{JapanCarModel.SupplierName}}</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

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



    },mounted(){
        // 查询财务权限
        let userInfo = this.getLocalStorage();
        if (userInfo.ActionMenuCode.indexOf('F_AccountantFinanceMerge') != -1) {
            this.IsFinancePermission = true;
        }
    },
    methods:{
        sureAccount(){
            // 确认单据对账
            if(this.Area_Name==''){
                this.$message.error("请选择账期！")
                return
            }
            let flag = false;
            let financeIds ='';
            this.czTableList.forEach(x => {
                if (x.checked) {
                    flag=true
                    financeIds += x.FrID + ','
                }
            })
            if (!flag) {
                this.$message.error("请选择财务单据！")
                return
            }
            this.apipost("Financial_post_SetAdvanceMatchChecked", {FinanceIds: financeIds,Area_Name: this.Area_Name}, res => {
                if (res.data.resultCode == 1) {
                    this.$message.success(res.data.message);
                    this.getczTableList();
                }
            });
        },
        advanceToExcel(){
            let userInfo = this.getLocalStorage();
            let msg={
                pageIndex:1,
                pageSize:1000,
                ReFinanceId:this.FrID,
                EmployeeId:userInfo.EmployeeId
            };
            this.GetLocalFile("Financial_get_DownLoadAdvanceMatchFinance", msg,this.FrID + "预付款冲抵导出.xls");
        },
        getDataDes(){
            this.LeaderRefundDetailList=this.GetDetail.LeaderRefundDetailList;
            this.ReceiptModel=this.GetDetail.ReceiptModel;
            this.LeaderState=true;
            this.OtherType=this.GetDetail.OtherType;
            this.ReFinanceId=this.GetDetail.ReFinanceId;
            this.IsAdvanceFinance=this.GetDetail.IsAdvanceFinance;
            this.ECommerceGoodsModel=this.GetDetail.ECommerceGoodsModel;
            this.details=this.GetDetail;

            if(this.OtherType==7||this.details.MatchFrId>0){
                this.getDetails()
                if(this.OtherType==81){
                    this.getMatchTransferList()
                }
            }else if(this.OtherType==65){
                this.getyfTableList()
            }else if(this.IsAdvanceFinance ==1){
                this.getczTableList();
            }else if(this.OtherType ==82){
                this.getJapanCarDetails();
            }
      },
      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.$router.push({ name: 'FinancialDocumentsDetail',query:{"id":id,blank:'y',tab:'单据详情'} })
      },
      goElectricityGoods(id){
        this.$router.push({ name: 'ElectricityGoods',query:{"Id":id,unEdit:true,blank:'y'} })
      },
      getczTableList(){
        this.loading = true
        let msg={
          pageIndex:1,
          pageSize:1000,
          ReFinanceId:this.FrID
        };
        this.cdtotal=0; this.ybtotal =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 => {
                    if(item.OtherType&&item.OtherType==65){
                        this.cdtotal+=-(item.Money);
                        this.ybtotal+=-(item.WBMoney)
                    }else{
                        this.cdtotal+=item.Money;
                        this.ybtotal+=(item.WBMoney)
                    }

                });
                this.cdtotal=this.cdtotal.toFixed(2);
                this.ybtotal=this.ybtotal.toFixed(2);
            }
            else{
                this.Error(res.data.message)
            }
        }, err => {})
      },
    //   OtherType=65详情 预付款退款详情
      getMatchTransferList(){
        this.loading = true
        let msg={
          FinanceId:this.FrID
        };
        this.apipost('Financial_post_GetMatchTransferList', msg, res => {
            this.loading = false
            if (res.data.resultCode == 1) {
                let data=res.data.data;
                this.matchTransferList=data;
            }
            else{
                this.Error(res.data.message)
            }
        }, err => {})
      },
    //   OtherType=7详情
      getDetails(){
        this.loading = true;
        let msg={
            pageIndex:1,
            pageSize:20,
            FrID:this.details.MatchFrId>0?this.details.MatchFrId:this.ReFinanceId,//MatchFrId单项成本冲抵单号
            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)
      },
      //获取车行车辆信息
      getJapanCarDetails(){
        this.loading = true;
        let msg={
            Id:this.ReFinanceId
        };

        this.apipost('JapanCar_get_GetCar', msg, res=>{
            this.loading = false
          if(res.data.resultCode == 1) {
            let data= res.data.data;
            this.JapanCarModel = data;
          }
        }, null)
      }
    }
}
</script>
