<template>
	<div class="container" style="margin:10px;">

		<el-form :inline="true" :model="model" class="demo-form-inline">
			<el-form-item label="关键字">
				<el-input v-model="model.KeyWord" placeholder="关键字"></el-input>
			</el-form-item>
			<el-form-item label="开始时间">
				<el-date-picker v-model="model.startdate" type="date" placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="至">
				<el-date-picker v-model="model.enddate" type="date" placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="model.State" placeholder="请选择" @change="SelectedState">
					<el-option label="查所有" value="-1"></el-option>
					<el-option label="已预约" value="0"></el-option>
					<el-option label="已取消" value="1"></el-option>
					<el-option label="已完成" value="2">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="SubmitCard">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" style="float: right;">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="预约设置ID" width="180" v-if="false">
				<template slot-scope="scope">
					{{scope.row.ReservationId}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="用户ID" width="80">
				<template slot-scope="scope">
					{{scope.row.UserId}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="预约的车辆ID" width="180" v-if="false">
				<template slot-scope="scope">
					{{scope.row.CarId}}
				</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="120">
				<template slot-scope="scope">
					{{scope.row.UserPhone}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="状态" width="100">
				<template slot-scope="scope">
					<el-tag type="success">
						{{scope.row.State==0?'已预约':scope.row.State==1?'已取消':scope.row.State==2?'已完成':'未知'}}
					</el-tag>
				</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="80">
				<template slot-scope="scope">
					{{scope.row.CarColour}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="划痕" width="80">
				<template slot-scope="scope">
					{{scope.row.Scratch}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="腐蚀" width="80">
				<template slot-scope="scope">
					{{scope.row.Corrosion}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="破损" width="80">
				<template slot-scope="scope">
					{{scope.row.BeDamaged}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="飞漆" width="80">
				<template slot-scope="scope">
					{{scope.row.FlyingPaint}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="地址" width="280">
				<template slot-scope="scope">
					{{scope.row.Address}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="预约服务时间" width="180">
				<template slot-scope="scope">
					{{scope.row.MakeTime}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="添加时间" width="180" v-if="false">
				<template slot-scope="scope">
					{{scope.row.AddTime}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="修改时间" width="180" v-if="false">
				<template slot-scope="scope">
					{{scope.row.UpdateTime}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="备注">
				<template slot-scope="scope">
					{{scope.row.Remarks}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="编辑" width="180" v-if="false">
				<template slot-scope="scope">
					<el-button type="primary" @click="EidtRecord(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="操作" width="220"  fixed="right">
				<template slot-scope="scope">
					<el-button type="danger" @click="DelInfo(scope.row.id)">删除</el-button>
					<el-button type="success" @click="Results(scope.row)" :disabled="scope.row.State==0?false:true">
						预约结算</el-button>
				</template>
			</el-table-column>
			<!-- 	<el-table-column prop="date" label="修改状态" width="180">
				<template slot-scope="scope">
					<el-button type="primary" @click="UpdateState(scope.row.id)">修改状态</el-button>
				</template>
			</el-table-column> -->
			<el-table-column prop="date" label="预约结算" width="180"  fixed="right" v-if="false">
				<template slot-scope="scope">
					<el-button type="success" @click="Results(scope.row)" :disabled="scope.row.State==0?false:true">
						预约结算</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="model.TotalCount" @current-change='Pages'
			style="text-align:center;margin-top: 10px;">
		</el-pagination>
		<el-dialog title="提示" width="50%" :visible.sync="dialogVisible">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="用户名">
					<el-input v-model="form.UserName"></el-input>
				</el-form-item>
				<el-form-item label="用户电话">
					<el-input v-model="form.UserPhone"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.Address"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.Remarks"></el-input>
				</el-form-item>
				<el-form-item label="车型">
					<el-input v-model="form.CarModel"></el-input>
				</el-form-item>
				<el-form-item label="颜色">
					<el-input v-model="form.CarColour"></el-input>
				</el-form-item>
				<el-form-item label="划痕">
					<el-radio-group v-model="form.Scratch">
						<el-radio label="良好">良好</el-radio>
						<el-radio label="一般">一般</el-radio>
						<el-radio label="中等">中等</el-radio>
						<el-radio label="严重">严重</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="腐蚀">
					<el-radio-group v-model="form.Corrosion">
						<el-radio label="良好">良好</el-radio>
						<el-radio label="一般">一般</el-radio>
						<el-radio label="中等">中等</el-radio>
						<el-radio label="严重">严重</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="破损">
					<el-radio-group v-model="form.BeDamaged">
						<el-radio label="良好">良好</el-radio>
						<el-radio label="一般">一般</el-radio>
						<el-radio label="中等">中等</el-radio>
						<el-radio label="严重">严重</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="飞漆">
					<el-radio-group v-model="form.FlyingPaint">
						<el-radio label="良好">良好</el-radio>
						<el-radio label="一般">一般</el-radio>
						<el-radio label="中等">中等</el-radio>
						<el-radio label="严重">严重</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="SubmitRecord">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		GetAppointmentRecord,
		DeleteRecord,
		UpdateRecord,
		Collection,
		deriveExcel,
		UpdateState,
		UpdResultTime,
	} from '../../api/AppointmentRecord.js'
	import {
		UpdnowNum,
		SendPaymentAppointment,
	} from '../../api/user.js'
	import utils from '../../utils/utils.js'
	import {
		ReservationAreaList
	} from '../../api/ReservationArea.js'
	export default {
		data() {
			return {

				form: {
					"id": 0,
					"ReservationId": 0,
					"UserId": 0,
					"UserName": "",
					"UserPhone": "",
					"CarId": 0,
					"CarModel": "",
					"CarColour": "",
					"Scratch": "",
					"Corrosion": "",
					"BeDamaged": "",
					"FlyingPaint": "",
					"Address": "",
					"State": 0,
					"Remarks": "",
					"AddTime": "2022-01-05T07:38:12.364Z",
					"UpdateTime": "2022-01-05T07:38:12.364Z"
				},
				dialogVisible: false,
				tableData: [],
				models: {
					ids: 0
				},
				model: {
					"State": '-1',
					"startdate": "",
					"enddate": "",
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 10,
					"Sort": [{
						"Field": "MakeTime",
						"Type": 1
					}]
				},
				StateModel: {
					"id": 0,
					"state": 0
				},
				// 付款发送短信
				paramModel: {
					"param": "",
					"mobile": ""
				}
			}
		},
		created() {
			this.ShowRecord()
		},
		methods: {
			//导出
			onSubmit() {
				deriveExcel(null).then(res => {
					console.log('导出数据', res)
					if (res.data.code == 200) {
						this.$message.success('导出成功')
						// 派发附件下载
						this.exportCostlistp(res.data.data)
					} else {
						this.$message.error('导出失败')
					}
				})

			},
			// 派发附件下载
			exportCostlistp(url) {
				let a = document.createElement("a");
				a.download = url;
				a.style.display = "none";
				a.href = url
				document.body.appendChild(a);
				a.click();
				URL.revokeObjectURL(a.href); // 释放URL 对象
				document.body.removeChild(a); // 删除 a 标签
			},
			// 完成预约线下收款
		async	Results(item) {
				Collection(item.id).then(res => {
					this.$message.success(res.data.message)
					// 完成单数
					UpdnowNum(item.UserId).then(res => {
						console.log('修改后的数据单量', res)
						if (res.data.code == 200) {
							console.log('单量完成加1')
						} else {
							console.log('单量完成失败')
						}
					})
					// 付款时间
					UpdResultTime(item.id).then(res => {
						if (res.data.code == 200) {
							console.log('付款时间更新成功')
						} else {
							console.log('付款时间更新失败')
						}
					})
					// 发送短信
					this.paramModel.mobile=item.UserPhone
					SendPaymentAppointment(this.paramModel).then(res => {
						console.log('付款数据啊', res)
						if (res.data.data.code == '000000') {
							console.log('发送短信成功')
						} else {
							console.log('发送短信失败')
						}
					})
					console.log('付款参数',this.paramModel)
					this.ShowRecord()

				})
			},
			EidtRecord(item) {
				this.dialogVisible = true
				console.log('item', item)
				this.form.id = item.id
				this.form.ReservationId = item.ReservationId
				this.form.UserId = item.UserId
				this.form.CarId = item.CarId
				this.form.Remarks = item.Remarks
				this.form.Address = item.Address
				this.form.UserName = item.UserName
				this.form.UserPhone = item.UserPhone
				this.form.CarModel = item.CarModel
				this.form.CarColour = item.CarColour
				this.form.Scratch = item.Scratch
				this.form.Corrosion = item.Corrosion
				this.form.BeDamaged = item.BeDamaged
				this.form.FlyingPaint = item.FlyingPaint
				// this.form.UpdateTime=utils.formatTime(new Date(),"yyyy-MM-dd")
			},
			SubmitRecord() {
				UpdateRecord(this.form).then(res => {
					console.log('resXiugai', res)
					if (res.data.code == 200) {
						this.$message.success('修改成功')
						this.dialogVisible = false
						this.ShowRecord()
					} else {
						this.$message.watch('修改失败')
					}
				})
			},
			ShowRecord() {
				GetAppointmentRecord(this.model).then(res => {
					console.log(res)
					if(res.data.data.total>0){
						this.$message.success('查询成功')
						res.data.data.rows.forEach((item, index) => {
							item.AddTime = utils.formatTime(item.AddTime, "yyyy-MM-dd")
							item.UpdateTime = utils.formatTime(item.UpdateTime, "yyyy-MM-dd")
							item.MakeTime = utils.formatTime(item.MakeTime, "yyyy-MM-dd")
						})
						
						this.tableData = res.data.data.rows
						this.model.TotalCount = res.data.data.total
					}else{
						this.$message.error('暂无数据')
					}
					
				})
			},
			// 状态查询预约情况
			SelectedState(e) {
				console.log('eee', e)
				this.model.State = parseInt(e)
				this.model.KeyWord = ''
				this.model.startdate = ''
				this.model.enddate = ''
				this.ShowRecord()
			},
			// 提交查询
			SubmitCard() {
				this.ShowRecord()
			},
			// 删除信息
			DelInfo(id) {
				this.models.ids = id
				console.log('数据ID', id)
				DeleteRecord(this.models).then(res => {
					console.log('删除后的数', res)
					if (res.data.code == 200) {
						this.$message.success('删除成功')
						this.ShowRecord()
					} else {
						this.$message.warn('删除失败')
					}
				})
			},
			Pages(e) {
				this.model.PageIndex = e
				this.ShowRecord()
			}

		}
	}
</script>

<style>
</style>
