<template>
    <Table
        ref="orderTable"
        :tableParams="tableParams"
        :btnRole="[]"
        :right-btn="[]"
        isEmail
        @selectionChange="handleSelectionChange"
        isCurrentChange
        @currentChange="emailContent"
    >
        <template #left>
            <el-button @click='CompletelyDel()'>彻底删除</el-button>
            <!-- <el-button>拉黑</el-button> -->
            <el-button @click='reductionEmail()'>还原</el-button>
        </template>
    </Table>
</template>

<script setup lang="ts">
    import Table from '@/components/Table/index.vue'
    import { tableTypes } from '@/components/Table/types'
    import { listEmails,completelyDelDraft,trashEmails } from '@/api/emails';
    import { EmailsVO, EmailsQuery } from '@/api/emails/types';
    import { Star,StarFilled } from "@element-plus/icons-vue"
    import SvgIcon from '@/components/SvgIcon/index.vue'
    const router = useRouter();
    const emits = defineEmits(['refresh', 'emailContent', 'delChange', 'exportMails', 'readChange'])
    const emailContent = (val: any) => {
        if(val) {
            emits('emailContent', val)
        }
    }

    const tableParams = reactive<tableTypes<EmailsQuery, EmailsVO>>({
        tableColumn: [
            {
                show: true,
                label: '收/发件人',
                prop: 'recipientName',
                sortable: false,
                render: ({column}: { column: EmailsVO }) => {
                    let name = ''
                    if(column.folder == 'INBOX') {
                        name = column.fromName || column.from
                    }else {
                        name = column.recipientName || column.recipient
                    }
                    return [
                        h('div',{style:'display:flex;align-items: center'},[
                            // h(ElIcon, [
                            //     h(column.isStar?StarFilled:Star,{
                            //         class:'star_icon',
                            //         style:column.isStar?'color:#1874ff;':'',
                            //         onClick: async () => {
                            //             // setStar(column)
                            //         }
                            //     })
                            // ]),
                            h('span', {}, name),
                        ])
                    ]
                }
            },
            {
                show: true,
                label: '主题',
                prop: 'subject',
                sortable: false,
                render: ({column}: { column: EmailsVO }) => {
                    let annex = null
                    if(column.attachmentNum) {
                        annex = h(SvgIcon, { 'iconClass': 'email-annex', style: { 'margin-right': '2px', width: '16px', height: '16px' } })
                    }
                    return [
                        h('div', { style: { display: 'flex', 'align-items': 'center' } }, [
                            annex,
                            h('div', {
                                class: 'link',
                                onClick: async ($event) => {
                                    $event.stopPropagation()
                                    const { href } = router.resolve({
                                        path: '/customer/followPanel/detail',
                                        query: {
                                            id: column.id
                                        }
                                    })
                                    window.open(href, '_blank')
                                }
                            }, column.subject)
                        ])
                    ]
                }
            },
            { show: true, label: '日期', prop: 'sentDate', sortable: false },
            { show: true, label: '大小', prop: 'emailSizeName', sortable: false },
            { show: true, label: '原文件夹', prop: 'folderName', },
        ],
        queryParams: {
            isTrash:1,
            blurry: ''
        },
        listFn: listEmails
    })

    const { queryParams } = toRefs(tableParams)

    const ids = ref([])
    const single:any = ref(0)
    /** 多选框选中数据 */
    const handleSelectionChange = (selection: EmailsVO[]) => {
        ids.value = selection.map(item => item.id);
        single.value = selection.length;
    }

    const CompletelyDel = () =>{
        if(single.value == 0){
            ElMessage.error('请选择需要删除的邮件')
        }else{
            ElMessageBox.confirm(
                '是否确认删除当前邮件？',
                '确认提示',
                { type: 'warning', confirmButtonText: '提交', }
            ).then(() => {
                completelyDelDraft(ids.value).then(res => {
                    if(res.success) {
                        ElMessage.success('邮件删除成功')
                        handleQuery()
                    }
                }).finally(() => {
                })
            }).catch(() => {})

        }
    }

    const reductionEmail = () =>{
        if(single.value == 0){
            ElMessage.error('请选择需要还原的邮件')
        }else{
            let params = {
                emailIds:ids.value,
                isTrash:0,
            }
            trashEmails(params).then(res => {
                if(res.success) {
                    ElMessage.success('邮件已还原')
                    handleQuery()
                }
            }).finally(() => {
            })
        }
    }
    /** 搜索操作 */
    const orderTable = ref()
    const handleQuery = () => {
        orderTable.value.getData()
    }

    defineExpose({
        handleQuery,
        queryParams
    })
</script>
