<template>
	<div class="container" style="margin: 10px;">
		<el-form :inline="true" :model="recordmodel" class="demo-form-inline">
			<el-form-item label="关键字">
				<el-input v-model="recordmodel.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="AddOrUpdRecord(null)">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="date" label="ID" v-if="false">
				<template slot-scope="scope">
					{{scope.row.id}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="描述" >
				<template slot-scope="scope">
					{{scope.row.remark}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="领取人ID" >
				<template slot-scope="scope">
					{{scope.row.getUser}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="领取数量" >
				<template slot-scope="scope">
					{{scope.row.getNum}}
				</template>
			</el-table-column>
			
			<el-table-column prop="date" label="领取时间" >
				<template slot-scope="scope">
					{{scope.row.add_time}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="修改时间" >
				<template slot-scope="scope">
					{{scope.row.update_time}}
				</template>
			</el-table-column>
			<el-table-column prop="date" label="状态" >
				<template slot-scope="scope">
					<el-tag :type="scope.row.status==0?'success':'warn'">
						{{scope.row.status==0?'正常':'未知'}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="删除" width="180" v-if="false">
				<template slot-scope="scope">
					<el-button type="danger" @click="Delinfo(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="编辑" width="180">
				<template slot-scope="scope">
					<el-button type="primary" @click="AddOrUpdRecord(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
		  background
		  layout="prev, pager, next"
		  :total="recordmodel.TotalCount" @current-change="Pages" style="text-align: right;margin-top: 10px;">
		</el-pagination>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
			<el-form ref="recordAddUpdModel" :model="recordAddUpdModel" label-width="80px" :rules="rulerecord">
				<!-- <el-form-item label="用户" prop="getUser">
					<el-select v-model="recordAddUpdModel.getUser" placeholder="请选择">
						<el-option :label="item.username" :value="item.id" v-for="(item,index) in userlist"
							:key="index"></el-option>

					</el-select>
				</el-form-item> -->
				<el-form-item label="用户ID" prop="getUser">
					<el-input v-model="recordAddUpdModel.getUser" placeholder="用户ID"></el-input>
				</el-form-item>
				<el-form-item label="领取数量" prop="getNum">
					<el-input v-model="recordAddUpdModel.getNum" placeholder="领取数量"></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="remark">
					<el-input v-model="recordAddUpdModel.remark" placeholder="描述"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="Submits">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		AddOrUpdateRecord,
		DelRecord,
		GetRecordList
	} from '../../api/record.js'
	import utils from '../../utils/utils.js'
	import {
		GetUserList
	} from '../../api/user.js'
	export default {
		data() {
			return {
				dialogVisible: false,
				rulerecord: {
					getUser: [{
						required: true,
						message: '请输入用户ID',
						trigger: 'blur'
					}],
					getNum: [{
							required: true,
							message: '请输入领取数量',
							trigger: 'blur'
						},
						{
							required: true,
							pattern: /^(?:[1-9]\d*)$/,
							message: '请输入整数',
							trigger: 'blur'
						}
					],
					remark: [
						{
								required: true,
								message: '请输入备注',
								trigger: 'blur'
							},
					]
				},
				tableData: [],
				// 所有用户信息
				model: {
					pageIndex: 1,
					pageSize: 200,
					sort: '',
					sortOrder: '',
					keyword: ''
				},
				// 领取记录
				recordmodel: {
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				formInline: {
					user: '',
					region: ''
				},
				// 添加修改
				recordAddUpdModel: {
					"id": 0,
					"getUser": 0,
					"getNum": 0,
					"remark": "",
					"add_time": "2022-01-07T03:10:23.532Z",
					"update_time": "2022-01-07T03:10:23.532Z",
					"status": 0
				},
				// 用户信息
				userlist: [],
			}
		},
		created() {
			this.ShowRecordList()
			this.ShowUserList()
		},
		methods: {
			onSubmit() {
				this.ShowUserList()
			},
			Pages(e){
				this.recordmodel.pageIndex=e
				this.ShowRecordList()
			},
			// 删除领取记录
			Delinfo(id){
				DelRecord(id).then(res=>{
					console.log('Shanchu',res)
					if(res.data.code==200){
						this.$message.success('删除成功')
						this.ShowRecordList()
					}else{
						this.$message.error('删除失败')
					}
				})
			},
			// 提交新增或者修改
			Submits() {
				this.$refs.recordAddUpdModel.validate((valid)=>{
					if(valid){
						AddOrUpdateRecord(this.recordAddUpdModel).then(res=>{
							console.log('res返沪',res)
							if(res.data.code==200){
								this.$message.success('操作成功')
								this.ShowRecordList()
								this.dialogVisible=false
							}else{
								this.$message.error('暂无此用户ID')
							}
							this.recordAddUpdModel.id = 0
							this.recordAddUpdModel.getUser = 0
							this.recordAddUpdModel.getNum = 0
							this.recordAddUpdModel.remark = ''
							this.recordAddUpdModel.status = 0
						})
					}
				})
			},
			// 查询所有用户
			ShowUserList() {
				GetUserList(this.model).then(res => {
					console.log('res', res)
					this.userlist = res.data.data
				})
			},
			// 新增修改
			AddOrUpdRecord(obj) {
				this.dialogVisible = true
				if (obj == null) {
					// 新增
					this.recordAddUpdModel.id = 0
					this.recordAddUpdModel.getUser = 0
					this.recordAddUpdModel.getNum = 0
					this.recordAddUpdModel.remark = ''
					this.recordAddUpdModel.status = 0
				} else {
					// 修改
					this.recordAddUpdModel.id = obj.id
					this.recordAddUpdModel.getUser = obj.getUser
					this.recordAddUpdModel.getNum = obj.getNum
					this.recordAddUpdModel.remark = obj.remark
					this.recordAddUpdModel.status = obj.status
				}
			},
			// 查询所有领取记录
			ShowRecordList() {
				GetRecordList(this.recordmodel).then(res => {
					console.log('res', res)
					res.data.data.rows.forEach((item, index) => {
						item.add_time = utils.formatTime(item.add_time, "yyyy-MM-dd")
						item.update_time = utils.formatTime(item.update_time, "yyyy-MM-dd")
					})
					this.tableData = res.data.data.rows
					this.recordmodel.TotalCount = res.data.data.total
				})
			}
		}
	}
</script>

<style>
</style>
