<template>
    <div class="boardPreview" ref="compBox">
        <div class="boardBox" :style="boardStyle">
            <p class="boardTxt" v-for="item,index in contentArr" :key="index" :style="boardTxtStyle" v-html="item">
            </p>
        </div>
    </div>
</template>
<script>
export default {
    name:"BoardPreview",
    data(){
        return {
            boardStyle:null,
            boardTxtStyle:null,
            contentArr:{
                type:Array,
                default:()=>[]
            }
        }
    },
    props:{
        boardWH: {
            type: String,
            default: "300*200"
        },
        tpl: {
            // {
            //     "id": 3, 
            //     "category": "0", 
            //     "content": "保持车距，控制车速", 
            //     "screenSize": "768*64", 
            //     "fontColor": "FFFF00", 
            //     "fontSize": "64", 
            //     "fontType": "2", 
            //     "fontSpacing": "0", 
            //     "rollingSpeed": null, 
            //     "stopTime": "50", 
            //     "inScreenMode": "1", 
            //     "formatStyle": "2", 
            //     "remark": null, 
            //     "createTime": "2024-01-06 10:40:19", 
            //     "updateTime": "2024-01-06 11:04:53"
            // }
            
            type: Object,
            default: {}
        },
    },
    watch:{
        boardWH:{
            handler(newV){
                this.setStyle();
            },
            immediate:true
        },
        tpl:{
            handler(newV){
                this.contentArr = this.tpl.content.replace(/\\+n|\\+r\n/g, '&&&&&').replace(/ /g, '&nbsp').split('&&&&&');
                this.setStyle();
            },
            deep:true,
            immediate:true
        }
    },
    computed:{
    },
    mounted(){
    },
    methods:{
        setStyle() {
            this.$nextTick(() => {
                let boxW = this.$refs["compBox"].offsetWidth;
                let boxH = this.$refs["compBox"].offsetHeight;
                let arr = this.boardWH.split("*");
                let scale = 1;
                console.log(boxW,boxH,arr[0],arr[1]);
                if (arr[0] / arr[1] > boxW / boxH) {
                    scale = boxW / arr[0];
                } else {
                    scale = boxH / arr[1];
                }
                this.boardStyle =  {
                    width: `${arr[0] * scale}px`,
                    height: `${arr[1] * scale}px`,
                    "align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.formatStyle]
                }
                this.boardTxtStyle = {
                    "color": "#" + this.tpl.fontColor, 
                    "font-size": `${this.tpl.fontSize.replace('px','')*scale}px`,
                    "font-family": this.fontTypeDic[this.tpl.fontType],
                    "min-height": `${this.tpl.fontSize.replace('px', '') * scale}px`
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.boardPreview{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .boardBox {
        background-color: #000;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        justify-content: center;
        .boardTxt{
            color: #f00;
            line-height: 1;
            margin-bottom: 0;
        }
    }
}
</style>