<template>
	<view class="personExpenseReceiptDetail">
		<view class="">
			<view class="personExpenseReceiptDetail_label">
				基本信息
			</view>
			<view class="personExpenseReceiptDetail_padding">
				<bs-customCell label="报销单号" :value="personExpenseReceiptInfo.billNo" labelCol="3" wrapCol="7" />
				<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
				<bs-customCell label="姓名" :value="personExpenseReceiptInfo.driver?personExpenseReceiptInfo.driver.name:personExpenseReceiptInfo['driver.name']" labelCol="3" wrapCol="7" />
				<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
				<bs-customCell label="联系电话" :value="personExpenseReceiptInfo.driver?personExpenseReceiptInfo.driver.tel:personExpenseReceiptInfo['driver.tel']" labelCol="3" wrapCol="7" />
				<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
				<bs-customCell label="车辆" :value="personExpenseReceiptInfo.truck?personExpenseReceiptInfo.truck.name:personExpenseReceiptInfo['truck.name']" labelCol="3" wrapCol="7" />
				<u-line margin="41rpx 0" color="#F0F0F0"></u-line>
				<bs-customCell label="金额" :value="personExpenseReceiptInfo.amount" labelCol="3" wrapCol="7" />
			</view>
		</view>
		<view class="">
			<view class="personExpenseReceiptDetail_label">
				报销费用
			</view>
			<view class="personExpenseReceiptDetail_padding">
				<view class="" v-for="( driverExpensReceiptExpens, index) in driverExpensReceiptExpensList"
					:key="index">
					<view class="personExpenseReceiptDetail_padding_date">
						{{formatDate(driverExpensReceiptExpens.costDate)}}
					</view>
					<view class="flex_center flex_sb">
						<view class="">
							{{driverExpensReceiptExpens.costTypeLabel || ''}}
						</view>
						<view class="flex_center">
							<view style="font-size: 36rpx; font-weight: bolder;">
								{{driverExpensReceiptExpens.amount || 0}}
							</view>
							<view style="margin-left: 8rpx;">
								元
							</view>
						</view>
					</view>
					<u-line margin="40rpx 0" v-if="index !== (driverExpensReceiptExpensList.length-1)" color="#F0F0F0">
					</u-line>
				</view>
			</view>
		</view>
		<view class="">
			<view class="personExpenseReceiptDetail_label">
				报销流程
			</view>
			<view class="personExpenseReceiptDetail_padding">
				<u-steps :current="1" direction="column">
					<u-steps-item :title="formatNoWeekDate(driverExpenseReceiptEvent.eventTime)"
						v-for="(driverExpenseReceiptEvent, index) in driverExpenseReceiptEventList" :key="index">
						<view slot="icon" class="flex_cen flex_center" style="width: 38rpx; height: 38rpx;">
							<image v-if="index !== driverExpenseReceiptEventList.length - 1"
								src="../../static/img/icon/processBefore.png" style="width: 18rpx; height: 18rpx;">
							</image>
							<image v-else src="../../static/img/icon/processCurrent.png"
								style="width: 38rpx; height: 38rpx;"></image>

						</view>
						<view slot="desc">
							<view
								style="color: #434343; font-size: 28rpx; font-weight: bolder; line-height: 28rpx;padding-top: 8rpx;">
								{{driverExpenseReceiptEvent.opinion || ''}}
							</view>
							<view
								style="position: absolute; top: 50%; translate: 0 -50%; right: 0; color: #434343; font-size: 32rpx; font-weight: bolder;">
								{{driverExpenseReceiptEvent.statusLabel}}
							</view>
						</view>
					</u-steps-item>
				</u-steps>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GetDriverExpenseReceiptInfo,
		GetDriverExpensReceiptExpensList,
		GetDriverExpenseReceiptEventList
	} from '../../api/apiList.js'
	import {
		formatGMT
	} from '../../utils/util.js'
	export default {
		data() {
			return {
				id: '',
				personExpenseReceiptInfo: {},
				driverExpensReceiptExpensList: [],
				driverExpenseReceiptEventList: []
			};
		},
		onLoad(option) {
			const {
				id
			} = option
			this.id = id
			this.getDriverExpenseReceiptInfo()

		},
		methods: {
			getDriverExpenseReceiptInfo() {
				GetDriverExpenseReceiptInfo({
					"args": {

					},
					"aux": {
						"id": this.id
					}
				}).then(res => {
					this.personExpenseReceiptInfo = res.data.data.header
					this.getDriverExpensReceiptExpensList()
					this.getDriverExpenseReceiptEventList()
				})
			},
			getDriverExpensReceiptExpensList() {
				GetDriverExpensReceiptExpensList({
					"args": {
						"pageNum": 1,
						"pageSize": 1000,
						"restrictions": [{
							"field": 'reimbursement.id',
							"type": "EQ",
							"value": this.personExpenseReceiptInfo.id
						}]
					}
				}).then(res => {
					this.driverExpensReceiptExpensList = res.data.data.datas
				})
			},
			getDriverExpenseReceiptEventList() {
				GetDriverExpenseReceiptEventList({
					"args": {
						"pageNum": 1,
						"pageSize": 1000,
						"restrictions": [{
							"field": 'driverReimbursement.id',
							"type": "EQ",
							"value": this.personExpenseReceiptInfo.id
						}]
					},

				}).then(res => {
					this.driverExpenseReceiptEventList = res.data.data.datas.reverse()
				})
			},
			formatDate(date) {
				const weekDay = ['日', '一', '二', '三', '四', '五', '六']
				// return formatGMT(date, 'D') + ' ' + '周' + weekDay[new Date(date).getDay()] + ' ' + formatGMT(date, 'H')
				return formatGMT(date, 'D') + ' ' + '周' + weekDay[new Date(date).getDay()]
				
			},
			formatNoWeekDate(date) {
				return formatGMT(date, 'D')
				// return formatGMT(date, 'D') + ' ' + formatGMT(date, 'H')
			}

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

<style lang="scss">
	.personExpenseReceiptDetail {
		min-height: 100vh;
		background-color: #FAFAFA;

		.personExpenseReceiptDetail_label {
			padding-top: 32rpx;
			padding-bottom: 16rpx;
			padding-left: 24rpx;
			color: #262626;
			font-size: 32rpx;
			font-weight: bolder;
		}

		.personExpenseReceiptDetail_padding {
			padding: 40rpx 24rpx;
			background-color: #FFFFFF;

			.personExpenseReceiptDetail_padding_date {
				color: #8C8C8C;
				font-size: 28rpx;
				margin-bottom: 14rpx;
			}
		}

		/deep/ .u-steps-item__content {

			.u-text__value {
				color: #434343 !important;
				font-size: 28rpx !important;
			}
		}
	}
</style>
