<template>
	<view class="expenseDetail">
		<bs-pageHeader-orderNo :shipmentNo="shipmentExpenseInfo.shipment.shipmentNo" />
		<view class="expenseDetail_header">
			<bs-customCell label="费用类型" :value="shipmentExpenseInfo.costTypeLabel" labelCol="3" wrapCol="7" />
			<bs-customCell label="费用金额" :value="shipmentExpenseInfo.amount" labelCol="3" wrapCol="7" />
			<bs-customCell label="提交时间" :value="formatDate" labelCol="3" wrapCol="7" />
		</view>
		<view class="expenseDetail_content">
			<bs-uploader ref="images" uploadTitle="上传凭证" :isShowBtn="false" :isShowDelete="false"></bs-uploader>
			<bs-todoRemark ref="remarks" :title="'备注'" :isReadonly="true" placeholder=""></bs-todoRemark>
		</view>
		<view class="expenseDetail_billOn">
			<bs-customCell label="报销单号" :value="shipmentExpenseInfo.reimbursement.billNo" labelCol="3" wrapCol="7" />
			<view class="expenseDetail_billOn_label" style="position: absolute; right: 24rpx; top: 50%; translate: 0 -50%;">
				{{shipmentExpenseInfo.reimbursement.statusLabel || ''}}
			</view>
		</view>
	</view>
</template>

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

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

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

<style lang="scss">
	.expenseDetail {
		min-height: 100vh;
		background-color: #FAFAFA;
		.expenseDetail_header {
			background-color: #FFFFFF;
			margin: 0 24rpx;
			padding: 24rpx;
			border-radius: 0 0 16rpx 16rpx;
		}
		.expenseDetail_content {
			margin: 24rpx 0;
			background-color: #FFFFFF;
			padding: 24rpx;
		}
		.expenseDetail_billOn{
			background-color: #FFFFFF;
			padding: 24rpx;
			position: relative;
			.expenseDetail_billOn_label{
				color: #F7A64A;
				font-size: 32rpx;
				font-weight: bolder;
			}
		}
	}
</style>
