<!-- 费用报销 -->
<template>

		<view v-if="ExpenseBill">
			
			<h3>{{ExpenseBill.PROINST_NAME}}</h3>
			<view class="detail-top-base">
				<view class="span24"><text class="text-title">申请人：</text><text >{{ExpenseBill.STAFF_NAME}}</text></view>
				<text>{{$util.cutDate(ExpenseBill.HIGHWAYPROINST_CREATEDATE)}}</text>
			</view>
			<view class="detail-top-box">
		
				<!-- <view class="line-block between-circle"></view> -->
				<view class="detail-top-bottom ">
					<view class="uni-flex span24" style="align-items: center;">
						<view class="detail-title">
							<i class="ico ico-ndbz"></i><text class="text-title">报销金额： </text>
							
						</view>
						<text style="color:#ec8538;">￥{{$util.fmoney(ExpenseBill.PAYMENT_LOWER,2)}}</text>
					</view>
					<view class="uni-flex span24 mt8" style="align-items: center;">
						<view class="detail-title">
						<i class="ico ico-bm"></i><text class="text-title">报销部门：</text> 
							
						</view>
						<text>{{ExpenseBill.DEPARTMENT_NAME}}</text>
					</view>
				</view>
	
				<ul class="detail-middle-box">
					
					<li class="attachment" v-if="ExpenseBill.ImgList && ExpenseBill.ImgList.length>0">
						<div class="detail-title">
							<i class="ico ico-tp"></i>
							<text class="text-title">票据</text>
						</div>
						<div class="imgBox">
							<image v-for="(arr,i) in ExpenseBill.ImgList" :key="i" :src="arr.IMAGE_URL" @tap="showImg(arr,i)" mode="aspectFill"/>
						</div>
					</li>
					<li class="attachment" v-if="ExpenseBill.FileList && ExpenseBill.FileList.length>0">
						<div class="detail-title">
							<i class="ico ico-fj"></i>
							<text class="text-title">附件</text>
						</div>
						<div class="imgBox">
							<filesUnit v-for="(file,i) in ExpenseBill.FileList" :fileItem="file" :key="i"></filesUnit>
							
						</div>
					</li>
				
				</ul>
			</view>
			
		
		</view>

</template>

<script>
	import { mapGetters } from 'vuex';

	import filesUnit from '@/components/filesComponent/fileUnit.vue'
	export default {
		props: ['ExpenseBill'],
		components:{
			filesUnit
		},
		methods: {
			showImg(index) {
				this.$emit('showImg',index)
			}
		}
	}
</script>

<style scoped>
	@import url("/common/css/expensesTop.css");


	.base-info {
		background-color: #fff;
		margin-top: 30upx;
	}


	.uni-list-cell:after {
		height: 0;
	}

	.trip_detail {
		border: 2upx solid rgb(234, 234, 234);
		box-shadow: 0px 1px 8px rgb(234, 234, 234);
		border-radius: 7px;
		margin-bottom: 20upx;
		margin-left: 30upx;
		margin-right: 30upx;
		padding: 20upx 24upx 20upx 24upx;
	}

	.trip_detail_top {
		width: 100%;
		
		box-sizing: border-box;
		/* padding-bottom: 10upx; */
	}


	.trip-date {
		font-size: 24upx;
	}
	.trip-price {
		color: #6cc09c;
		font-size: 30upx;
	}


	.trip_person {
		display: flex;
	}

	.trip_person div {
		display: flex;
		align-items: center;
	}


	.trip_person span {
		padding: 0 12upx;
		padding-left: 0;
	}

	.trip-subsidies {
		margin-top: 16upx;
		padding-top: 16upx;
		
		border-top: 2upx dashed rgb(234, 234, 234);
	}

	.trip-subsidies text {
		font-size: 24upx;
	}


</style>
