<script setup>

import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'

const props=defineProps({
    pageData:{
        type:Object,
        default:{}
    }
})

</script>

<template>
	<div class="ppt-item-box ppt-item-page">
		<!-- <div class="ppt-title-box">{{pageData.title}}</div> -->
		<!-- 自定义标题 -->
		<div class="custom-title-wrap" 
			:style="pageData.titleDetail?{
				 left:pageData.titleDetail.left+'%',
						top:pageData.titleDetail.top+'%',
						width:pageData.titleDetail.width+'%',
						height:pageData.titleDetail.height+'%',
				}:{
						left:'10%',top:'6.6%',width:'68%',height:'5%',
				}"
		>
			<div class="title" v-html="pageData.title"
				:style="pageData.titleDetail?{
						color:pageData.titleDetail.color||'#333',
						fontSize:(pageData.titleDetail.fontSize||22)+'px',
						fontFamily:pageData.titleDetail.fontFamily||'helvetica'
				}:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"
			></div>
		</div>
		<div class="ppt-content-box">
			<div class="container">
				<div class="left-box">
					<component 
						:is="getPPTContentType(1,pageData.elements)"
						:itemData="getPPTContentItemData(1,pageData)"
					/>
				</div>
				<div class="right-box">
					<component 
						:is="getPPTContentType(2,pageData.elements)"
						:itemData="getPPTContentItemData(2,pageData)"
					/>
				</div>
			</div>
			<div class="layer-wrap">
				<template v-for="item in pageData.layers" :key="item.id">
					<component 
						:is="getPPTLayerType(item)"
						:itemData="item"
					/>
				</template>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
// @import '../style/common.scss';
.ppt-content-box{
	.container{
		display: flex;
		.left-box{
			width: 60%;
			height: 100%;
			flex-shrink: 0;
		}
		.right-box{
			flex: 1;
			flex-shrink: 0;
			height: 100%;
		}
	}
	
}
</style>
