<template>
  <div class="component-wrap flex justify-center align-center">
    <div class="flex50">
      <p
        class="data-title cursor"
        :id="parent.layoutNm + '-Title'"
        data-type="text"
        @click="optionChangeClick"
        :style="styleObj('-Title')"
      >
        {{ parent.componentOption[parent.layoutNm + "-Title"].textData }}
      </p>
    </div>
    <div class="flex50">
      <p
        class="data-number text-rg cursor"
        :id="parent.layoutNm + '-Value'"
        data-type="column"
        @click="optionChangeClick"
        :style="styleObj('-Value')"
      >
        {{ parent.componentOption[parent.layoutNm + "-Value"].columnData }}
        <span
          class="data-unit ml5 point-none"
          data-type="unit"
          :style="styleObj('-Value')"
        >
          {{ parent.componentOption[parent.layoutNm + "-Value"].unitData }}
        </span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    parent: {
      type: Object,
      required: true,
    },
    optionChangeClick: {
      type: Function,
    },
    componentOptn: {
      type: Object,
      required: true,
    },
    inputVal: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    optionChangeClick: function (e) {
      this.$emit("parentInfo", this.parent);
      this.optionChangeClick(e);
    },
    baseSetting: function () {
      this.parent["componentOption"][this.parent.layoutNm + "-Title"] =
        JSON.parse(JSON.stringify(this.componentOptn));
      this.parent["componentOption"][this.parent.layoutNm + "-Value"] =
        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,
      };
    },
  },
  mounted() {
    this.baseSetting();
  },
};
</script>
<style scoped>
.point-none {
  pointer-events: none;
}
</style>

