<template>
	<div class="app_main">
		<div class="card">
			<headerCard icon="myzy" name="买一送一券" intro="针对营销活动买一送一设置券品。" />
			<div class="tab_wrap">
				<div class="row">
					<el-button type="primary" @click="CouponDialogRef.show(couponType)">
						添加买一送一券
					</el-button>
				</div>
				<div class="row">
					<el-table :data="tableData.list" border stripe v-loading="tableData.loading">
						<el-table-column prop="id" label="ID" width="80" />
						<el-table-column prop="title" label="名称" width="180" />
						<el-table-column prop="validStartTime" label="有效期" width="320">
							<template #default="scope">
								<div v-if="scope.row.validType == 'fixed'">
									领券后{{ scope.row.validDays }}天过期
								</div>
								<div v-else>
									{{ scope.row.validStartTime }} - {{ scope.row.validEndTime }}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="getMode" label="用户领取方式" width="180">
							<template #default="scope">
								<div v-if="scope.row.getType == 'no'">
									<el-text>用户不可自行领取</el-text>
								</div>
								<div class="column" v-else>
									<div v-for="item in getModeFilter(scope.row.getMode)">
										<el-tag :type="item.type" disable-transitions>
											{{ item.label }}
										</el-tag>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="giveNum" label="总发放数量" width="100">
							<template #default="scope">
								{{ scope.row.giveNum == -10086 ? "无限" : scope.row.giveNum }}
							</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="useNum" label="已使用" width="180" />
						<el-table-column prop="leftNum" label="剩余" width="180">
							<template #default="scope">
								<template v-if="scope.row.giveNum == -10086">无限</template>
								<template v-else>{{ scope.row.leftNum }}</template>
							</template>
						</el-table-column>
						<el-table-column prop="" label="已关联功能" width="180">
							<template #default="scope">
								<el-link type="primary" @click="RelevanceDialogRef.show(scope.row)">
									查看
								</el-link>
							</template>
						</el-table-column>
						<el-table-column prop="status" label="启用状态" width="100">
							<template #default="scope">
								<el-switch
									v-model="scope.row.status"
									:active-value="1"
									:inactive-value="0"
									:disabled="!!scope.row.syncId"
									@change="statusChange($event, scope.row)"
								/>
							</template>
						</el-table-column>
						<el-table-column prop="createTime" label="创建时间" width="180" />
						<el-table-column
							prop="actions"
							label="操作"
							align="center"
							width="140"
							fixed="right"
						>
							<template #default="scope">
								<template v-if="!scope.row.syncId">
									<el-button
										type="primary"
										link
										@click="CouponDialogRef.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>
								<template v-else>
									<el-button
										type="primary"
										link
										@click="CouponDialogRef.show(couponType, scope.row)"
									>
										详情
									</el-button>
									<el-button type="danger" disabled link>删除</el-button>
								</template>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="row">
					<el-pagination
						v-model:current-page="tableData.page"
						v-model:page-size="tableData.pageSize"
						:page-sizes="[100, 200, 300, 400]"
						background
						layout="total, sizes, prev, pager, next, jumper"
						:total="tableData.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</div>
		<CouponDialog ref="CouponDialogRef" @success="resetPage" />
		<RelevanceDialog ref="RelevanceDialogRef" name="营销中心/买一送一券" />
		<GetDetailDialog ref="GetDetailDialogRef" />
	</div>
</template>

<script setup>
import headerCard from "@/views/marketing_center/components/headerCard.vue";
import CouponDialog from "@/views/marketing_center/components/couponDialog.vue";
import RelevanceDialog from "@/views/marketing_center/components/relevanceDialog.vue";
import GetDetailDialog from "@/views/marketing_center/components/getDetailDialog.vue";
import { ref, reactive, onMounted } from "vue";
import { couponPage, addCoupon, delCoupon } from "@/api/coupon/index.js";

const CouponDialogRef = ref(null);
const RelevanceDialogRef = ref(null);
const GetDetailDialogRef = ref(null);
const couponType = ref(6); // 重要类型，优惠券类型
const tableData = reactive({
	loading: true,
	page: 1,
	pageSize: 10,
	total: 0,
	list: [],
});

// 返回新的领取方式数组
function getModeFilter(arrStr) {
	let arr = JSON.parse(arrStr);
	const m = [
		{
			value: "home",
			label: "首页-优惠券",
			type: "primary",
		},
		{
			value: "eat",
			label: "点餐页-自动弹出",
			type: "success",
		},
		{
			value: "order",
			label: "订单支付页面",
			type: "warning",
		},
	];
	return m.filter((item) => arr.includes(item.value));
}

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

// 删除
async function deleteHandle(row) {
	try {
		tableData.loading = true;
		await delCoupon({
			id: row.id,
			type: 0,
		});
		couponPageAjax();
	} 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 = [];
	couponPageAjax();
}

// 获取优惠券分页
async function couponPageAjax() {
	try {
		tableData.loading = true;
		const res = await couponPage({
			couponType: couponType.value,
			page: tableData.page,
			size: tableData.pageSize,
		});
		tableData.total = res.totalRow;
		tableData.list = res.records;
	} catch (err) {
		console.log(err);
	}
	tableData.loading = false;
}

onMounted(() => {
	couponPageAjax();
});
</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;
}
.column {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
</style>
