<template>
    <Table
        ref="emailTable"
        :tableParams="tableParams"
        :btnRole="[]"
        :right-btn="[]"
        isEmail
        @selectionChange="handleSelectionChange"
    >
        <template #left>
            <el-button @click="addTemplate('add')">增加</el-button>
            <el-button @click="deleteTemplate()">删除</el-button>
        </template>
    </Table>

    <!-- 添加常用语 -->
    <el-dialog :title="`${ form.id ? '编辑' : '添加' }常用语`" v-model="visible" width="1150px" append-to-body>
        <p class="flex-center templateTitle">
            <span>常用语名称：</span>
            <el-input v-model="form.templateTitle"></el-input>
        </p>
        <ckeditor class="template_ckeditor" @sendContnet="getContent" :content="form.templateContent"></ckeditor>
        <template #footer>
			<div class="dialog-footer">
				<el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</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 { getEmailTemplateList, addEmailTemplate, delEmailTemplate } 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: 'templateTitle' },
            {
                show: true, label: '操作', width: 100, prop: 'operation', disabledMove: true, render: ({ column }) => {
                    return [
                        h(ElButton, { link: true, type: 'primary', onClick: () => { addTemplate('edit', column) } }, '编辑'),
                    ]
                }
            },
        ],
        queryParams: {
            templateType: '0'
        },
        listFn: getEmailTemplateList
    })

    interface templateVO {
        id: string | number,
        templateTitle: string,
        templateContent: string,
        templateType: string
    }

    const visible = ref(false)
    const form = ref<templateVO>({
        id: undefined,
        templateTitle: '',
        templateContent: '',
        templateType: '0'
    })
    const addTemplate = (type: string, data?: templateVO) => {
        reset()
        if(type == 'edit') {
            Object.assign(form.value, data)
        }
        visible.value = true
    }

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

    const buttonLoading = ref(false)
    const emailTable = ref()
    const submitForm = () => {
        addEmailTemplate(form.value).then(res => {
            if(res.success) {
                ElMessage.success((form.value.id ? '编辑' : '添加') + '成功')
                emailTable.value?.getData()
                cancel()
            }
        })
    }

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

    const reset = () => {
        form.value = {
            id: undefined,
            templateTitle: '',
            templateContent: '',
            templateType: '0'
        }
    }

    /** 多选框选中数据 */
    const ids = ref<(string | number)[]>([])
    const handleSelectionChange = (selection: templateVO[]) => {
        ids.value = selection.map(item => item.id)
    }
    const deleteTemplate = () => {
        if(ids.value.length == 0) {
            ElMessage.error('请选择要删除的常用语')
            return false
        }
        ElMessageBox.confirm(
            '是否确认删除当前常用语？',
            '确认提示',
            { type: 'warning', confirmButtonText: '提交' }
        ).then(() => {
            delEmailTemplate(ids.value).then(res => {
                if(res.success) {
                    ElMessage.success('删除成功')
                    emailTable.value?.getData()
                }else{
                    ElMessage.error('删除失败')
                }
            })
        }).catch(() => { })
    }
</script>

<style scoped lang="scss">
    .templateTitle{
        margin-bottom: 12px;
        .el-input{
            flex: 1;
        }
    }
    .template_ckeditor{
        :deep(.cke){
            height: 450px;
        }
    }
</style>
