<template>
    <div class="page">
        <div class="title">{{ title }}</div>
        <div class="query adfacjb">
            <el-select v-model="queryParams.templateId" placeholder="邮件模板" style="width: 100%;flex: 1;padding-right: 20px;" @change="getList">
                    <el-option v-for="item in useAgentStore().emailModelList" :label="item.name" :value="item.id"></el-option>
                </el-select>
            <el-input placeholder="收件人" v-model="queryParams.mailTo" style="flex: 1;padding-right: 20px;" @keyup.enter.native="getList"></el-input>
            <el-select v-model="queryParams.status" placeholder="状态" style="flex: 1;padding-right: 20px;" @change="getList">
                <el-option label="发送成功" :value="1"></el-option>
                <el-option label="发送失败" :value="0"></el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDeleteMore">删除</el-button>
        </div>
        <div class="content">
            <el-table ref="multipleTable" @selection-change="handleSelectionChange" :data="sendlList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无发送记录" max-height="578px">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column label="模板ID" prop="templateId" sortable></el-table-column>
                <el-table-column label="发送者" prop="mailFrom"></el-table-column>
                <el-table-column label="收件人" prop="mailTo">
                    <template #default="scope">
                        {{JSON.parse(scope.row.mailTo)&&JSON.parse(scope.row.mailTo)[0]||''}}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="抄送" prop="mailCc"></el-table-column> -->
                <el-table-column label="主题" prop="subject"></el-table-column>
                <el-table-column label="状态" prop="status" sortable>
                    <template #default="scope">
                        {{ scope.row.status === 1 ? '发送成功' : '发送失败' }}
                    </template>
                </el-table-column>
                <el-table-column label="发送时间" prop="createDate" sortable></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button link type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="display: flex;justify-content: center;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.page"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    v-show="total > 0">
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script setup name="">
    import { ref, getCurrentInstance, onMounted } from 'vue'
    import { getSendRecordList,deleteSendRecord } from '@/api/agent'
    const { proxy } = getCurrentInstance();
    import {useAgentStore} from "@/store_v3/modules/agent";
    useAgentStore().getEmailModelData();
    const title = proxy.$route.meta.title;
    
    const queryParams = ref({
        templateId: '',
        mailTo: '',
        status: ''
    })

    const sendlList = ref([])
    const total = ref(0)
    const loading = ref(false)
    const multipleSelection = ref([])

    const handleSelectionChange = (val) => {
        multipleSelection.value = val;
    }

    const handleSizeChange = (val) => {
        queryParams.value.limit = val;
        getList();
    }
    const handleCurrentChange = (val) => {
        queryParams.value.page = val;
        getList();
    }
    const getList = () => {
        loading.value = true;
        getSendRecordList(queryParams.value).then(res=>{
            sendlList.value = res.data.list;
            total.value = res.data.total;
            loading.value = false;
        })
    }
    const handleDeleteMore = async () => {
        if(multipleSelection.value.length === 0) return proxy.$modal.msgError("请选择要删除的数据");
        await proxy.$modal.confirm('确认删除选中的数据吗？');
        const ids = multipleSelection.value.map(item=>item.id);
        deleteSendRecord(ids).then(res=>{
            if(res.code === 0) proxy?.$modal.msgSuccess("删除成功");
            else return proxy?.$modal.msgError(res.msg);
            getList();
        });
    }
    const handleDelete = async (row) => {
        await proxy.$modal.confirm('确认删除该条发送记录吗？');
        deleteSendRecord([row.id]).then(res=>{
            if(res.code === 0) proxy?.$modal.msgSuccess("删除成功");
            else return proxy?.$modal.msgError(res.msg);
            getList();
        });
    }
    
    onMounted(()=>{
        getList();
    })
</script>

<style scoped lang="scss">
    ::v-deep .queryInput .el-input__inner{
        border: none !important;
        height: 30px !important;
        line-height: 30px !important;
        padding: 0 !important;
        width: 200px !important;
    }

    .query{
        width: 100%;
        padding: 16px 20px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #F3F4F6;
        margin-top: 31px;
    }

    
    .page{
        padding: 28px 16px 12px;
        background: #FAFAFA;
        .title{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #111111;
            line-height: 16px;
        }

        
        .content{
            width: 100%;
            height: calc(100vh - 170px);
            background: #FFFFFF;
            border: 1px solid #F3F4F6;
            margin-top: 5px;
        }
    }
</style>