<style>
	.saleOrderSettlement{}
	.saleOrderSettlement .meta{margin:20px 0; width:86px; height:34px;line-height: 34px; text-align: center; font-size: 14px; font-weight: bold; color: #333; background:#F2F2F2; border:1px solid #D2D2D2;border-radius:4px;}
	.saleOrderSettlementTable{width: 100%; font-size:14px; color: #333;}
	.saleOrderSettlementTable tr th{background: #E6E6E6;height:30px; font-size: 12px; text-align: left; text-indent: 25px;}
	.saleOrderSettlementTable tr{background: #fff;text-align: left;}
	.saleOrderSettlementTable tr td{height: 80px; padding-left:25px; border-bottom:1px solid #eee; font-size: 14px; color: #333;}
	.saleOrderSettlementTable tr.h40 td{height: 40px!important;}
    .saleOrderSettlementTableIcon button{width: 28px; height:28px;border-radius:4px;}
	.saleOrderSettlementTableIcon .el-button--primary {padding: 5px;margin: 0;font-size: 14px!important;}
	.saleOrderSettlementPerson{height: 24px;width: 24px;border-radius: 50%; vertical-align: middle; margin-right: 5px;}
	.saleOrderMeta{height: 54px; background: #E5E5E5; line-height: 24px; padding: 5px; box-sizing: border-box; border-radius: 4px; width: 170px; font-size: 12px;}
	.saleOrderMeta .typeOne{padding:2px 4px; background: #000; color: #fff; margin: 2px; border-radius: 4px;}
	.saleOrderMeta .typeTwo{padding:2px 4px; background: #2AAEF2; color: #fff; margin: 2px; border-radius: 4px;}
	.saleOrderSettlementTable .icon-daiqueren{color: #4BCA81}
	.saleOrderSettlementTable .icon-yiqueren{color: #4BCA81}
	.saleOrderSettlementTable .icon-yiquxiao{color: #959595}
	.saleOrderSettlementTable .icon-shenhebohui{color: #E95252}
	.saleOrderSettlementTable .icon-icon-zancun{color: #FF9C01}
</style>
<template>
    <div class="saleOrderSettlement">
    	<div style="margin: 20px 0; overflow: hidden;">
	    	<div class="fl meta mg0">
	    		{{$t('hotel.hotel_cost')}}
	    	</div>
	    	<input v-if="TrafficToll>0||seeDes" type="button"
			class="normalBtn fr" :value="$t('objFill.v101.Rest.xinzchefcb')" @click="goUrl()"/>
    	</div>
	    <table class="saleOrderSettlementTable"  border="0" cellspacing="0" cellpadding="0">
				<tr>
					<th width="5%">{{$t('fnc.danhao')}}</th>
					<th width="8%">{{$t('fnc.djleixing')}}</th>
					<th width="15%">{{$t('tips.jiaoyifangshi')}}</th>
					<th width="12%">{{$t('fnc.jine')}}</th>
					<th width="8%">{{$t('fnc.fkduixiang')}}</th>
					<th width="15%">{{$t('pub.pubRemark')}}</th>
					<th width="5%">{{$t('fnc.zdrenyuan')}}</th>
					<th width="5%">{{$t('fnc.dqzhuangtai')}}</th>
					<th width="5%">{{$t('hotel.table_operat')}}</th>
				</tr>
				<tr class='h40'>
					<td colspan="9" align="center" class="fz14" v-show="payList.length==0">
						{{$t('system.content_noData')}}
					</td>
				</tr>
				<tr v-for="item in payList">
					<td class="fz14 fbold">{{item.FrID}}</td>
					<td class="fz12">
						<span v-for="o in item.CostTypeList">
							{{o}}
						</span>
					</td>
					<td>
						<div class="saleOrderMeta" v-for="x in item.TradeWayList">
							<p>
								<span class="fbold">{{x.Alias}}</span>
								<span class="typeOne">{{x.TypeName}}</span>
								<span class="typeTwo">{{$t('fnc.w_gsdsi')}}</span>
							</p>
							<p>{{x.BankNo}}</p>
						</div>
					</td>
					<td>
						<span class="fbold">{{moneyFormat(item.PayMoney)}}</span>
					</td>
					<td>
						<p class="fz12 fbold">{{item.RemitterName}}</p>
						<p class="fz12">{{$t('objFill.v101.Rest.dijiegys')}}</p>
					</td>
					<td>{{item.Description}}</td>
					<td>
						 <img class="saleOrderSettlementPerson"  v-if='!item.EmPhoto' src="../../assets/img/litheader.png"/>
				         <img class="saleOrderSettlementPerson"  v-if='item.EmPhoto' :onerror="defaultImg" :src='item.EmPhoto'/>
		                 <span style="line-height: 80px;">{{item.EmName}}</span>
					</td>
					<td>
                        <i v-if="item.Status==1" class="iconfont icon-daiqueren"></i>
                        <i v-if="item.Status==4" class="iconfont icon-yiquxiao"></i>
                        <i v-if="item.Status==2" class="iconfont icon-yiqueren"></i>
                        <i  v-if="item.Status==3" class="iconfont icon-shenhebohui"></i>
                        <i  v-if="item.Status==0" class="iconfont icon-zancun"></i>
                        {{item.StatusStr}}
					</td>
					<td class="saleOrderSettlementTableIcon">
				  		<el-tooltip  class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
			              <el-button  @click='goUrlUpdatePay(item,2)' v-if='item.InOrNotProcess==0' type="primary" style='background:#409EFF; border-color:#409EFF' icon="iconfont icon-img_bianji_small"></el-button>
			            </el-tooltip>
			            <el-tooltip  effect="dark" :content="$t('fnc.chakan')" placement="top-start">
			              <el-button @click='goUrlSee(item)' type="primary" style='background:#47BF8C; border-color:#47BF8C' icon="iconfont icon-img_cz"></el-button>
			            </el-tooltip>
			            <el-tooltip  effect="dark" :content="$t('system.table_delete')" placement="top-start">
			              <el-button v-if='item.InOrNotProcess==0'  @click='deleteItem(item)'   type="primary" style='background:#E95252; border-color:#E95252' icon="iconfont icon-bumenguanli-shanchu"></el-button>
			            </el-tooltip>
					</td>
				</tr>
		</table>
		<p style="padding: 15px 0;"><span class="fr fz14 fbold color333">{{$t('objFill.v101.Rest.zongjifuk')}}：¥{{moneyFormat(payTotal)}}</span></p>
         <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            layout="total,prev, pager, next, jumper"
            :page-size="this.PayMsg.pageSize"
            :total="total">
        </el-pagination>
		<div class="meta">
    		{{$t('restaurant.res_income')}}
    	</div>
	    <table class="saleOrderSettlementTable"  border="0" cellspacing="0" cellpadding="0">
				<tr>
					<th width="5%">{{$t('fnc.danhao')}}</th>
					<th width="8%">{{$t('fnc.djleixing')}}</th>
					<th width="15%">{{$t('tips.jiaoyifangshi')}}</th>
					<th width="12%">{{$t('fnc.jine')}}</th>
					<th width="8%">{{$t('fnc.skduixiang')}}</th>
					<th width="15%">{{$t('pub.pubRemark')}}</th>
					<th width="5%">{{$t('fnc.zdrenyuan')}}</th>
					<th width="5%">{{$t('fnc.dqzhuangtai')}}</th>
					<th width="5%">{{$t('hotel.table_operat')}}</th>
				</tr>
				<tr v-for="item in collectList">
					<td class="fz14 fbold">{{item.FrID}}</td>
					<td class="fz12">
						<span v-for="o in item.CostTypeList">
							{{o}}
						</span>
					</td>
					<td>
						<div class="saleOrderMeta" v-for="x in item.TradeWayList">
							<p>
								<span class="fbold">{{x.Alias}}</span>
								<span class="typeOne">{{x.TypeName}}</span>
								<span class="typeTwo">{{$t('fnc.w_gsdsi')}}</span>
							</p>
							<p>{{x.BankNo}}</p>
						</div>
					</td>
					<td>
						<span class="fbold">{{moneyFormat(item.PayMoney)}}</span>
					</td>
					<td>
						<p class="fz12 fbold">{{item.RemitterName}}</p>
						<p class="fz12">{{$t('objFill.v101.Rest.dijiegys')}}</p>
					</td>
					<td>{{item.Description}}</td>
					<td>
						 <img class="saleOrderSettlementPerson"  v-if='!item.EmPhoto' src="../../assets/img/litheader.png"/>
				         <img class="saleOrderSettlementPerson"  v-if='item.EmPhoto' :onerror="defaultImg" :src='item.EmPhoto'/>
		                 <span style="line-height: 80px;">{{item.EmName}}</span>
					</td>
					<td>
                        <i v-if="item.Status==1" class="iconfont icon-daiqueren"></i>
                        <i v-if="item.Status==4" class="iconfont icon-yiquxiao"></i>
                        <i v-if="item.Status==2" class="iconfont icon-yiqueren"></i>
                        <i  v-if="item.Status==3" class="iconfont icon-shenhebohui"></i>
                        <i  v-if="item.Status==0" class="iconfont icon-zancun"></i>
                        {{item.StatusStr}}
					</td>
					<td class="saleOrderSettlementTableIcon">
				  		<el-tooltip  class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
			              <el-button @click='goUrlUpdate(item,1)' v-if='item.InOrNotProcess==0' type="primary" style='background:#409EFF; border-color:#409EFF' icon="iconfont icon-img_bianji_small"></el-button>
			            </el-tooltip>
			            <el-tooltip  effect="dark" :content="$t('fnc.chakan')" placement="top-start">
			              <el-button @click='goUrlSee(item)' type="primary" style='background:#47BF8C; border-color:#47BF8C' icon="iconfont icon-img_cz"></el-button>
			            </el-tooltip>
			            <el-tooltip  effect="dark" :content="$t('system.table_delete')" placement="top-start">
			              <el-button @click='deleteItem(item)' v-if='item.InOrNotProcess==0' type="primary" style='background:#E95252; border-color:#E95252' icon="iconfont icon-bumenguanli-shanchu"></el-button>
			            </el-tooltip>
					</td>
				</tr>
				<tr class='h40'>
					<td colspan="9" align="center" class="fz14" v-show="collectList.length==0">
						{{$t('system.content_noData')}}
					</td>
				</tr>
		</table>
		<p style="padding: 15px 0;"><span class="fr fz14 fbold color333">{{$t('objFill.v101.Rest.zongjishouk')}}：¥{{moneyFormat(collectTotal)}}</span></p>
         <el-pagination
            background
            @current-change="handleCurrentChange1"
            :current-page.sync="currentPage"
            layout="total,prev, pager, next, jumper"
            :page-size="this.CollectMsg.pageSize"
            :total="total1">
        </el-pagination>
    	<!--
		<div style="margin: 20px 0; overflow: hidden;">
	    	<div class="fl meta mg0">
	    		提成核算
	    	</div>
	    	<input v-if="seeDes" type="button" class="normalBtn fr" value="全部发放" @click="grantTicheng()"/>
    	</div>
	    <table class="saleOrderSettlementTable"  border="0" cellspacing="0" cellpadding="0">
				<tr>
					<th width="25%">{{$t('visa.v_yewuyuan')}}</th>
					<th width="25%">{{$t('admin.admin_personNumber')}}</th>
					<th width="25%">{{$t('fnc.jine')}}</th>
					<th width="25%">是否发放(确定后无法修改)</th>
				</tr>
				<tr class="h40"  v-for="item in tichengList">
					<td>{{item.CreateBy}}</td>
					<td>{{item.PeopleNum}}</td>
					<td>￥{{moneyFormat(item.CommissionMoney)}}</td>
					<td><input type="checkbox" :value="item.Id" v-model="OrderIds" :disabled="isDisabled"></td>
				</tr>
				<tr class="h40" v-show="tichengList.length==0">
					<td colspan="10" align="center">
						暂无提成发放
					</td>
				</tr>
		</table>  -->
    </div>
</template>

<script>
	export default {
	    data(){
	        return{
				TrafficToll: 0,//交通费用
				isDisabled: true,
	        	OrderIds:[],
	            total: 0,
	            currentPage: 1,
	            total1: 0,
	            currentPage1: 1,
	        	defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
	        	PayMsg:{
	        		pageIndex:1,
	        		pageSize:10,
	        		OrderID:0,
	        		OrderSource:10,
	        		TCID:0,
	        		Type:2
	        	},
	        	CollectMsg:{
	        		pageIndex:1,
	        		pageSize:10,
	        		OrderID:0,
	        		OrderSource:10,
	        		TCID:0,
	        		Type:1
	        	},
	        	payTotal:0,
	            collectTotal:0,
	        	payList:[],
	        	collectList:[],
				tichengList:[],
				seeDes:false,
	        }
	      },
	      methods:{
			//   请求签证产品详情
			GetVisaProductDetails(){
				this.apipost(
					"dmc_get_visa_GetVisaProductInfo_V1",
					{Pid:this.PayMsg.TCID},
					res => {
					if (res.data.resultCode == 1) {
						let data=res.data.data;
						this.TrafficToll = res.data.data.TrafficToll
					} else {
						this.Error(res.data.message);
					}
					},
					err => {}
				);
			},

	      	goUrlUpdatePay(obj,type){  //付款单
	      		this.$router.push(
	                {
	                name: 'addFinancialDocuments',
	                query:{
	                    'type':type,
	                    'FrID':obj.FrID,
	                    'edit':true,
	                    }
	                }
	            );
	      	},
	      	goUrlUpdate(obj,type){  //收款单
	      		this.$router.push(
	                {
	                name: 'addReceivablesDocuments',
	                query:{
	                    'type':type,
	                    'FrID':obj.FrID,
	                    'edit':true,
	                    }
	                }
	            );
	      	},
	      	goUrlSee(obj){  //收款单查看
	      		this.$router.push(
	                {
	                name: 'FinancialDocumentsDetail',
	                query:{
	                    'id':obj.FrID,
	                    }
	                }
	            );
	      	},
	      	goUrl(){
				let orderObj = {
					OrderID:0,
					OrderSource:10,
					Obj: {},
					SourceID:this.$route.query.id
				}
	      		this.$router.push(
	                {
	                name: 'ChoiceAddFinancialDocuments',
	                query:{
						'path':'SaleOrderModule',
						'companyID':this.$route.query.branchId,
						'blank':'y',
						'orderObj':JSON.stringify(orderObj)
	                    }
	                }
				);
	      	},
	      	deleteItem(obj){  //作废收款单
				this.$confirm('是否作废该单据?', this.$t('tips.tips'), {
					confirmButtonText: this.$t('pub.sureBtn'),
					cancelButtonText: this.$t('pub.cancelBtn'),
					type: 'warning'
				}).then(() => {
					this.apipost('Financial_post_Cancel',{ID:obj.FrID},res=>{
						if(res.data.resultCode==1){
							this.$message.success(this.$t('sm.quxiaocg'));
							this.getPayList()
							this.getCollectList()
						}
					},err=>{})
				}).catch(() => {
					this.$message.info(`${this.$t('OrderList.orderStatus.cancel')}！`);
				});
	      	},
	      	grantTicheng(){
	      		let orderIdStrings=this.OrderIds.join(',')
	      		this.apipost('dmc_get_visa_GetUpdateCommission',{OrderIds:orderIdStrings},res=>{
	      			if(res.data.resultCode==1){
						this.$message.success(res.data.message)
						this.getTicheng()
					}else{

					}
	      		},err=>{})
	      	},
	      	getTicheng(){
	      		this.apipost('dmc_get_visa_GetCommissionOrder',{visaId:this.$route.query.id},res=>{
	      			if(res.data.resultCode==1){
						this.tichengList=res.data.data
					}else{}
	      		},err=>{})
	      	},
	      	getPayList(){
	      		this.apipost('Financial_post_GetFinanceInfoPageList',this.PayMsg,res=>{
	      			if(res.data.resultCode==1){
						this.payList=res.data.data.list
						this.payTotal=res.data.data.TotalMoney
						this.total=res.data.data.count
					}else{}
	      		},err=>{})
	      	},
	      	getCollectList(){
	      		this.apipost('Financial_post_GetFinanceInfoPageList',this.CollectMsg,res=>{
	      			if(res.data.resultCode==1){
						this.collectList=res.data.data.list
						this.collectTotal=res.data.data.TotalMoney
						this.total1=res.data.data.count
					}else{}
	      		},err=>{})
	      	},
	        handleCurrentChange(val) {
	            this.msg.pageIndex = val;
	            this.getPayList();
	        },
	        handleCurrentChange1(val) {
	            this.msg.pageIndex = val;
	            this.getCollectList();
	        },

	      },
	      mounted(){
				this.PayMsg.TCID=this.CollectMsg.TCID=Number(this.$route.query.id)
				if(this.$route.query.seeDes){
					this.seeDes=false;
				}
				this.getPayList()
				this.getTicheng()
				this.getCollectList()
				this.GetVisaProductDetails()
	      }
   }
</script>