<template>
    <Table
        ref="emailTable"
        :tableParams="tableParams"
        :btnRole="[]"
        :right-btn="[]"
        isEmail
        @selectionChange="handleSelectionChange"
    >
        <template #left>
            <el-button @click="addBlacklist('add')">增加</el-button>
            <el-button @click="deleteBlacklist()">删除</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="请输入黑名单邮箱地址" v-model="form.emailAddress"></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 { getEmailBlackList, addEmailBlackList, delEmailBlackList } from '@/api/emails';

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

    interface blackListVO {
        id: string | number,
        emailAddress: string
    }

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

    const buttonLoading = ref(false)
    const emailTable = ref()
    const submitForm = () => {
        const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        if(!reg.test(form.value.emailAddress)) {
            ElMessage.error('请输入正确的邮箱地址')
            return false
        }
        addEmailBlackList(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,
            emailAddress: ''
        }
    }

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

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