<template>
	<div>
		<el-form inline>
			<el-form-item label="用户ID">
				<el-input v-model="query.userId" placeholder="请输入用户ID" />
			</el-form-item>
			<el-form-item label="记录ID">
				<el-input v-model="query.discSpinningRecordId" placeholder="请输入抽奖记录id" />
			</el-form-item>
			<el-form-item label="用户名">
				<el-input v-model="query.userName" placeholder="请输入用户名" />
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="query.phone" placeholder="手机号" />
			</el-form-item>
			<el-form-item label="奖品名称">
				<el-input v-model="query.prizeName" placeholder="请输入奖品名称" />
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="query.status">
					<el-option label="全部" value=""></el-option>
					<el-option label="待发放" value="0"></el-option>
					<el-option label="已发放" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="日期">
				<el-date-picker v-model="timeValue" type="datetimerange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" @change="changeTime" :default-time="['00:00:00', '23:59:59']">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryHandle">查询</el-button>
				<el-button @click="resetHandle">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="tableData.loading" :data="tableData.list" border stripe>
			<el-table-column label="用户ID" prop="userId"></el-table-column>
			<el-table-column label="记录ID" prop="discSpinningRecordId"></el-table-column>
			<el-table-column label="用户名" prop="userName"></el-table-column>
			<el-table-column label="手机号" prop="phone"></el-table-column>
			<el-table-column label="奖品名称" prop="prizeName"></el-table-column>
			<el-table-column label="状态" prop="status">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.status == 1" disable-transitions>
						已发放
					</el-tag>
					<el-tag type="warning" v-if="scope.row.status == 0" disable-transitions>
						待发放
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="createTime"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="deliverHandle(scope.row)" v-if="scope.row.status == 0">
						发放
					</el-button>
					<span v-else>已发放</span>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 40]" :page-size="tableData.limit" :current-page="tableData.page"
				layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
			</el-pagination>
		</div>
		<el-dialog title="发放奖品" width="600px" :visible.sync="visible" @close="onClose">
			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="地址" prop="address">
					<el-input v-model="form.address" 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="remark">
					<el-input v-model="form.remark" placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer" style="display: flex; justify-content: flex-end;">
					<el-button size="small" @click="visible = false"> 取 消 </el-button>
					<el-button size="small" type="primary" :loading="confirmLoading"
						@click="confirmHandle">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import {
	userPrizeExchangePage,
	userPrizeExchangeDeliver
} from "@/api/renwu-record.js";
export default {
	data() {
		return {
			timeValue: [],
			query: {
				userId: "",
				discSpinningRecordId: "",
				userName: "",
				prizeName: "",
				status: "",
				phone: "",
				beginDate: "",
				endDate: ""
			},
			resetQuery: {},
			tableData: {
				page: 1,
				limit: 10,
				total: 0,
				list: [],
				loading: false
			},
			visible: false,
			confirmLoading: false,
			form: {
				id: "",
				address: "",
				remark: "",
				phone: ""
			},
			rules: {
				address: [
					{ required: true, message: "请输入地址", trigger: "blur" }
				],
				phone: [
					{ required: true, message: "请输入正确的手机号", trigger: "blur", pattern: /^(?:(?:\+|00)86)?1\d{10}$/ }
				]
			}
		};
	},
	mounted() {
		this.resetQuery = { ...this.query };
		this.userPrizeExchangePage();
	},
	methods: {
		// 关闭弹窗, 重置表单
		onClose() {
			this.$refs.form.resetFields();
		},
		// 打开发放奖品弹窗
		deliverHandle(row) {
			this.form.id = row.id;
			this.visible = true;
		},
		// 提交发放奖品
		confirmHandle() {
			this.$refs.form.validate(async valid => {
				if (valid) {
					this.confirmLoading = true;
					try {
						const { data } = await userPrizeExchangeDeliver(this.form);
						if (data.code == 0) {
							this.$message.success("发放成功");
							this.visible = false;
							this.userPrizeExchangePage();
						} else {
							this.$message.error(data.msg || "发放失败");
						}
					} catch (error) {
						console.log(error);
					}
					this.confirmLoading = false;
				}
			});
		},
		// 开始查询
		queryHandle() {
			this.page = 1;
			this.userPrizeExchangePage();
		},
		// 重置查询
		resetHandle() {
			this.query = { ...this.resetQuery };
			this.timeValue = [];
			this.userPrizeExchangePage();
		},
		// 确认选择日期
		changeTime() {
			if (this.timeValue.length == 2) {
				this.query.beginDate = this.timeValue[0];
				this.query.endDate = this.timeValue[1];
			} else {
				this.query.beginDate = "";
				this.query.endDate = "";
			}
		},
		// 分页数量
		handleSizeChange(size) {
			this.tableData.limit = size;
			this.userPrizeExchangePage();
		},
		// 分页
		handleCurrentChange(val) {
			this.tableData.page = val;
			this.userPrizeExchangePage();
		},
		// 获取列表
		async userPrizeExchangePage() {
			try {
				this.tableData.loading = true;
				const { data } = await userPrizeExchangePage({
					...this.query,
					page: this.tableData.page,
					limit: this.tableData.limit
				});
				this.tableData.loading = false;
				this.tableData.list = data.page.list;
				this.tableData.total = data.page.totalCount;
			} catch (error) {
				this.tableData.loading = false;
				console.log(error);
			}
		}
	}
};
</script>
