<template>
	<div>
		<el-dialog title="优惠券" v-model="visible" width="1200px" @closed="resetHandle">
			<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" :loading="loading">搜索</el-button>
				</el-form-item>
			</el-form>
			<el-table style="width: 100%" :data="tableData" stripe border v-loading="loading">
				<el-table-column prop="id" label="券ID" width="80" />
				<el-table-column prop="name" label="券名称" width="250" />
				<!-- <el-table-column prop="type" label="券类型" /> -->
				<el-table-column prop="createTime" label="领取时间" width="250" />
				<el-table-column prop="useTime" label="使用时间" width="250" />
				<el-table-column prop="source" label="领取来源" width="150" />
				<el-table-column prop="status" label="状态">
					<template #default="scope">
						<el-tag disable-transitions :type="status.find(item => item.value === scope.row.status).type">
							{{status.find(item => item.value === scope.row.status).label}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80" fixed="right">
					<template #default="scope">
						<!-- <el-button link type="primary" @click="">查看</el-button> -->
						<el-popconfirm title="确认要失效吗？" @confirm="deleteCoupon(scope.row)">
							<template #reference>
								<el-button type="danger" link icon="EditPen">失效</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 14px;display: flex;justify-content: flex-end;">
				<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" />
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import couponApi from "@/api/market/coupon";
import { ref, reactive } from "vue";

const status = reactive([
	{ label: "全部", value: "", type: 'info' },
	{ label: "未使用", value: 0, type: 'warning' },
	{ label: "已使用", value: 1, type: 'info' },
	{ label: "已过期", value: 2, type: 'info' },
]);

const visible = ref(false);
const form = reactive({
	status: '',
	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 resetHandle() {
	form.status = '';
	form.name = "";
	form.date = "";
	form.shopUserId = "";
	pagination.page = 1;
	tableData.value = [];
}

function close() {
	visible.value = false;
}

function handleSearch() {
	getList()
}

const loading = ref(false)
async function getList() {
	try {
		loading.value = true
		const res = await couponApi.getRecordByUser({ ...form, ...pagination })
		tableData.value = res.records;
		pagination.total = res.totalRow;
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		loading.value = false
	}, 300);
}

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