
<template>
    <div style="width:100%;height:100%">       
        <div style="height: 100px;" >
            <!--  -->
            <ComponentTitle :title = baseComponent.sj v-if="component.sj_at"/>
        </div>
        <div style="height: calc(100% - 100px);">
            <component :is="baseComponent.component_itm.component_nm" :createDataObj="baseComponent.component_itm" ></component>
        </div>
        
    </div>
</template>


<script>

import ComponentTitle from './ComponentTitle.vue';
import ChartCmmn from '../chart/ChartCmmn.vue';
import ColAndLine from '../chart/ColAndLine.vue';
import chartDataTransform from '../../component/chart/chartDataTransform.js';

export default {
    props: {
        component: {
            type: Object,
            default: null
        },
    },
    data() {
        return {
            baseComponent : this.component,

        }
    },
    methods: {

    },
    watch: {
        component : {
            handler : function(){
                this.baseComponent = this.component;
            },
            deep : true
        }
        
    },
    computed: {




         
    },
    components: {       
       'ComponentTitle' : ComponentTitle,
       'ChartCmmn' : ChartCmmn,
       'ColAndLine' : ColAndLine
    },
    mounted() {
        let changeData = this.component.component_itm;
        let rowData = changeData.dataTable.rowData;

        if(this.component.component_itm.data_list == null){
            this.component.component_itm.data_list = chartDataTransform.createData(rowData, changeData.categoryAxis, changeData.valueAxis, "null");
        }
    },
}

</script>
