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

    <!-- 添加黑名单 -->
    <el-dialog :title="`${ form.id ? '编辑' : '添加' }文件夹`" v-model="visible" width="650px" append-to-body>
        <p class="flex-center templateTitle">
            <span>文件夹名称：</span>
            <el-input style="flex: 1;" placeholder="请输入文件夹名称" :maxlength="5" v-model="form.folderName"></el-input>
        </p>
        <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 { getEmailFolderList, addEmailFolder, delEmailFolder } from '@/api/emails';

    const tableParams = reactive({
        tableColumn: [
            { show: true, label: '名称', prop: 'folderName' },
            {
                show: true, label: '操作', width: 100, prop: 'operation', disabledMove: true, render: ({ column }) => {
                    return [
                        h(ElButton, { link: true, type: 'primary', onClick: () => { addFolder('edit', column) } }, '编辑'),
                    ]
                }
            },
        ],
        queryParams: {},
        listFn: getEmailFolderList
    })

    interface folderVO {
        id: string | number,
        folderName: string
    }

    const visible = ref(false)
    const form = ref<folderVO>({
        id: undefined,
        folderName: ''
    })
    const addFolder = (type: string, data?: folderVO) => {
        reset()
        if(type == 'edit') {
            Object.assign(form.value, data)
        }
        visible.value = true
    }

    const buttonLoading = ref(false)
    const emailTable = ref()
    const submitForm = () => {
        if(!form.value.folderName) {
            ElMessage.error('请输入文件夹名称')
            return false
        }
        addEmailFolder(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,
            folderName: ''
        }
    }

    /** 多选框选中数据 */
    const ids = ref<(string | number)[]>([])
    const handleSelectionChange = (selection: folderVO[]) => {
        ids.value = selection.map(item => item.id)
    }

    const deleteFolder = () => {
        if(ids.value.length == 0) {
            ElMessage.error('请选择要删除的文件夹')
            return false
        }
        ElMessageBox.confirm(
            '是否确认删除当前文件夹？',
            '确认提示',
            { type: 'warning', confirmButtonText: '提交' }
        ).then(() => {
            delEmailFolder(ids.value).then(res => {
                if(res.success) {
                    ElMessage.success('删除成功')
                    emailTable.value?.getData()
                }else{
                    ElMessage.error('删除失败')
                }
            })
        }).catch(() => { })
    }
</script>
