<template>
    <div class='follow_email'>
        <div class="btn_area">
            <el-button @click="close">关闭</el-button>
        </div>
        <div class="down">
            <div class="email_area">
                <div class='header_message'>
                    <div class='item'><div class="label">发件人：</div><div class='value'>{{ emailDetail?.from }}</div></div>
                    <div class='item'><div class="label">收件人：</div><div class='value'>{{ emailDetail?.recipientls.join(',') }}</div></div>
                    <div class='item'><div class="label">抄送人：</div><div class='value'>{{ emailDetail?.recipientCcls.join(',') }}</div></div>
                    <div class='item'><div class="label">密送人：</div><div class='value'>{{ emailDetail?.recipientBccls.join(',') }}</div></div>
                    <div class='item'><div class="label">主  题：</div><div class='value'>{{ emailDetail?.subject }}</div></div>
                    <div class='item'><div class="label">日  期：</div><div class='value'>{{ emailDetail?.nowDate }}</div></div>
                    <div class='item'><div class="label">附  件：</div>
                        <div v-if="emailDetail?.fileList">
                            <div class="file" v-for="item in emailDetail?.fileList">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="detail-editor" v-html="emailDetail?.content"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    const emailDetail = ref()

    onMounted(() => {
        if(sessionStorage.getItem('previewData')) {
            emailDetail.value = JSON.parse(sessionStorage.getItem('previewData'))
        }
    })
    
    const close = () => {
        sessionStorage.removeItem('previewData')
        window.close()
    }
</script>

<style lang="scss" scoped>
    .follow_email{
        background-color: #fff;
        padding: 20px 16px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        .btn_area{
            margin-bottom: 20px;
        }
        .down{
            display: flex;
            .email_area{
                padding: 2px 0;
                flex:1;
                width: 0;
                .file{
                    cursor: pointer;
                    color: #1874FF
                }
                .detail-editor{
                    padding-top:16px;
                    :deep(p){
                        line-height: 32px;

                    }
                    :deep(ul){
                        padding-inline-start: 20px;
                        margin-block-end: 0;
                        margin-block-start: 0;
                        li{
                            list-style: disc !important;
                        }

                    }
                    :deep(ol){
                        padding-inline-start: 20px;
                        margin-block-end: 0;
                        margin-block-start: 0;
                        li{
                            list-style: decimal !important;
                        }

                    }
                    :deep(a){
                        text-decoration: underline;
                        color: #1874FF;
                    }
                    :deep(img){
                        max-width: 100%;
                    }
                }
            }
            .follow_area{
                width: 450px;
                padding: 2px 16px;
                border-left: 1px solid #F8FAFC;
                overflow-y: auto;
            }
            .header_message{
                background-color: #F8FAFC;
                padding: 20px 16px;
                .item{
                    display: flex;
                    .label{
                        width: 70px;
                    }
                    .value{
                        flex:1;
                        word-break: break-all;
                    }
                }
            }
        }
    }
    .business-item{
        :deep(.el-form-item__content){
            display: flex;
            column-gap: 0;
            .el-select{
                flex:1
            }
            .el-input{
                flex: 2
            }
        }
    }
</style>