<template>
    <Table
        ref="orderTable"
        :tableParams="tableParams"
        :btnRole="[]"
        :right-btn="[]"
        isEmail
        @selectionChange="handleSelectionChange"
    >
        <template #left>
            <el-button @click="download()">下载</el-button>
            <!-- <el-dropdown style='margin-left:12px'>
                <el-button>
                    筛选<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="item in dropdownItem" @click="changeFileExt(item.value)">{{ item.label }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
            <div class="flex-center" style="width: 200px;margin-left: 10px;">
                <p style="white-space: nowrap;">筛选：</p>
                <el-select v-model="queryParams.fileExt" @change="handleQuery">
                    <el-option v-for="item in dropdownItem" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
        </template>
    </Table>
</template>

<script setup lang="ts">
    import Table from '@/components/Table/index.vue'
    import { tableTypes } from '@/components/Table/types'
    import { attachmentEmails,downloadZip } from '@/api/emails';
    import { EmailsVO, EmailsQuery } from '@/api/emails/types';
    import downloadPlugins from '@/plugins/download'
    const router = useRouter();
    const emits = defineEmits(['refresh', 'emailContent', 'delChange', 'exportMails', 'readChange'])

    const tableParams = reactive<tableTypes<EmailsQuery, EmailsVO>>({
        tableColumn: [
            { show: true, label: '文件名', prop: 'fileName' },
            {
                show: true,
                label: '大小',
                prop: 'fileSizeName',
             },
            { show: true, label: '日期', prop: 'sentDate', sortable: false },
        ],
        queryParams: {
            fileExt: '',
            blurry: ''
        },
        listFn: attachmentEmails
    })

    const { queryParams } = toRefs(tableParams);

    const dropdownItem = ref([
        { label: '全部', value: '' },
        { label: '文档', value: 'docx' },
        { label: '压缩包', value: 'zip' },
        { label: '图片', value: 'png' },
        { label: '多媒体', value: 'video' },
        { label: '其他', value: 'other' },
    ])

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

    const download = () =>{
        if(single.value==0){
            ElMessage.error('请选择需要下载的附件')
        }else{
            downloadZip({ attachmentIds: ids.value }).then(res => {
                if(res) {
                    downloadPlugins.download('download', res)
                }else {
                    ElMessage.error('下载失败，请稍后再试')
                }
            })
        }

    }

    const orderTable = ref()
    const handleQuery = () => {
        orderTable.value.getData()
    }

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