<!-- 消费赠券 -->
<template>
	<div class="app_main">
		<div class="card">
			<headerCard icon="xfzq" name="消费赠券" intro="达到指定消费金额赠送优惠券" />
			<div class="tab_wrap">
				<div class="row">
					<el-button type="primary" @click="DialogFormRef.show(couponType)">
						新增消费赠券
					</el-button>
				</div>
				<div class="row">
					<el-table :data="tableData.list" border stripe>
						<el-table-column prop="id" label="ID" width="80"></el-table-column>
						<el-table-column prop="title" label="名称" width="180">
							<template #default="scope">
								{{
									scope.row.couponGiftList.length &&
									scope.row.couponGiftList[0].couponName
								}}
							</template>
						</el-table-column>
						<el-table-column prop="fullAmount" label="赠券门槛" width="180">
							<template #default="scope">
								{{ `满${scope.row.fullAmount}元赠送` }}
							</template>
						</el-table-column>
						<el-table-column prop="getLimit" label="每人限量" width="180">
							<template #default="scope">
								<div v-if="scope.row.getLimit == -10086">无限</div>
								<div v-else>{{ scope.row.getLimit }}</div>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="每次赠送" width="100">
							<template #default="scope">
								{{
									scope.row.couponGiftList.length &&
									scope.row.couponGiftList[0].num
								}}
							</template>
						</el-table-column>
						<el-table-column prop="giveNum" label="总发放数量" width="180">
							<template #default="scope">
								<div v-if="scope.row.giveNum == -10086">无限</div>
								<div v-else>{{ scope.row.giveNum }}</div>
							</template>
						</el-table-column>
						<el-table-column prop="giftNum" label="已赠送" width="180">
							<template #default="scope">
								<div class="center">
									<el-text>{{ scope.row.giftNum }}</el-text>
									<el-text>|</el-text>
									<el-link type="primary" @click="GetDetailDialogRef.show(scope.row)">
										详情
									</el-link>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="leftNum" label="剩余" width="180">
							<template #default="scope">
								<div v-if="scope.row.leftNum == -10086">无限</div>
								<div v-else>{{ scope.row.leftNum }}</div>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="状态">
							<template #default="scope">
								<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
									@change="statusChange($event, scope.row)" />
							</template>
						</el-table-column>
						<el-table-column prop="createTime" label="创建时间" width="180" />
						<el-table-column prop="actions" label="操作" width="120" fixed="right">
							<template #default="scope">
								<el-button type="primary" link @click="DialogFormRef.show(couponType, scope.row)">
									编辑
								</el-button>
								<el-popconfirm title="确认要删除吗？" @confirm="deleteHandle(scope.row)">
									<template #reference>
										<el-button type="danger" link>删除</el-button>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<DialogForm ref="DialogFormRef" @success="resetPage" />
		<xfGetDetailDialog ref="GetDetailDialogRef" />
	</div>
</template>

<script setup>
import headerCard from "@/views/marketing_center/components/headerCard.vue";
import DialogForm from "./components/dialogForm.vue";
import xfGetDetailDialog from "@/views/marketing_center/components/xfGetDetailDialog.vue";
import { ref, reactive, onMounted } from "vue";
import {
	getConsumerCouponPage,
	updateConsumerCouponById,
	deleteConsumerCoupon,
} from "@/api/coupon/index.js";

const route = useRoute();

// 5=消费赠券
const couponType = ref(5);
const DialogFormRef = ref(null);
const GetDetailDialogRef = ref(null);

const tableData = reactive({
	loading: true,
	page: 1,
	pageSize: 10,
	total: 0,
	list: [],
});

// 改变状态
async function statusChange(e, row) {
	try {
		tableData.loading = true;
		await updateConsumerCouponById(row);
		getConsumerCouponPageAjax();
	} catch (err) {
		console.log(err);
	}
}

// 分页大小发生变化
function handleSizeChange(e) {
	console.log("handleSizeChange===", e);
	tableData.pageSize = e;
	resetPage();
}

// 分页发生变化
function handleCurrentChange(e) {
	console.log("handleCurrentChange===", e);
	tableData.page = e;
	resetPage();
}

// 重置列表请求
function resetPage() {
	tableData.page = 1;
	tableData.list = [];
	getConsumerCouponPageAjax();
}

// 获取消费赠券列表
async function getConsumerCouponPageAjax() {
	try {
		const res = await getConsumerCouponPage({
			id: route.query.id,
			couponType: couponType.value,
			page: tableData.page,
			size: tableData.pageSize,
		});
		tableData.total = res.totalRow;
		tableData.list = res.records;
	} catch (error) {
		console.log(error);
	}
}

// 删除
async function deleteHandle(row) {
	try {
		tableData.loading = true;
		await deleteConsumerCoupon({
			id: row.id,
		});
		getConsumerCouponPageAjax();
	} catch (err) {
		console.log(err);
	}
}

onMounted(() => {
	getConsumerCouponPageAjax();
});
</script>

<style scoped lang="scss">
.app_main {
	padding: 14px;
}

.card {
	background-color: #fff;
	padding: 14px;

	.tab_wrap {
		padding-top: 14px;

		.row {
			padding-top: 14px;
		}
	}
}

.center {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
