<template>
	<div>
		<el-dialog
			:title="title"
			:close-on-click-modal="false"
			draggable
			width="500px"
			@close="close"
			@keyup.enter.native="doSubmit"
			v-model="visible">
			<el-form size="large" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
					 label-width="100px" @submit.native.prevent>
				<el-row  :gutter="15">
					<el-col :span="21">
						<el-form-item label="车牌号" prop="driveNumber"
									  :rules="[
                          {required: true, message:'车牌号不能为空', trigger:'blur'}
                 ]">
							<el-input @blur="checkNumber" v-model="inputForm.driveNumber" placeholder="请填写车牌号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="21">
						<el-form-item label="车辆识别号" prop="driveIdentifyNumber"
									  :rules="[
                 ]">
							<el-input v-model="inputForm.driveIdentifyNumber" placeholder="请填写车辆识别号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
			<span  class="dialog-footer">
			  <el-button  @click="close()" icon="el-icon-circle-close">关闭</el-button>
			  <el-button  type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
			</span>
			</template>

		</el-dialog>
	</div>
</template>

<script>
	import DriveInfoService from '@/api/jy/DriveInfoService'
	export default {
		data () {
			return {
				title: '',
				method: '',
				visible: false,
				loading: false,
				inputForm: {
					id:'',
					driveNumber: '',
					driveIdentifyNumber: '',
				}
			}
		},
		DriveInfoService: null,
		created () {
			this.driveInfoService = new DriveInfoService()
		},
		methods: {
			init (method, id) {
				this.method = method
				this.inputForm = {
					id:'',
					driveNumber: '',
					driveIdentifyNumber: '',
				}
				if (method === 'add') {
					this.title = `新建车辆信息`
				} else if (method === 'edit') {
					this.inputForm.id = id
					this.title = '修改车辆信息'
				} else if (method === 'view') {
					this.inputForm.id = id
					this.title = '查看车辆信息'
				}
				this.visible = true
				this.loading = false
				this.$nextTick(() => {
					this.$refs.inputForm.resetFields()
					if (method === 'edit' || method === 'view') { // 修改或者查看
						this.loading = true
						this.driveInfoService.queryById(this.inputForm.id).then((data) => {
							this.inputForm = this.recover(this.inputForm, data)
							this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
							this.loading = false
						})
					}
				})
			},
			// 表单提交
			doSubmit () {
				this.$refs['inputForm'].validate((valid) => {
					if (valid) {
						this.loading = true
						this.driveInfoService.save(this.inputForm).then((data) => {
							this.close()
							this.$message.success(data)
							this.$emit('refreshDataList')
							this.loading = false
						}).catch(() => {
							this.loading = false
						})
					}
				})
			},
			close () {
				this.$refs.inputForm.resetFields()
				this.visible = false
			},
			checkNumber(){
				this.loading = true
				if (this.commonJS.isNotEmpty(this.inputForm.driveNumber)){
					this.driveInfoService.checkNumber(this.inputForm.driveNumber).then(data=>{
						if (data){
							this.$message.error('已存在该车辆')
							this.loading = false
							throw new Error()
						}
					})
				}

			}
		}
	}
</script>
