<template>
<div class="flexOne">
	<div class="workTotalSearch">
		<ul>
			<li><span><em>{{$t('pub.date')}}</em><el-date-picker :picker-options="pickerOptions" v-model='msg.sDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
									-
	                            <el-date-picker :picker-options="pickerOptions" v-model='msg.eDate'  class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
	            </span>
			</li>
			<li>
				<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList();resetPageIndex()" />
			</li>
		</ul>
	</div>
	<div style="clear: both; width: 100%;height: 20px;"></div>
		<table class="saleReceivablesTotalTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
			<tr>
				<th width="10%">{{$t('fnc.danhao')}}</th>
				<th width="10%">{{$t('fnc.djleixing')}}</th>
				<th width="10%">{{$t('hotel.hotel_corrlelatition')}}</th>
				<th width="10%">{{$t('fnc.feiyongleixing')}}</th>
				<th width="20%">{{$t('tips.jiaoyifangshi')}}</th>
				<th width="10%">{{$t('fnc.jine')}}</th>
				<th width="10%">{{$t('fnc.skduixiang')}}</th>
				<th width="10%">{{$t('fnc.zdrenyuan')}}</th>
				<th width="10%">{{$t('fnc.dqzhuangtai')}}</th>
			</tr>
			<tr>
				<td v-show="list.length==0" colspan="9" align="center">{{$t('system.content_noData')}}</td>
			</tr>
			<tr v-for="item in list">
				<td>
					{{item.FrID}}
				</td>
				<td><span style="color: #45BE8C;">{{item.TypeName}}</span></td>
				<td class="fz12">
					 <p>{{$t('visa.v_tuanhao')}}：<span>{{item.TCID==0 || item.TCID==null?$t('fnc.no'):item.TCID}}</span></p>
                     <p>{{$t('fnc.danhao')}}：</span>{{item.OrderID==0 || item.OrderID==null?$t('fnc.no'):item.OrderID}}</span></p>
				</td>
				<td>
					 <template v-for="(s,si) in item.CostTypeList">
                        <span  class="tagSpan">{{s}}</span></br>
                    </template>
				</td>
				<td class="fz12">
					<template v-if="item.TradeWayList&&item.TradeWayList.length>0">
                        <div class="_TradeWayList"   v-for="(tw,twIn) in item.TradeWayList">
                            <p class="_fex_cen clearfix mt5">
                            	<span class="_bold">{{tw.Alias}}</span>
                            	<span class="_bank_name">{{item.TradeWayList[0].TypeName}}</span>
                            	<span class="_bank_type" :class="tw.AccountType=='私'?'':'_bank_type2'">{{tw.AccountType==""?$t('fnc.no'):tw.AccountType}}</span>
                            </p>
                            <p>{{tw.BankNo}}</p>
                        </div>
                    </template>
                    <template v-else>
                        <div class="_pad5">
                            	{{$t('fnc.no')}}
                        </div>
                    </template>
				</td>
				<td class="fz12">
					  <p>{{item.Type==1?$t('fnc.yingshou'):$t('fnc.yingfu')}}：<span class="">{{item.Money}}</span></p>
                      <p>{{item.Type==1?$t('fnc.shishou'):$t('fnc.shifu')}}：<span class="">{{item.PayMoney}}</span></p>
				</td>
				<td>
					<p>{{$t('fnc.huikuanren')}}：{{item.RemitterName}}</p>
				</td>
				<td class="fz12">
					<p>{{item.EmName}}</p>
					<p>{{item.CreateDate}}</p>
				</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>
			</tr>
		</table>
		<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total></el-pagination>
</div>
</template>

<script>
	export default {
		data() {
			return {
				pickerOptions: {
					disabledDate: (time) => { //disabledDate true 为禁止选择
						return time.getTime()>Date.now()
					}
				},
				defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
				currentPage:1,
				total:0,
				loading:false,
				msg:{
					CreateBy:'-1',
					sDate:'',
					eDate:'',
					Type:1,
					pageIndex:1,
					pageSize:10,
				},
				list: [],
			}
		},
		methods: {
			getList() {
				this.loading = true
				this.apipost('Financial_post_GetFinanceInfoByCreateByPageList', this.msg, res => {
					if(res.data.resultCode == 1) {
						this.loading = false
						this.total = res.data.data.count
						this.list = res.data.data.pageData.list
					} else {
						this.loading = false
						this.$message.error(res.data.message)
					}
				}, err => {})
			},
			handleCurrentChange(val) {
				this.msg.pageIndex = val;
				this.getList()
			},
			resetPageIndex() {
				this.msg.pageIndex = 1;
				this.currentPage = 1
			},
		},
		mounted(){
			this.msg.CreateBy=this.$route.query.id
			this.msg.sDate=this.$route.query.starTime
			this.msg.eDate=this.$route.query.endTime
			this.getList()
		},
	}
</script>

<style>
	.workTotalSearch ._bank_type{background-color: #2AAEF2}
    ._bank_type2{background-color: #FF9C01}
  .workTotalSearch ._bank_name,.workTotalSearch ._bank_type{display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;}
  ._fex_cen{display: flex;align-items: center}
  .workTotalSearch{width: 100%; min-height: auto; padding:0 0 20px 0;}
  .workTotalSearch li{float: left; font-size: 12px; color: #666; margin:20px 10px 0px 0;}
  .workTotalSearch li>span {display: inline-block; }
  .workTotalSearch li span>em{display: inline-block; min-width: 60px; text-align: right; font-style: normal; margin:0 12px 0 0;}
  .workTotalSearch li:last-child{float: right; position: absolute; top: -15px; right: 20px; z-index: 50;}
  .saleReceivablesTotalTable{width: 100%;  font-size:14px; color: #333; background: #ccc;}
  .saleReceivablesTotalTable tr{border-bottom: 2px solid #333;}
  .saleReceivablesTotalTable tr th{background: #BDBDBD;height:30px; font-size: 12px; text-align: left; text-indent: 30px;}
  .saleReceivablesTotalTable tr{background: #fff;text-align: left;}
  .saleReceivablesTotalTable tr:nth-child(2n+1){background: #E5E5E5;}
  .saleReceivablesTotalTable tr td{height: 40px; padding-left:30px; border-right: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC;}
  .saleReceivablesTotalTable tr td p{line-height: 20px;}
  .saleReceivablesTotalTable tr td>img{width: 32px; height: 32px;border-radius: 16px; vertical-align: middle; margin-right: 15px;}
  .saleReceivablesTotalTable tr td .tagSpan{background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #409eff;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;}
</style>
