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

				<el-col :span="8">
					<el-form-item label="实际支付时间:">
						<span>{{form.crtTime}}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="订单状态:">
						<span>{{form.ststusName}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="姓名/手机号:">
						<span>{{form.realName}}/{{form.telephone}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="会员等级/身份:">
						<span></span>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="8">
					<el-form-item label="配车:">
						<span
							style="margin-right: 10px;"
						>{{form.vehicleNumberPlat?form.vehicleNumberPlat:form.vehicalNumberPlat}}</span>
						<el-button
							size="small"
							type="primary"
							icon="edit"
							v-if="form.status==4"
							@click="resetCar"
						>重新配车</el-button>
					</el-form-item>
				</el-col> -->
			</el-row>
			<!-- <el-row>
				<el-col :span="8">
					<el-form-item label="取车:">
						<span>{{form.orderRentVehicleDetail.startTime}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label label-width="10px">
						<span>{{form.orderRentVehicleDetail.startAddr}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="交车公司:">
						<span>{{form.startCompanyName}}</span>
					</el-form-item>
				</el-col>
			</el-row> -->
			<!-- <el-row>
				<el-col :span="8">
					<el-form-item label="还车:">
						<span>{{form.orderRentVehicleDetail.endTime}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label label-width="10px">
						<span>{{form.orderRentVehicleDetail.endAddr}}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="还车公司:">
						<span>{{form.endCompanyName}}</span>
						<el-button
							v-show="form.status == 4 || form.status == 5"
							size="mini"
							type="primary"
							style="padding: 7px 9px;"
							@click="resetReturn = true"
						>更换</el-button>
					</el-form-item>
				</el-col>
			</el-row> -->
			<table class="orderDetail">
				<tr>
					<th>房车</th>
					<th>取/还时间</th>
					<th>交车公司</th>
					<th>还车公司</th>
					<th>费用明细</th>
				</tr>
				<tr>
					<!-- {{rentCostDetail}} -->
					<td>{{form.name}}</td>
					<td>
						<p>取:{{form.orderRentVehicleDetail.startTime}}</p>
						<p>还:{{form.orderRentVehicleDetail.endTime}}</p>
						<p>租借天数:{{form.orderRentVehicleDetail.dayNum}}</p>
					</td>
					<td>{{form.startCompanyName}}</td>
					<td>{{form.endCompanyName}}</td>
					<td>
						<p>车辆租赁费:</p>
						<p>免费天数:</p>
						<p>不计免赔:</p>
						<p>租房车押金:</p>
						<p>优惠券:</p>
					</td>
				</tr>
				<tr>
					<td>
						<el-button size="small" type="text" v-if="form.status==4" @click="resetCar">重新配车</el-button>
					</td>
					<td></td>
					<td></td>
					<td>
						<el-button
							v-show="form.status == 4 || form.status == 5"
							size="mini"
							type="text"
							style="padding: 7px 9px;"
							@click="resetReturn = true"
						>更换</el-button>
					</td>
					<td>共计:￥{{form.realAmount}}</td>
				</tr>
			</table>

			<p>额外随车物品:11111</p>
			<p>内部邀请人:11111</p>
			<p>驾驶证:11111</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>
					<!-- <th>驾照</th>-->
				</tr>
				<tr>
					<td>{{form.orderVehicleCrosstownDto.licenseName}}</td>
					<td>{{form.orderVehicleCrosstownDto.licensePhone}}</td>
					<td>{{form.orderVehicleCrosstownDto.licenseIdCard}}</td>
					<!-- <td><img style="width: 140px;height: 140px;" :src="form.orderVehicleCrosstownDto?form.orderVehicleCrosstownDto.licenseImg:'https://xxtest.upyuns.com/image/app/default_%20avatar.png'"></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: ['form', 'rentCostDetail'],
	name: 'rentOrderDetailModal',
	components: {
		ElFormItem,
		ElCol,
		ElInput,
		ElRow
	},
	data() {
		return {
			returnForm: {
				endCompanyId: ''
			},
			allCompaniesArr: [],
			resetReturn: false, //更改换成地点loading
			updateNumberPlat: false, //是否重新配车
			dialogVisible: false,
			resetCarVisible: false,
			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() {
		console.log(this.form)
		this.dialogVisible = true
		if (this.form.status == 2) {
			this.form.ststusName = '取消'
		}
		if (this.form.status == 3) {
			this.form.ststusName = '待付款'
		}
		if (this.form.status == 4) {
			this.form.ststusName = '待出行'
		}
		if (this.form.status == 5) {
			this.form.ststusName = '出行中'
		}
		if (this.form.status == 6) {
			this.form.ststusName = '已完成'
		}
		this.getAllFn()
	},
	methods: {
		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-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>
