<template>
    <!--弹窗-->
    <el-dialog v-model="dialogVisible" title="设置接收消息" width="60%" top="5vh" append-to-body>
        <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 #footer>
            <el-button @click="dialogVisible = false">关闭</el-button>
        </template>
    </el-dialog>

</template>

<script setup name="MessageTemplate" lang="ts">
import {listPageBuUserSet, changeEnable, setMessageConfig} from '@/api/system/messageTemplate';
import { ElButton, ElSwitch, ElMessage } from 'element-plus';
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 '@/views/system/messageTemplate/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: listPageBuUserSet
})

const { queryParams } = toRefs(tableParams);

const handleData = (type: string, column: MessageTemplateVO) => {
    //默认全部放开
	let enabled = true
	let templateData = null
	if(column.userDetails && column.userDetails.length > 0) {
		templateData = column.userDetails.find(item => item.templateEventId == column.id && item.templateDetailType == type)
        //找到对应的配置就按照对应的配置显示
        if(templateData) {
            enabled = templateData?.enabled
        }
    }
	return [
		h(ElSwitch, {
			modelValue: enabled,
			style: { 'margin-right': '5px' },
			onChange: async(v: boolean) => {
			    let param = {
                    templateEventId: column.id,
                    templateDetailType: type,
                    enabled: v,
                    id: templateData ? templateData.id : undefined
                }
                if(templateData) {
                    templateData.enabled = v
                } else {
                    column.userDetails.push(param)
                }

				await setMessageConfig(param)
				ElMessage.success((v ? '启用' : '禁用') + '成功')
                // handleQuery()
			}
		}),
	]
}

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

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


const openSetting = () => {
    dialogVisible.value = true
}

defineExpose({
    openSetting

})
const dialogVisible = ref();

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>
