<template>
	<div class="container" style="margin: 10px;">
		<el-form :inline="true" :model="robotmodel" class="demo-form-inline">
			<el-form-item label="关键字">
				<el-input v-model="robotmodel.KeyWord" placeholder="关键字"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="AddOrUpdRobot(null)">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="ID">
				<template slot-scope="scope">
					{{scope.row.id}}
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="用户姓名">
				<template slot-scope="scope">
					{{scope.row.userName}}
				</template>
			</el-table-column>

			<el-table-column prop="phone" label="联系方式">
				<template slot-scope="scope">
					{{scope.row.phone}}
				</template>
			</el-table-column>
			<el-table-column prop="carModel" label="车型">
				<template slot-scope="scope">
				{{scope.row.carModel}}
				</template>
			</el-table-column>
			<el-table-column prop="ReservationStatus" label="状态">
				<template slot-scope="scope">
					<el-tag :type="scope.row.ReservationStatus=='已预约'?'success':'warn'">
						{{scope.row.ReservationStatus}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="编辑">
				<template slot-scope="scope">
					<el-button type="primary" @click="AddOrUpdRobot(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
			<el-table-column label="删除">
				<template slot-scope="scope">
					<el-button type="danger" @click="DelRobot(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="30%">

			<el-form ref="form" :model="form" label-width="80px" :rules="rules">
				<el-form-item label="姓名" prop="userName">
					<el-input v-model="form.userName" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="电话号码" prop="phone">
					<el-input v-model="form.phone" placeholder="请输入电话号码"></el-input>
				</el-form-item>
				<el-form-item label="车型" prop="carModel">
					<el-input v-model="form.carModel" placeholder="请输入车型"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="ReservationStatus" >
					 <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="SubmitMoney">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		CreateRobot,
		UpdateRobot,
		DeleteRobot,
		ListRobot
	} from '../../api/RobotReservation.js'
	import utils from '../../utils/utils.js'
	export default {
		data() {
			return {
				dialogVisible: false,
				rules: {
					userName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'change'
					}, ],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'change'
						},
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							message: '请输入手机号码',
							trigger: 'blur'
						}
					],
					carModel: [{
							required: true,
							message: '请输入车型',
							trigger: 'change'
						}
					],
				},
				tableData: [],
				robotmodel: {
					KeyWord: "",
					pageIndex: 1,
					pageSize: 20,
					sort: '',
					sortOrder: '',
				},
				TotalCount: 0,
				form: {
					"id": 0,
					"userName": "",
					"phone": "",
					"carModel": "",
					"ReservationStatus": "已预约"
				}
			}
		},
		created() {
			this.ShowRobot()
		},
		methods: {
			// 提交添加或者修改
			SubmitMoney() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						if(this.form.id>0){
							UpdateRobot(this.form).then(res=>{
								console.log('数据',res)
								if(res.data.code==200){
									this.$message.success('修改成功')
									this.dialogVisible=false
									this.ShowRobot()
								}else{
									this.$message.error('修改失败')
								}
							})
						}else{
							CreateRobot(this.form).then(res=>{
								console.log('新增',res)
								if(res.data.code==200){
									this.$message.success('新增成功')
									this.dialogVisible=false
									this.ShowRobot()
								}else{
									this.$message.error('新增失败')
								}
								
							})
						}
						AddOrUpdMoney(this.form).then(res => {
							console.log('哈哈', res)
							if (res.data.code == 200) {
								this.$message.success('操作成功')
								this.dialogVisible = false
								this.ShowMoneys()
							} else {
								this.$message.error('操作失败')
							}
						})
					}
				})
			},
			DelRobot(id) {
				DeleteRobot({
					ids:id
				}).then(res => {
					console.log('删除数据', res)
					if (res.code == 200) {
						this.$message.success('删除成功')
						this.ShowRobot()
					}else{
						this.$message.error('删除失败')
					}
				})
			},
			Pages(e) {
				this.robotmodel.pageIndex = e
				this.ShowRobot()
			},
			// 展示机器人列表
			ShowRobot() {
				ListRobot(this.robotmodel).then(res => {
					console.log('提现记录', res)
					this.tableData = res.data.data
					this.TotalCount = res.data.count
				})
			},
			AddOrUpdRobot(obj) {
				this.dialogVisible = true
				if (obj == null) {
					// 新增
					this.form.id = 0
					this.form.userName = ''
					this.form.phone = ''
					this.form.carModel =''
				} 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
				}
			},
			onSubmit() {
				this.ShowRobot()
			}
		}
	}
</script>

<style>
</style>
