<template>
	<div>
		<el-dialog title="优惠券" v-model="visible" width="80%">
			<el-form :inline="true" :model="form">
				<el-form-item label="券名称">
					<el-input v-model="form.name" placeholder="请输入券名称"></el-input>
				</el-form-item>

				<el-form-item label="状态">
					<el-select v-model="form.status" placeholder="请选择" style="width: 140px">
						<el-option
							v-for="item in status"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="领取时间">
					<el-date-picker
						v-model="form.date"
						type="daterange"
						value-format="yyyy-MM-dd"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
				</el-form-item>
			</el-form>

			<el-table
				style="width: 100%"
				:data="tableData"
				:columns="columns"
				:pagination="pagination"
				:row-key="getRowKey"
			>
				<el-table-column prop="id" label="券ID" />
				<el-table-column prop="name" label="券名称" />
				<!-- <el-table-column prop="type" label="券类型" /> -->
				<el-table-column prop="createTime" label="领取时间" />
				<el-table-column prop="useTime" label="使用时间" />
				<el-table-column prop="source" label="领取来源" />
				<el-table-column label="操作">
					<template #default="scope">
						<el-link :underline="false" type="primary" size="mini">查看</el-link>
						<el-link
							:underline="false"
							type="danger"
							class="ml-4"
							@click="deleteCoupon(scope.row)"
							size="mini"
						>
							删除
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-model:current-page="pagination.page"
				v-model:page-size="pagination.size"
				:total="pagination.total"
				layout="total, sizes, prev, pager, next, jumper"
				@current-change="getList"
				@size-change="getList"
			/>
		</el-dialog>
	</div>
</template>

<script setup>
import couponApi from "@/api/market/coupon";

import { ref, reactive } from "vue";
const status = [
	{ label: "全部", value: "" },
	{ label: "未使用", value: 0 },
	{ label: "已使用", value: 1 },
	{ label: "已过期", value: 2 },
];
const visible = ref(false);
const form = reactive({
	status: 0,
	name: "",
	date: "",
	shopUserId: "",
	page: 1,
});
const tableData = ref([]);
const pagination = reactive({
	total: 0,
	size: 10,
	page: 1,
});
function open(data) {
	console.log(data);
	form.shopUserId = data.id;
	pagination.page = 1;
	visible.value = true;
	getList();
}
function close() {
	visible.value = false;
}
function getList() {
	couponApi.getRecordByUser({ ...form, ...pagination }).then((res) => {
		console.log(res);
		tableData.value = res.records;
		pagination.total = res.totalRow;
	});
}

function deleteCoupon(row) {
	couponApi
		.delete({
			id: row.id,
		})
		.then((res) => {
			if (res.code === 200) {
				ElMessage.success("删除成功");
				getList();
			}
		});
}
defineExpose({
	open,
	close,
});
</script>
