<template>
  <div class="component-wrap flex-column justify-center align-center">
    <div>
      <div class="data-icon">
        <p
          :id="parent.layoutNm + '-MainTitle'"
          data-type="text"
          data-isback="true"
          @click="optionChangeClick"
          :style="styleObj('-MainTitle')"
        >
          {{ parent.componentOption[parent.layoutNm + "-MainTitle"].textData }}
        </p>
      </div>
    </div>
    <p
      class="data-title cursor text-rg"
      :id="parent.layoutNm + '-SubTitle'"
      data-type="text"
      @click="optionChangeClick"
      :style="styleObj('-SubTitle')"
    >
      {{ parent.componentOption[parent.layoutNm + "-SubTitle"].textData }}
    </p>
    <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 text-rg point-none"
        :style="styleObj('-Value')"
      >
        {{ parent.componentOption[parent.layoutNm + "-Value"].unitData }}
      </span>
    </p>
  </div>
</template>

<script>
export default {
  props: {
    parent: {
      type: Object,
      required: true,
    },
    optionChangeClick: {
      type: Function,
    },
    componentOptn: {
      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 + "-MainTitle"] =
        JSON.parse(JSON.stringify(this.componentOptn));
      this.parent["componentOption"][this.parent.layoutNm + "-SubTitle"] =
        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,
        backgroundColor:
          this.parent.componentOption[this.parent.layoutNm + name].backColor,
      };
    },
  },
  mounted() {
    this.baseSetting();
  },
};
</script>
<style scoped>
.point-none {
  pointer-events: none;
}
</style>

