<template>
	<a-spin :spinning="loadSpinning">
		<a-table :dataSource="dataSource" :columns="columns" :pagination="false" bordered size="middle" :scroll="{ x: 'max-content' }">
			<template #bodyCell="{ record, column }">
				<template v-if="column.dataIndex === 'subject'">
					<a-tag color="#FAAD14">{{ JSON.parse(record.configValue).subject }}</a-tag>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a-button size="small" @click="emailPreviewRef.onOpen(JSON.parse(record.configValue).content)">
							<EyeOutlined />
							预览
						</a-button>
						<a-button type="primary" size="small" @click="emailSettingRef.onOpen(record)">
							<SettingOutlined />
							配置
						</a-button>
					</a-space>
				</template>
			</template>
		</a-table>
		<email-preview ref="emailPreviewRef" />
		<email-setting ref="emailSettingRef" @successful="onSubmit" />
	</a-spin>
</template>

<script setup name="bForm">
	import { message } from 'ant-design-vue'
	import configApi from '@/api/dev/configApi'
	import { SettingOutlined, EyeOutlined } from '@ant-design/icons-vue'
	import EmailPreview from './preview.vue'
	import EmailSetting from './setting.vue'

	const emailPreviewRef = ref()
	const emailSettingRef = ref({})
	const submitLoading = ref(false)
	const loadSpinning = ref(true)
	const dataSource = ref([])
	const columns = [
		{
			title: '名称',
			dataIndex: 'remark',
			key: 'remark'
		},
		{
			title: '邮件主题',
			dataIndex: 'subject',
			key: 'subject'
		},
		{
			title: '配置',
			dataIndex: 'action',
			key: 'action'
		}
	]
	onMounted(() => {
		initData()
	})
	// 初始化数据
	const initData = () => {
		// 查询此界面的配置项,并转为表单
		const param = {
			category: 'EMAIL_TEMPLATE_FOR_B'
		}
		configApi.configList(param).then((data) => {
			loadSpinning.value = false
			if (data) {
				dataSource.value = data
			} else {
				message.warning('表单项不存在，请初始化数据库')
			}
		})
	}

	// 提交数据
	const onSubmit = (param) => {
		submitLoading.value = true
		configApi
			.configEditForm(param)
			.then(() => {
				initData()
			})
			.finally(() => {
				submitLoading.value = false
			})
	}
</script>
