<!--
 * @FilePath: \daping\src\views\InPlantProducts\child\component\remarks.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div :key="keynum" class="box">
  <border1 ref="refborder1" :title="'备注信息'">
      <template v-slot>
        <p ref="remarks" class="remake_p" :style="{width:remarksSize.width,height:remarksSize.height}">{{ data }} </p>
        <!-- <div class="box">
            <h2>产品信息</h2>
            <p>{{ data }}</p>
        </div> -->
      </template>
  </border1>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import border1 from "@/components/borderBox/border1.vue"

    let refborder1=ref()
    let remarks=ref()
    let data=ref(null)
    let keynum=ref(0)
    const remarksSize=reactive({
    height:'0px',
    width:'0px'
})
    onMounted(() => {
        // setData()
    })

    function setchartWH(width:any,height:any){
        remarks.value.style.height=height+'px'
        remarks.value.style.width=width+'px'
        remarksSize.height=height+'px'
        remarksSize.width=width+'px'
    refborder1.value.resetWH()
    }

    
    const setData=(value:any)=>{
        data.value=value
        
        keynum.value++
        refborder1.value.resetWH()
    }

    defineExpose({
    setchartWH,
    setData
})
</script>

<style scoped>

p{
    margin: 0 10px 0 10px;
    color: #fff;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box{
    width:100%;
    height:100%;
}
</style>
