<template>
	<view class="reportCost content_box">
		<u-toast ref="uToast" />
		<!-- 运单信息 -->
		<bs-pageHeader-orderNo :shipmentNo="propsData.shipmentNo" />
		<view class="shipment-info routine_radius_card">
			<bs-customCell label="发运日期 :" :value="propsData.shipmentDate" labelCol="3" wrapCol="7" />
			<bs-customCell label="司机姓名 :" :value="propsData['driver1.name']" labelCol="3" wrapCol="9" />
			<bs-customCell label="车牌号 :" :value="propsData['truck.name']" labelCol="3" wrapCol="10" />
			<bs-customCell label="司机手机 :" :value="propsData['driver1.tel']" labelCol="3" wrapCol="9" />
			<bs-customCell label="货量 :" labelCol="2" wrapCol="9"
				:value="propsData.shipOrders + '单/' +propsData.shipQty+ '件/' + propsData.shipWeight+'千克/'+ propsData.shipVolume+'方'" />
		</view>
		
		<!-- 费用明细 -->
		<view class="cost-details routine_radius_card">
			<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
				<u-form-item prop="costType" required label="费用类型" labelWidth="35%" borderBottom>
					<view @click="onVisible">
						<u-input border="none" readonly inputAlign="left" placeholder="选择费用类型"
							placeholderClass="input-tip" :value="viewEnums[formData.costType]" />
					</view>
					<u-icon slot="right" name="arrow-right" @click="onVisible" />
				</u-form-item>
				<u-form-item prop="costDate" required label="费用发生日期" labelWidth="35%" borderBottom>
					<view @click="onVisiblePicker">
						<u-input border="none" readonly inputAlign="left" placeholder="请选择时间"
							placeholderClass="input-tip" v-model="formData.costDate" />
					</view>
					<u-icon slot="right" name="arrow-right" @click="onVisiblePicker" />
				</u-form-item>
				<u-form-item prop="amount" label="费用金额" labelWidth="35%">
					<u-input border="none" type="digit" inputAlign="left" placeholder="输入金额"
						placeholderClass="input-tip" v-model="formData.amount" holdKeyboard/>
				</u-form-item>
			</u--form>
		</view>
		<view class="uploader-img">
		<bs-todoRemark ref="myRemark" />
		</view>
		<!-- 上传图片 -->
		<view class="uploader-img">
			<bs-uploader ref="costImgs" required uploadTitle="上传凭证" />
		</view>
		<view class="cost-details reportHistory" v-if="shipmentExpenseList.length>0">
			<view style="color: #8c8c8c;">
				上报历史
			</view>
			<u--form>
				<view class="flex_center flex_sb" style="margin-top: 40rpx;"  v-for="(shipmentExpense, index) in shipmentExpenseList" :key="index">
					<view class="">
						<view>
						{{getFormatDate(shipmentExpense.costDate)}}
							
						</view>
					<view class=" flex_center" style="margin-top: 8rpx; font-weight: bolder;">
						<view style="margin-right: 16rpx;">{{shipmentExpense['costTypeLabel']}}</view>
						<view style="font-size: 30rpx;">{{shipmentExpense['amount']}}</view>
					</view>
					</view>
					<u-icon name="arrow-right"  @click="openExpenseDetail(shipmentExpense.id)"/>
				</view>
					
			</u--form>
		</view>
		<!-- 底部按钮 -->
		<view class="operation-btn flex_sb">
			<button class="backBtn common_btn" @click="onNavBack">返回</button>
			<button class="submitBtn common_btn" @click="submitCost">提交</button>
		</view>
		<!-- 费用类型选择 -->
		<bs-selectPopup ref="mySelectPop" popTitle="请选择费用类型" :selectEnum="optionEnums" :visible="visible"
			@onVisible="onVisible" @onConfirm="onConfirmSelect" />
		<!-- 时间选择 -->
		<bs-datetimePicker ref="myTimePicker" :visible="showPopup" @onVisible="onVisiblePicker"
			@onSelsectDate="onSelsectDate" />
	</view>
</template>

<script>
	import { reportDriverCost, getOptionEnum, GetDriverExpenseList } from '../../api/apiList'
	import { formatTime, formatGMT } from '../../utils/util'
	export default {
		data() {
			return {
				formData: {
					costType: "", //费用类型
					costDate: "", //费用发生日期
					amount: "", //费用金额			
				},
				rules: {
					'costType': { required: true },
					'costDate': { required: true },
				},

				propsData: "", //导航传递过来的参数
				selectedIds: [], //订单id
				optionEnums: [], //费用类型枚举
				visible: false, //是否显示选择弹窗

				viewEnums: {}, //页面显示使用
				//时间选择配置
				showPopup: false,
				timestamp: '',
				shipmentExpenseList: []
			}
		},
		onLoad: function(options) {
			const data = JSON.parse(options.data)
			this.selectedIds = [data.id]
			this.propsData = data
			this.getShipmentExpenseList()
		},
		methods: {
			// 提交表单数据
			submitCost() {
				this.$refs.myForm.validate().then(res => {
					let { costType, amount } = this.formData
					const imgInstance = this.$refs.costImgs
					const remarkInstance = this.$refs.myRemark
					const remarks = remarkInstance.value
					imgInstance.uploadImage(images => {
						const costDate = formatTime(new Date(this.timestamp))
						const data = {
							"aux": { costType, amount, costDate, images,remarks },
							args: {
								"selectedIds": this.selectedIds
							}
						}
						reportDriverCost(data).then(res => {
							if (res.data.messageType === 'success') {
								uni.showToast({
									title: '费用上报成功',
									duration: 3000
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							}
						})
					})
				}).catch(errors => {
					this.$refs.uToast.show({
						message: '请完善必填信息',
					})
				})
			},
			// 时间选择
			onSelsectDate(dateInfo) {
				const { dateValue, timestamp } = dateInfo
				this.formData.costDate = dateValue
				this.timestamp = timestamp
				this.showPopup = false
			},
			//关闭时间选择框
			onVisiblePicker() {
				this.showPopup = !this.showPopup
			},
			//返回上一级页面
			onNavBack() {
				uni.navigateBack()
			},
			//费用类型选择
			onVisible() {
				const { optionEnums, visible } = this
				if (!visible) {
					if (!optionEnums.length) {
						this.getOptions()
					} else {
						const mySelectPop = this.$refs.mySelectPop
						mySelectPop.setSelect(this.costType)
					}
				}
				this.visible = !this.visible
			},
			getOptions() {
				getOptionEnum('DriverCostType').then(res => {
					const datas = res.data.data.datas
					let viewEnums = {}
					datas.map(item => {
						viewEnums[item.value] = item.label
					})
					this.optionEnums = datas
					this.viewEnums = viewEnums
				})
			},
			//确认选择
			onConfirmSelect(value) {
				this.formData.costType = value || ''
				this.visible = false
			},
			getShipmentExpenseList(){
				GetDriverExpenseList({"args": {
						"pageNum": 1,
						"pageSize": 1000,
						"restrictions":[{
							"field": 'shipment',
							"type": "EQ", //EQ精准匹配，LK模糊匹配
							"value": this.propsData.id
						}]
					}}).then(res=>{
					this.shipmentExpenseList = res.data.data.datas
				})
			},
			getFormatDate(date){
				return formatGMT(date, 'D') + ' ' + formatGMT(date, 'H')
			},
			openExpenseDetail(id){
				uni.navigateTo({
					url:`/subpkg/expenseDetail/expenseDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.reportCost {
		/deep/.shipment-info {
			padding: 28rpx 30rpx;

			.custom-cell-label {
				color: #8C8C8C;
			}
		}

		/deep/.cost-details {
			padding: 0 20rpx;
			background-color: #ffffff;

			.input-tip {
				font-size: 28rpx;
				color: #BFBFBF;
			}
			
			.input-tip-expense {
				font-size: 28rpx;
				color: #BFBFBF;
			}

			.u-form-item__body__left__content__label {
				color: #8C8C8C;
				font-size: 28rpx;
			}

			.u-form-item__body {
				padding: 30rpx 0;
			}

			.u-icon {
				margin-left: 20rpx;
			}
		}

		.uploader-img {
			margin-top: 40rpx;
			padding: 25rpx;
			margin: 4rpx;
			background-color: #ffffff;
		}

		.operation-btn {
			min-height: 220rpx;
		}
		
		.reportHistory{
			margin-top: 24rpx;
			color: #434343;
			font-size: 28rpx;
			padding: 24rpx;
		}
	}
</style>
