<template>
	<el-card shadow="never" class="list-card">
		<template #header>
			<div class="search">
				<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="90px">
					<el-form-item label="输入搜索：" prop="blurry">
						<el-input v-model="queryParams.blurry" placeholder="请输入" clearable />
					</el-form-item>
					<el-form-item label="所属模块：">
						<SelectDict v-model="queryParams.templateServiceType" placeholder="请选择" dictCode="query_work_data_group"></SelectDict>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</template>

		<Table ref="messageTemplateTable" :tableParams="tableParams" :btnRole="[]" :right-btn="[]">
		</Table>
	</el-card>

	<MessageDetail ref="messageDetailRef" @refresh="handleQuery" />
</template>

<script setup name="MessageTemplate" lang="ts">
import { listMessageTemplate, changeEnable } from '@/api/system/messageTemplate';
import { MessageTemplateVO, MessageTemplateQuery } from '@/api/system/messageTemplate/types';
import auth from '@/plugins/auth'
import Table from '@/components/Table/index.vue'
import { tableTypes } from '@/components/Table/types'
import { useDictCache } from '@/hooks/web/useDict'
import MessageDetail from './detail.vue'

const { queryDictDetailByCodes } = useDictCache(['query_work_data_group'])
queryDictDetailByCodes()

const queryFormRef = ref<ElFormInstance>();

const tableParams = reactive<tableTypes<MessageTemplateQuery, MessageTemplateVO>>({
	tableColumn: [
		{ show: true, label: '所属模块', prop: 'templateServiceName' },
		{ show: true, label: '事件', prop: 'eventName' },
		{ show: true, label: '编码', prop: 'eventCode' },
		{ show: true, label: '手机短信', prop: '', render: ({ column }: { column: MessageTemplateVO }) => {
			return handleData('sms', column)
		} },
		{ show: true, label: '企微消息', prop: '', render: ({ column }: { column: MessageTemplateVO }) => {
			return handleData('wecom', column)
		} },
		{ show: true, label: '站内信', prop: '', render: ({ column }: { column: MessageTemplateVO }) => {
			return handleData('site', column)
		} },
		{ show: true, label: '邮件', prop: '', render: ({ column }: { column: MessageTemplateVO }) => {
			return handleData('mail', column)
		} }
	],
	keyId: 'id',
	queryParams: {
		blurry: undefined,
		templateServiceType: undefined
	},
	listFn: listMessageTemplate
})

const { queryParams } = toRefs(tableParams);

const handleData = (type: string, column: MessageTemplateVO) => {
	let enabled = false
	let templateData = null
	if(column.detailEntities && column.detailEntities.length > 0) {
		templateData = column.detailEntities.find(item => item.templateDetailType == type)
		enabled = templateData?.enabled
	}
	return [
		h(ElSwitch, {
			modelValue: enabled,
			disabled: !templateData,
			style: { 'margin-right': '5px' },
			onChange: async(v) => {
				await changeEnable(templateData.id, v)
				ElMessage.success((v ? '启用' : '禁用') + '成功')
				templateData.enabled = v
			} 
		}),
		h(ElButton, { link: true, type: 'primary', onClick: () => { editContent(type, column) } }, '编辑内容')
	]
}

const messageTemplateTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
	messageTemplateTable.value.getData()
}

/** 重置按钮操作 */
const resetQuery = () => {
	queryFormRef.value?.resetFields();
	handleQuery();
}

const messageDetailRef = ref()
const editContent = (type: string, data: MessageTemplateVO) => {
	messageDetailRef.value.open(type, data.id)
}
</script>

<style scoped lang="scss">
	.el-card{
		:deep(.el-table) {
			margin-top: 5px;
			.el-button--primary.is-link{
				padding: 0
			}
		}
	}
</style>
