<template>
	<el-dialog title="租车订单详情" :visible.sync="dialogVisible" class="order-details">
		<el-form :model="orderDetailInfo" ref="orderDetailInfo" label-width="110px">
			<el-row>
				<el-col :span="8">
					<el-form-item label="订单号:">
						<span v-if="orderDetailInfo.no">{{orderDetailInfo.no}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="创建订单时间:">
						<span v-if="orderDetailInfo.crtTime">{{orderDetailInfo.crtTime}}</span>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="实际支付时间:">
						<span>{{!!orderDetailInfo.payTime ? timestamp(new Date(orderDetailInfo.payTime)) : '无'}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="订单状态:">
						<span>{{orderDetailInfo.ststusName}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="姓名/手机号:">
						<span v-if="orderDetailInfo.username">{{orderDetailInfo.username}}/{{orderDetailInfo.telephone}}</span>
						<span v-else>无</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="会员等级/身份:">
						<span v-if="orderDetailInfo != undefined && orderDetailInfo.memberLevel">{{orderDetailInfo.memberName}}/{{orderDetailInfo. jobTitle}}</span>
						<span v-else>无</span>
					</el-form-item>
				</el-col>
			</el-row>
			<table class="orderDetail">
				<tr>
					<th>房车</th>
					<th>取/还时间</th>
					<th>交车公司</th>
					<th>还车公司</th>

					<th>免费天数</th>
					<th>车辆租赁费</th>
					<th>优惠券</th>
					<th>不计免赔</th>
					<th>租房车押金</th>
					<th>专职司机服务费</th>
				</tr>
				<tr>
					<td>
						{{orderDetailInfo.name}}  </br>  {{orderDetailInfo.vehicalNumberPlat}}
						<span v-if="orderDetailInfo.code">({{orderDetailInfo.code}})</span>
						<span v-else></span>
					</td>
					<td>
						<p>取:{{orderDetailInfo.orderRentVehicleDetail.startTime}}</p>
						<p>还:{{orderDetailInfo.orderRentVehicleDetail.endTime}}</p>
						<p v-show="orderDetailInfo.orderRentVehicleDetail.dayNum">租借天数{{orderDetailInfo.orderRentVehicleDetail.dayNum}}天</p>
					</td>
					<td>{{orderDetailInfo.startCompanyName}}</td>
					<td>{{orderDetailInfo.endCompanyName}}</td>

					<td>
						<p v-if="orderDetailInfo.rentVehiclePriceVO">
							<span v-if=" orderDetailInfo.rentVehiclePriceVO.freeDayNum && orderDetailInfo.rentVehiclePriceVO.freeDayNum > 0">会员特权{{orderDetailInfo.rentVehiclePriceVO.freeDayNum}}天</span>
							<span v-else>无</span>
						</p>
						<p v-else>无</p>
					</td>

					<td>
						<p
							v-if="orderDetailInfo.rentVehiclePriceVO && orderDetailInfo.rentVehiclePriceVO.vehicleDayNum > 0"
						>¥{{orderDetailInfo.rentVehiclePriceVO.modelAmount}}*{{orderDetailInfo.rentVehiclePriceVO.vehicleNum}}/{{orderDetailInfo.rentVehiclePriceVO.vehicleDayNum}}天</p>
						<p v-else>{{orderDetailInfo.costDetail.children[0].key}} : {{orderDetailInfo.costDetail.children[0].detail}}</p>
					</td>

					<td>
						<p v-if="orderDetailInfo.rentVehiclePriceVO && orderDetailInfo.rentVehiclePriceVO.couponAmount > 0">
							<span>{{orderDetailInfo.rentVehiclePriceVO.couponDesc}}-{{orderDetailInfo.rentVehiclePriceVO.couponAmount}}元</span>
						</p>
						<p v-else-if="orderDetailInfo.costDetail.children && orderDetailInfo.costDetail.children[2]">{{orderDetailInfo.costDetail.children[2].key}} : {{orderDetailInfo.costDetail.children[2].val}}</p>
						<p v-else>无</p>
					</td>
					<td>
						<p
							v-if="orderDetailInfo.rentVehiclePriceVO && orderDetailInfo.rentVehiclePriceVO.damageSafeAmount > 0"
						>¥{{orderDetailInfo.rentVehiclePriceVO.damageSafePrice}}/{{orderDetailInfo.rentVehiclePriceVO.dayNum}}天</p>
						<p v-else>无</p>
					</td>
					<td>
						<p v-if="orderDetailInfo.rentVehiclePriceVO">{{orderDetailInfo.rentVehiclePriceVO.deposit}}</p>
						<p v-else>{{orderDetailInfo.costDetail.children[1].key}} : {{orderDetailInfo.costDetail.children[1].val}}</p>
					</td>
					<td>
						<p
							v-if="orderDetailInfo.rentVehiclePriceVO && orderDetailInfo.rentVehiclePriceVO.driverAmount > 0"
						>¥{{orderDetailInfo.rentVehiclePriceVO.driverPrice}}*{{orderDetailInfo.rentVehiclePriceVO.driverNum}}/{{orderDetailInfo.rentVehiclePriceVO.dayNum}}天</p>
						<p v-else>无</p>
					</td>
				</tr>
				<tr>
					<td>
						<el-button size="small" type="text" v-if="orderDetailInfo.status==4" @click="resetCar">重新配车</el-button>
					</td>
					<td></td>
					<td></td>
					<td>
						<el-button
							v-show="orderDetailInfo.status == 4 || orderDetailInfo.status == 5"
							size="mini"
							type="text"
							@click="resetReturn = true"
						>更换</el-button>
					</td>
					<td
						colspan="6"
					>{{orderDetailInfo.payWay == 1 ? '微信支付' : orderDetailInfo.payWay == 2 ? '支付宝支付' : orderDetailInfo.payWay == 3 ? '银联支付' : '微信支付'}} 共计:￥{{orderDetailInfo.realAmount}}</td>
				</tr>
			</table>

			<p>
				<b>额外随车物品:</b>
				<span v-if="this.orderDetailInfo.carArticlesJson">
					<span
						v-for="(item,index) in JSON.parse(this.orderDetailInfo.carArticlesJson)"
						:key="index"
						style="margin-right:10px"
					>{{item.name || '无'}}</span>
				</span>
			</p>
			<p>
				<b>内部邀请人:</b>
				<span>{{orderDetailInfo.facilitatePhone || '无'}}</span>
			</p>
			<p>
				<b>驾驶证:</b>
				<span
					v-if="orderDetailInfo.orderVehicleCrosstownDto"
				>{{orderDetailInfo.orderVehicleCrosstownDto.licenseName}} {{orderDetailInfo.orderVehicleCrosstownDto.licensePhone}} {{orderDetailInfo.orderVehicleCrosstownDto.licenseIdCard}}</span>
				<span v-else>无</span>
			</p>
			<!-- <div v-if="form.orderVehicleCrosstownDto" style="margin: 20px 0;">
				<span style="font-size: 18px;font-weight: bold;">驾驶人信息</span>
			</div>-->
			<!-- <table class="orderDetail" v-if="form.orderVehicleCrosstownDto">
				<tr>
					<th>姓名</th>
					<th>手机号</th>
					<th>身份证号</th>
				</tr>
				<tr>
					<td>{{form.orderVehicleCrosstownDto.licenseName}}</td>
					<td>{{form.orderVehicleCrosstownDto.licensePhone}}</td>
					<td>{{form.orderVehicleCrosstownDto.licenseIdCard}}</td>
				</tr>
			</table>-->
		</el-form>
		<div class="modal_modal" v-show="resetCarVisible"></div>
		<!-- 重新配车 -->
		<el-dialog title="重新配车" :visible.sync="resetCarVisible" :append-to-body="true" :modal="false">
			<el-form :model="resetCarForm" ref="carForm" :rules="rules" label-width="90px">
				<el-form-item label="车牌号:" prop="numberPlate">
					<el-input v-model="resetCarForm.numberPlate" placeholder="请输入重配的车牌号"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelResetCar">取消</el-button>
				<el-button type="primary" @click="update('carForm')">确定</el-button>
			</div>
		</el-dialog>

		<!-- 更改还车地点 -->
		<div class="modal_modal" v-show="resetReturn"></div>
		<el-dialog title="更改还车地点" :visible.sync="resetReturn" :append-to-body="true" :modal="false">
			<el-form :model="returnForm" ref="returnForm" label-width="90px">
				<el-form-item label="还车地点:" prop="endCompanyId">
					<el-select clearable v-model="returnForm.endCompanyId" filterable placeholder="请选择/搜索还车地点">
						<el-option v-for="item in allCompaniesArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-button style="margin-top:20px" type="primary" @click="confirm('returnForm')">确定</el-button>
			</el-form>
		</el-dialog>
	</el-dialog>
</template>

<script>
import ElRow from 'element-ui/packages/row/src/row'
import ElInput from '../../../../node_modules/element-ui/packages/input/src/input.vue'
import ElCol from 'element-ui/packages/col/src/col'
import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item.vue'
import ElForm from '../../../../node_modules/element-ui/packages/form/src/form.vue'
import { editObj } from 'api/vehicle/vehicleInfo'
import { getAll, updateEndCompany } from 'api/base_info/branch_company'
export default {
	props: ['orderDetailInfo'],
	name: 'rentOrderDetailModal',
	components: {
		ElFormItem,
		ElCol,
		ElInput,
		ElRow
	},
	data() {
		return {
			returnForm: {
				endCompanyId: ''
			},
			allCompaniesArr: [],
			resetReturn: false, //更改换成地点loading
			updateNumberPlat: false, //是否重新配车
			dialogVisible: false,
			resetCarVisible: false,
			goods: [],
			resetCarForm: {
				no: '',
				numberPlate: '' //重新配车车牌号
			},
			rules1: {
				endCompanyId: [
					{
						required: true,
						message: '请选择更换地点',
						trigger: 'change'
					}
				]
			},
			rules: {
				numberPlate: [
					{
						type: 'string',
						required: true,
						message: '请输入车牌号',
						trigger: 'blur'
					}
				]
			}
		}
	},
	watch: {
		dialogVisible(newValue, oldValue) {
			if (!newValue) {
				this.$emit('rentOrderDetailDialogEvent', this.updateNumberPlat)
			}
		}
	},
	mounted() {
		this.dialogVisible = true
		this.getAllFn()
		console.log(this.orderDetailInfo)
	},
	methods: {
		orderInfo(val) {
			// let info = this.form.detailsOfExpenses.filter(item=>item.key == val)
			// 	if (info == '' || info < 0) {
			// 		return '无'
			// 	}else{
			// 		return info[0].detail || info[0].val
			// 	}
		},
		timestamp(now) {
			var year = now.getFullYear()
			var month = now.getMonth() + 1
			var date = now.getDate()
			var Hours = now.getHours()
			var Minutes = now.getMinutes()
			var Seconds = now.getSeconds()
			month = month.toString().length == 1 ? '0' + month : month
			date = date.toString().length == 1 ? '0' + date : date
			Hours = Hours.toString().length == 1 ? '0' + Hours : Hours
			Minutes = Minutes.toString().length == 1 ? '0' + Minutes : Minutes
			Seconds = Seconds.toString().length == 1 ? '0' + Seconds : Seconds
			return (
				year +
				'-' +
				month +
				'-' +
				date +
				' ' +
				Hours +
				':' +
				Minutes +
				':' +
				Seconds
			)
		},
		getAllFn() {
			let _this = this
			getAll().then(data => {
				_this.allCompaniesArr = []
				data.data.map(function(item) {
					item.value = item.name
					_this.allCompaniesArr.push(item)
				})
			})
		},
		confirm(formName) {
			if (this.returnForm.endCompanyId == '') {
				this.$notify({
					title: '失败',
					message: '还车地点不能为空',
					type: 'error',
					duration: 2000
				})
			} else {
				this.returnForm.id = this.form.detailId
				updateEndCompany(this.returnForm).then(data => {
					if (data.status == 200) {
						this.$notify({
							title: '成功',
							message: '修改还车地点成功',
							type: 'success',
							duration: 3000
						})
						this.resetReturn = false
						this.dialogVisible = false
						this.$emit('rentOrderDetailDialogEvent', true)
					} else {
						this.$notify({
							title: '失败',
							message: data.message,
							type: 'error',
							duration: 3000
						})
					}
				})
			}
		},
		resetCar() {
			this.clearFrom()
			this.resetCarVisible = true
			this.resetCarForm.no = this.form.no
		},
		cancelResetCar() {
			this.resetCarVisible = false
		},
		clearFrom() {
			this.resetCarForm = {
				no: '',
				numberPlate: '' //重新配车车牌号
			}
		},
		/**
		 * 重新配车
		 * */
		update(formName) {
			let that = this
			const set = this.$refs
			set[formName].validate(valid => {
				if (valid) {
					editObj(this.resetCarForm).then(response => {
						if (response.status === 200) {
							this.$notify({
								title: '成功',
								message: '修改成功',
								type: 'success',
								duration: 2000
							})
							this.resetCarVisible = false
							this.form.vehicleNumberPlat = this.resetCarForm.numberPlate
							this.updateNumberPlat = true
						} else {
							this.$notify({
								title: '失败',
								message: response.message,
								type: 'error',
								duration: 2000
							})
						}
					})
				} else {
					return false
				}
			})
		}
	}
}
</script>
<style>
.label-text {
	margin-left: 10px;
	margin-right: 20px;
}
.label-title {
	margin-top: 10px;
}
.orderDetail tr th {
	background: #eef1f6;
}
.orderDetail tr td,
.orderDetail tr th {
	width: 500px;
	text-align: center;
	border: 1px solid #dfe6ec;
	margin-left: 100px;
	margin-right: 100px;
	padding: 10px;
}
.label-value {
	margin-left: 80px;
	margin-right: 100px;
}
#license-img {
	width: 50px;
	height: 50px;
}
.order-details .el-dialog--small {
	width: 1100px !important;
}
.order-details .el-form-item {
	margin-bottom: 10px !important;
}
.modal_modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background: #000;
	z-index: 2000;
}
</style>
