<template>
    <Table
        ref="emailTable"
        :tableParams="tableParams"
        :btnRole="[]"
        :right-btn="[]"
        isEmail
        :isCheckbox="false"
    >
    </Table>

    <!-- 设置 -->
    <el-dialog title="自动回复设置" v-model="visible" width="1150px" append-to-body>
        <el-radio-group v-model="form.autoReplyStatus">
            <el-radio :value="0" label="不使用"></el-radio>
            <el-radio :value="1" label="使用自动回复"></el-radio>
        </el-radio-group>
        <div style="margin: 15px 0" class="flex-center">
            <span>标题：</span>
            <el-input v-model="form.replyTitle" style="flex: 1"></el-input>
        </div>
        <ckeditor class="template_ckeditor" @sendContnet="getContent" :content="form.replyContent"></ckeditor>
        <el-alert :closable="false" type="warning" show-icon style="margin-top: 15px">
            <template #title>
                <span style="color: rgba(0,0,0,0.65);">
                    注意：使用自动回复后，当你收到来信时，系统会自动回复你设置的内容给对方
                </span>
            </template>
        </el-alert>
        <template #footer>
			<div class="dialog-footer">
				<el-button :loading="buttonLoading" type="primary" @click="submitForm()">提 交</el-button>
				<el-button @click="clear">清 空</el-button>
                <el-button @click="cancel">取 消</el-button>
			</div>
		</template>
    </el-dialog>
</template>

<script lang="ts" setup>
    import Table from '@/components/Table/index.vue'
    import { listEmailsSetting, setAutomaticReply } from '@/api/emails';
    import ckeditor from '@/components/ckeditor/index.vue'

    const tableParams = reactive({
        tableColumn: [
            { show: true, label: '序号', prop: 'no', width: 80, render: ({ index }) => {
                return index + 1
            } },
            { show: true, label: '邮箱', prop: 'emailAddress' },
            { show: true, label: '标题', prop: 'replyTitle' },
            { show: true, label: '内容', prop: 'replyContent', render: ({ column }) => {
                return column.replyContent?.replace(/<[^>]*>/g, '')
            }},
            {
                show: true, label: '状态', prop: 'isAutoReply', render: ({ column }) => {
                    return [
                        h(ElSwitch, {
                            modelValue: column.isAutoReply == 1, onChange: async (v: boolean) => {
                                enableChange(v, column)
                            }
                        }),
                    ]
                }
            },
            {
                show: true, label: '操作', width: 100, prop: 'operation', disabledMove: true, render: ({ column }) => {
                    return [
                        h(ElButton, { link: true, type: 'primary', onClick: () => { addautomaticReply(column) } }, '设置'),
                    ]
                }
            },
        ],
        queryParams: {},
        listFn: listEmailsSetting
    })

    interface templateVO {
        id: string | number,
        autoReplyStatus: number | boolean,
        replyContent?: string,
        isAutoReply?: number | boolean,
        replyTitle: string
    }

    const visible = ref(false)
    const form = ref<templateVO>({
        id: undefined,
        autoReplyStatus: 0,
        replyContent: '',
        replyTitle: ''
    })
    const addautomaticReply = (data: templateVO) => {
        form.value = {
            id: data.id,
            autoReplyStatus: data.isAutoReply,
            replyContent: data.replyContent,
            replyTitle: data.replyTitle
        }
        visible.value = true
    }

    const getContent = (val: string) => {
        form.value.replyContent = val
    }

    const enableChange = (v: boolean | number, data: templateVO) => {
        form.value = {
            id: data.id,
            autoReplyStatus: v ? 1 : 0,
            replyContent: data.replyContent,
            replyTitle: data.replyTitle
        }
        submitForm(v, data)
    }

    const buttonLoading = ref(false)
    const emailTable = ref()
    const submitForm = (v?: number | boolean, data?: templateVO) => {
        if(!form.value.replyContent || !form.value.replyTitle) {
            ElMessage.error('标题与内容不能为空')
            return false
        }
        setAutomaticReply(form.value).then(res => {
            if(res.success) {
                ElMessage.success('设置成功')
                if(data) {
                    data.isAutoReply = v
                }
                emailTable.value?.getData()
                cancel()
            }
        })
    }

    const clear = () => {
        form.value.replyContent = ''
    }

    const cancel = () => {
        visible.value = false
    }
</script>

<style scoped lang="scss">
    .template_ckeditor{
        :deep(.cke){
            height: 450px;
        }
    }
</style>