<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  pageData: {
    type: Object,
    default: {},
  }
});
let coverList = ref([])
function setCoverContent(){
    try{
        coverList.value = JSON.parse(props.pageData.CoverContent)
    }catch(e){
        coverList.value = []
    }
}
setCoverContent()

watch(
    ()=>props.CoverContent,
    ()=>{
        setCoverContent()
    },
)
</script>

<template>
    <!-- 自定义封面页渲染 -->
    <div class="cover-new-wrap ppt-item-box" id="ppt-cover-page">
        <!-- 封面图 -->
        <img :src="pageData.BackgroundImg||''" class="cover-img pptbg" style="object-fit: fill !important;">
        <!-- 自定义文本 -->
        <div v-for="el in coverList" :key="el.id"
            class="cover-el el-text" :id="`cover-el-${el.id}`" :style="{
            top: el.percentageTop*100 + '%',
            left: el.percentageLeft*100 + '%',
            width: el.percentageWidth*100 + '%',
            height: el.percentageHeight*100 + '%',
            pointerEvents:'none'
        }" >
            <div class="layer-editor-wrap">
                <div style="width:100%;height:100%;" :id="`${el.id}-editorDom`">
                        <div class="editor-content" :style="{width:el.width+'px'}" v-html="el.richContent"></div>
                </div>
            </div>
        </div>
        <!-- 不显示 -->
        <!-- 如果没有自定义文本，则在右下的位置显示标题 -->
        <!--<div class="cover-el default" v-if="!coverList.length">
            <div class="editor-content"><p style="font-size:28px;color:#fff;">{{ pageData.Title }}</p></div>
        </div>-->
    </div>
</template>

<style scoped lang="scss">
.cover-new-wrap{
    position:relative;
    .cover-img{
        width: 100%;
        height: 100%;
    }
    .cover-el{
        position: absolute;
        .layer-editor-wrap {
            z-index: 2;
            width: 100%;
            height: 100%;
            /* padding: 10px; */
            box-sizing: border-box;
            position: relative;
            >div {
                cursor: pointer;
            }
            .editor-content {
                padding: 10px;
                position: absolute;
                transform-origin: 0 0;
                word-wrap: break-word;
                ul {
                    margin-left: 1em;
                    list-style-type: disc;
                }

                ol {
                    margin-left: 1em;
                    list-style-type: decimal;
                }
            }
        }
        &.default{
            width:62%; 
            font-size:16px; 
            text-align:center; 
            line-height:1.6;
            right:20px; 
            top:50%;
        }
    }
}
</style>
