<template>
	<div>
		<el-dialog title="已关联功能" v-model="dialogVisible">
			<el-tabs v-model="tableData.type" @tab-change="tabChange">
				<el-tab-pane label="会员开通赠券" :name="1"></el-tab-pane>
				<el-tab-pane label="会员周活动" :name="2"></el-tab-pane>
				<el-tab-pane label="消费赠券" :name="3"></el-tab-pane>
				<el-tab-pane label="券兑换码" :name="8"></el-tab-pane>
				<el-tab-pane label="口令兑换活动" :name="9"></el-tab-pane>
			</el-tabs>
			<el-table :data="tableData.list" border stripe v-loading="tableData.loading">
				<el-table-column label="关联" prop="sourceName"></el-table-column>
				<el-table-column label="路径" prop="name">
					<template #default="scope">
						{{ props.name }}
					</template>
				</el-table-column>
				<!-- <el-table-column label="描述" prop="id"></el-table-column> -->
				<el-table-column label="数量" prop="num"></el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button type="primary" link @click="linkTo(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 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>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { relevanceCoupon, delRelevanceCoupon } from "@/api/coupon/index.js";

const router = useRouter();
const props = defineProps({
	name: {
		type: String,
		default: "",
	},
});

const dialogVisible = ref(false);
const row = ref(null);

const tableData = reactive({
	loading: false,
	type: 1,
	page: 1,
	pageSize: 10,
	total: 0,
});

// 跳转查看
function linkTo(e) {
	const links = {
		1: "", // 会员开通赠券
		2: "", // 会员周活动
		3: "consume_ticket", // 消费赠券
		8: "", // 券兑换码
		9: "", // 口令兑换活动
	};
	router.push({
		name: links[tableData.type],
		query: {
			id: e.sourceId,
		},
	});
}

// 取消关联
async function deleteHandle(e) {
	try {
		tableData.loading = true;
		await delRelevanceCoupon({
			id: e.id,
		});
		relevanceCouponAjax();
	} catch (error) {
		console.log(error);
	}
}

// 切换选项
function tabChange(t) {
	console.log(t);
	relevanceCouponAjax();
}

// 分页大小发生变化
function handleSizeChange(e) {
	tableData.pageSize = e;
	relevanceCouponAjax();
}

// 分页发生变化
function handleCurrentChange(e) {
	tableData.page = e;
	relevanceCouponAjax();
}

// 获取关联数据
async function relevanceCouponAjax() {
	try {
		tableData.loading = true;
		const res = await relevanceCoupon({
			couponId: row.value.id,
			type: tableData.type,
			page: tableData.page,
			size: tableData.pageSize,
		});

		tableData.total = res.totalRow;
		tableData.list = res.records;
	} catch (error) {
		console.log(error);
	}
	tableData.loading = false;
}

function show(obj = null) {
	row.value = { ...obj };
	dialogVisible.value = true;
	tableData.loading = false;
	relevanceCouponAjax();
}

defineExpose({
	show,
});
</script>

<style scoped lang="scss">
.row {
	padding-top: 14px;
}
</style>
