<template>
	<div class="container" style="margin:10px;">
		<el-button type="success" @click="AddOrUpdSub(null)">新增</el-button>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="ID" width="180">
				<template slot-scope="scope">
					{{scope.row.id}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="车型" width="180">
				<template slot-scope="scope">
					{{scope.row.carModel}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="用户" width="180">
				<template slot-scope="scope">
					{{scope.row.userName}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="手机号" width="180">
				<template slot-scope="scope">
					{{scope.row.phone}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="状态" width="180">
				<template slot-scope="scope">
					<el-tag type="success">
						{{scope.row.ReservationStatus}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="状态" width="180">
				<template slot-scope="scope">
					<el-button type="primary" @click="AddOrUpdSub(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="状态" width="180">
				<template slot-scope="scope">
					<el-button type="warning" @click="DelSub(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
		  background
		  layout="prev, pager, next"
		  :total="totalcount" @current-page="Pages" style="text-align: right;margin-top: 10px;">
		</el-pagination>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="姓名">
					<el-input v-model="form.userName" maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="电话号码">
					<el-input v-model="form.phone" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="车辆型号">
					<el-input v-model="form.carModel"  maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="预约状态">
					<el-select v-model="form.ReservationStatus" placeholder="请选择状态">
						<el-option label="已预约" value="已预约"></el-option>
						<el-option label="已取消" value="已取消"></el-option>
						<el-option label="已完成" value="已完成"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="Submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		GetRobot,
		DeleteRobot,
		ListRobot,
		UpdateRobot,
		CreateRobot
	} from '../../api/RobotReservation.js'
	export default {
		data() {
			return {
				model:{
					ids:0,
				},
				tableData: [],
				dialogVisible: false,
				// 机器人预约列表实体
				model: {
					pageIndex: 1,
					pageSize: 20,
					sort: '',
					sortOrder: '',
					keyword: ''
				},
				totalcount: 0,
				form: {
					"id": 0,
					"userName": "",
					"phone": "",
					"carModel": "",
					"ReservationStatus": ""
				}
			}
		},
		created() {
			this.ShowRobot()
		},
		methods: {
			Pages(e){
				this.model.PageIndex=e
				this.ShowRobot()
			},
			// 添加修改
			AddOrUpdSub(obj) {
				this.dialogVisible = true
				if (obj == null) {
					// 新增
					this.form.id = 0
					this.form.userName = ''
					this.form.phone = ''
					this.form.carModel = ''
					this.form.ReservationStatus = ''
				} else {
					// 修改
					this.form.id = obj.id
					this.form.userName = obj.userName
					this.form.phone = obj.phone
					this.form.carModel = obj.carModel
					this.form.ReservationStatus = obj.ReservationStatus
				}
			},
			ShowRobot() {
				ListRobot(this.model).then(res => {
					console.log('res', res)
					this.tableData = res.data.data
					this.totalcount = res.data.data.length
				})
			},
			// 提交添加修改
			Submit(){
				if(this.form.id>0){
					// 修改
					UpdateRobot(this.form).then(res=>{
						if(res.code==200){
							this.$message.success('修改成功')
							this.ShowRobot()
							this.dialogVisible=false
						}else{
							this.$message.error('修改失败')
						}
					})
				}else{
					// 新增
					CreateRobot(this.form).then(res=>{
						if(res.code==200){
							this.$message.success('新增成功')
							this.ShowRobot()
							this.dialogVisible=false
						}else{
							this.$message.error('新增失败')
						}
					})
				}
			},
			DelSub(id) {
				this.model.ids=id
				DeleteRobot(this.model).then(res => {
					console.log('res', res)
					if (res.code == 200) {
						this.$message.success('删除成功')
						this.ShowRobot()
					} else {
						this.$message.error('删除失败')
					}
				})
			}
		}
	}
</script>

<style>
</style>
