<template>
    <div class="component-wrap flex-column justify-center">
        <p class="data-caption cursor" :id="parent.layoutNm+'-MainTitle'" data-type="text" @click="optionChangeClick" :style="styleObj('-MainTitle')" >
            {{ parent.componentOption[parent.layoutNm+'-MainTitle'].textData }}
        </p>
        <div class="flex justify-between align-center">
            <div class="flex50">
                <p class="data-icon cursor">
                    <label :for="parent.layoutNm + '-iconImg1'">
                        <img :src="iconPath1" >
                    </label>
                    <input type="file" :id="parent.layoutNm + '-iconImg1'" style="display:none" @change="handleIconChange">
                </p>
            </div>
            <div class="flex50">
                <p class="data-number text-rg cursor" :id="parent.layoutNm+'-Value1'" data-type="column" @click="optionChangeClick" :style="styleObj('-Value1')" >
                    {{ parent.componentOption[parent.layoutNm+'-Value1'].columnData }}
                    <span class="data-unit ml5 point-none" :style="styleObj('-Value1')">
                        {{ parent.componentOption[parent.layoutNm+'-Value1'].unitData }}
                    </span>
                </p>
            </div>
        </div>
        <div class="flex justify-between align-center">
            <div class="flex50">
                <p class="data-icon cursor">
                    <label :for="parent.layoutNm + '-iconImg2'">
                        <img :src="iconPath2" >
                    </label>
                    <input type="file" :id="parent.layoutNm + '-iconImg2'" style="display:none" @change="handleIconChange">
                </p>
            </div>
            <div class="flex50">
                <p class="data-number text-rg cursor" :id="parent.layoutNm+'-Value2'" data-type="column" @click="optionChangeClick" :style="styleObj('-Value2')">
                    {{ parent.componentOption[parent.layoutNm+'-Value2'].columnData }}
                    <span class="data-unit ml5 point-none" :style="styleObj('-Value2')">
                        {{ parent.componentOption[parent.layoutNm+'-Value2'].unitData }}
                    </span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import defaultIcon from '../../../resources/img/icon/1.png';

export default {
    props:{
        parent: {
            type: Object,
            required: true
        },
        optionChangeClick: {
            type: Function,
        },
        componentOptn: {
            type: Object,
            required: true
        },
    },
    data() {
        return {
            iconPath1:defaultIcon,
            iconPath2:defaultIcon,
        }
    },
    methods: {
        handleIconChange(event) {
            const clickElement = event.target.id;
            const file = event.target.files && event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onloadend = () => {
                if (event.target.id === this.parent.layoutNm + '-iconImg1') {
                    this.iconPath1 = reader.result;
                } else if (event.target.id === this.parent.layoutNm + '-iconImg2') {
                    this.iconPath2 = reader.result;
                }
            };
            reader.readAsDataURL(file);
        },
        optionChangeClick: function(e) {
            this.$emit('parentInfo', this.parent);
            this.optionChangeClick(e);
        },
        baseSetting: function() {
            this.parent['componentOption'][this.parent.layoutNm+'-MainTitle'] = JSON.parse(JSON.stringify(this.componentOptn));
            this.parent['componentOption'][this.parent.layoutNm+'-Value1'] = JSON.parse(JSON.stringify(this.componentOptn));
            this.parent['componentOption'][this.parent.layoutNm+'-Value2'] = JSON.parse(JSON.stringify(this.componentOptn));
        },
        styleObj: function(name) {
            return {
                fontSize: this.parent.componentOption[this.parent.layoutNm + name].textSize+'pt',
                fontWeight: this.parent.componentOption[this.parent.layoutNm + name].textStyle === 'bold' ? 'bold' : '',
                fontStyle: this.parent.componentOption[this.parent.layoutNm + name].textStyle === 'normal' ? 'normal' : '',
                textAlign: this.parent.componentOption[this.parent.layoutNm + name].textAlign
            }
        },
    },
    watch: {

    },
    computed: {
    },
    components: {
    },
    mounted() {
        this.baseSetting();
    }
}
</script>
<style scoped>
.point-none {
    pointer-events: none;
}
</style>
