<template>
	<xn-form-container
		title="蛋糕券"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>

		<a-form ref="formRef" :model="formData" layout="vertical">
			<s-table
				ref="tableRef"
				:columns="columns"
				:data="loadData"
				:alert="false"
				:showPagination="true"
				bordered
				:row-key="(record) => record.id"
			>
				<template #operator class="table-operator">
					<a-space>
						<a-button type="primary" @click="configFormRef.onOpen(planId,'')" v-if="hasPerm('couponConfigAdd')">
							<template #icon>
								<plus-outlined />
							</template>
							新增
						</a-button>
					</a-space>
				</template>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'couponType'">
						{{ $TOOL.dictTypeData('coupon_type', record.couponType) }}
					</template>
					<template v-if="column.dataIndex === 'action'">
						<a-space>
							<a @click="configFormRef.onOpen(planId,record)" v-if="hasPerm('couponConfigEdit')">编辑</a>
							<a-divider type="vertical" v-if="hasPerm(['couponConfigEdit', 'couponConfigDelete'], 'and')" />
							<a-popconfirm title="确定要删除吗？" @confirm="deleteCouponConfig(record)">
								<a-button type="link" danger size="small" v-if="hasPerm('couponConfigDelete')">删除</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</template>
			</s-table>

		</a-form>
		<Config ref="configFormRef" @successful="tableRef.refresh()" />
	</xn-form-container>

</template>

<script setup name="messageDetail">
	import consumptionRecordApi from '@/api/biz/consumptionRecordApi'
	import bizUserApi from "@/api/biz/bizUserApi";
	import {cloneDeep} from "lodash-es";
	import couponConfigApi from "@/api/biz/couponConfigApi";
	const receiveInfoList = ref([])
	const emit = defineEmits({ successful: null })
	import Config from './config.vue'

	// 默认是关闭状态
	const visible = ref(false)
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const tableRef = ref()
	const configFormRef = ref()
	const columns = [
		{
			title: '蛋糕券',
			dataIndex: 'couponAmount',
			align: 'center',
		},
		{
			title: '蛋糕券类型',
			dataIndex: 'couponType',
			align: 'center',
		},
		{
			title: '蛋糕券数量',
			dataIndex: 'couponNum',
			align: 'center',
		},
	]
	columns.push({
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: 200
	})

	const planId = ref()
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
			planId.value = formData.value.id
		}
	}

	const loadData = () => {
		let param = {
			rechargePlanId: formData.value.id,
		}
		return couponConfigApi.couponConfigPage(param).then((res) => {
			return res
		})
	}
	// 关闭抽屉
	const onClose = () => {
		receiveInfoList.value = []
		visible.value = false
		emit('successful')
	}

	// 删除
	const deleteCouponConfig = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		couponConfigApi.couponConfigDelete(params).then(() => {
			tableRef.value.refresh(true)
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>
