<script setup name="SendEmailLog">
import {ref,reactive} from 'vue'
import apiReportEn from '@/api/reportEn'
import { useRoute } from 'vue-router'
import { showToast } from 'vant'

const route=useRoute()

const listState = reactive({
    list:[],
    page:0,
    pageSize:20,
    finished:false,
    loading:false
})

async function getLogList(){
    const res=await apiReportEn.sendEmailLogList({
        ReportId:Number(route.query.id),
        CurrentIndex:listState.page,
        PageSize:listState.pageSize,
    })
    if(res.Ret===200){
        listState.loading=false
        if(!res.Data){
            listState.finished=true
            return
        }
        
        listState.finished=res.Data?.Paging.IsEnd
        const arr=res.Data?.List||[]
        listState.list=[...listState.list,...arr]
    }
}
function onLoad(){
    listState.page++
    getLogList()
}

function handleConfirmResendEmail(){
    apiReportEn.emailResend({
        SendId:0,
        ReportId: Number(route.query.id)
    }).then(res=>{
        if(res.Ret===200){
            showToast(res.Msg)
            listState.page=1
            listState.finished=false
            listState.list=[]
            getLogList()
        }
    })
}
</script>

<template>
    <div class="send-email-log-page">
        <van-list
            v-model:loading="listState.loading"
            :finished="listState.finished"
            :finished-text="listState.list.length>0?'没有更多了':'暂无日志记录'"
            @load="onLoad"
        >
            <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
            <ul class="list-wrap">
                <li 
                    class="item" 
                    v-for="item in listState.list" 
                    :key="item.SendId"
                >   
                    <!-- 成功 -->
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="item.SendStatus===1">
                        <path d="M24 45C35.598 45 45 35.598 45 24C45 12.402 35.598 3 24 3C12.402 3 3 12.402 3 24C3 35.598 12.402 45 24 45ZM13.5 24.6195L15.6195 22.5L21 27.879L32.3775 16.5L34.5 18.6225L21 32.121L13.5 24.6195Z" fill="#2BA471"/>
                    </svg>
                    <!-- 错误 -->
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="item.SendStatus===0">
                        <path d="M45 24C45 35.598 35.598 45 24 45C12.402 45 2.99999 35.598 3 24C3 12.402 12.402 2.99999 24 3C35.598 3 45 12.402 45 24ZM17.0127 14.8426L14.885 16.9575L21.8851 24L14.885 31.0425L17.0127 33.1574L24 26.1278L30.9873 33.1574L33.115 31.0425L26.115 24L33.1151 16.9575L30.9874 14.8426L24 21.8723L17.0127 14.8426Z" fill="#C54322"/>
                    </svg>
                    <!-- 已发送 -->
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="item.SendStatus===-1">
                        <path d="M24 45C12.402 45 3 35.598 3 24C3 12.402 12.402 3 24 3C35.598 3 45 12.402 45 24C45 35.598 35.598 45 24 45ZM22.5 15V25.1668L31.9401 34.6068L34.0614 32.4855L25.5 23.9241V15H22.5Z" fill="#0052D9"/>
                    </svg>
                    <span>{{item.Email}}</span>
                </li>
            </ul>
        </van-list>
        <div class="fix-bot" v-if="$route.query.hasFail=='true'">
            <van-button 
                class="submit-btn" 
                block 
                type="primary"
                @click="handleConfirmResendEmail"
            >重发邮件</van-button>
        </div>
        
    </div>
</template>

<style lang="scss" scoped>
.send-email-log-page{
    padding: 0 35px;
    padding-bottom: 180px;
    .list-wrap{
        .item{
            display: flex;
            align-items: center;
            border-bottom: 1px solid $border-color;
            padding: 32px 0;
            color: rgba(0, 0, 0, 0.9);
            svg{
                width: 48px;
                height: 48px;
                margin-right: 24px;
            }
        }
    }
    .fix-bot{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        padding: 40px 60px;
    }
}
@media screen and (min-width:$media-width){
    .send-email-log-page{
        padding: 0 16px;
        padding-bottom: 90px;
        .list-wrap{
            .item{
                padding: 16px 0;
                svg{
                    width: 24px;
                    height: 24px;
                    margin-right: 12px;
                }
            }
        }
        .fix-bot{
            padding: 20px 30px;
        }
    }
}
</style>