<template>
	<view class="personExpenseDetail">
		<view class="">
			<view class="personExpenseDetail_label">
				基本信息
			</view>
			<view class="personExpenseDetail_padding">
			<bs-customCell label="姓名" :value="personExpenseInfo.driver.name" labelCol="3" wrapCol="7" />
				<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
				<bs-customCell label="车辆" :value="personExpenseInfo.truck.name" labelCol="3" wrapCol="7" />
				<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
				<bs-customCell label="联系电话" :value="personExpenseInfo.driver.tel" labelCol="3" wrapCol="7" />
				<block v-if="personExpenseInfo.shipment.shipmentNo">
					<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
					<bs-customCell label="运单号" :value="personExpenseInfo.shipment.shipmentNo" labelCol="3" wrapCol="7" />
				</block>
			</view>
		</view>
		<view class="">
			<view class="personExpenseDetail_label">
				费用信息
			</view>
			<view class="personExpenseDetail_padding">
				<bs-customCell label="费用类型" :value="personExpenseInfo.costTypeLabel" labelCol="3" wrapCol="7" />
				<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
				<bs-customCell label="发生日期" :value="insertDate" labelCol="3" wrapCol="7" />
				<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
				<bs-customCell label="金额" :value="personExpenseInfo.amount" labelCol="3" wrapCol="7" />	
			</view>
		</view>
		<view class="">
			<view class="personExpenseDetail_label">
				其它信息
			</view>
			<view class="personExpenseDetail_padding">
				<bs-uploader  ref="images" uploadTitle="上传凭证" :isShowBtn="false" :isShowDelete="false"></bs-uploader>
				<bs-todoRemark  ref="remarks" :title="'备注'" :isReadonly="true" placeholder=""></bs-todoRemark>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GetDriverExpenseInfo,downloadImg
	} from '../../api/apiList.js'
	import {
		formatGMT
	} from '../../utils/util.js'
	export default {
		data() {
			return {
				id: '',
				personExpenseInfo: {}
			};
		},
		onLoad(option) {
			const {
				id
			} = option
			this.id = id
			this.getDriverExpenseInfo()
		},
		methods: {
			getDriverExpenseInfo() {
				GetDriverExpenseInfo({
					"args": {

					},
					"aux": {
						"id": this.id
					}
				}).then(res => {
					this.personExpenseInfo = res.data.data.header
					this.personExpenseInfo.images && downloadImg(this.personExpenseInfo.images.split('=')[1]).then(image=>{
						this.$refs.images.fileList = [image]						
					})
					this.$refs.remarks.value = this.personExpenseInfo.remarks
				})
			}

		},
		computed:{
			insertDate(){
				// return formatGMT(this.personExpenseInfo.costDate, 'D') + ' '+ formatGMT(this.personExpenseInfo.costDate, 'H') 
			return formatGMT(this.personExpenseInfo.costDate, 'D')
			
			}
		}
	}
</script>

<style lang="scss">
	.personExpenseDetail{
		min-height: 100vh;
		background-color: #FAFAFA;
		.personExpenseDetail_label{
			padding-top: 32rpx;
			padding-bottom: 16rpx;
			padding-left: 24rpx;
			color: #262626;
			font-size: 32rpx;
			font-weight: bolder;
		}
		.personExpenseDetail_padding{
			padding: 40rpx 24rpx;
			background-color: #FFFFFF;
		}
	}
</style>
