<template>
  <div class="component-wrap flex-column justify-center">
    <p
      class="data-caption cursor mb10"
      :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-title cursor"
          :id="parent.layoutNm + '-Title1'"
          data-type="text"
          @click="optionChangeClick"
          :style="styleObj('-Title1')"
        >
          {{ parent.componentOption[parent.layoutNm + "-Title1"].textData }}
        </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" :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-title cursor"
          :id="parent.layoutNm + '-Title2'"
          data-type="text"
          @click="optionChangeClick"
          :style="styleObj('-Title2')"
        >
          {{ parent.componentOption[parent.layoutNm + "-Title2"].textData }}
        </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 class="flex justify-between align-center">
      <div class="flex50">
        <p
          class="data-title cursor"
          :id="parent.layoutNm + '-Title3'"
          data-type="text"
          @click="optionChangeClick"
          :style="styleObj('-Title3')"
        >
          {{ parent.componentOption[parent.layoutNm + "-Title3"].textData }}
        </p>
      </div>
      <div class="flex50">
        <p
          class="data-number text-rg cursor"
          :id="parent.layoutNm + '-Value3'"
          data-type="column"
          @click="optionChangeClick"
          :style="styleObj('-Value3')"
        >
          {{ parent.componentOption[parent.layoutNm + "-Value3"].columnData }}
          <span class="data-unit ml5 point-none" :style="styleObj('-Value3')">
            {{ parent.componentOption[parent.layoutNm + "-Value3"].unitData }}
          </span>
        </p>
      </div>
    </div>
    <div class="flex justify-between align-center">
      <div class="flex50">
        <p
          class="data-title cursor"
          :id="parent.layoutNm + '-Title4'"
          data-type="text"
          @click="optionChangeClick"
          :style="styleObj('-Title4')"
        >
          {{ parent.componentOption[parent.layoutNm + "-Title4"].textData }}
        </p>
      </div>
      <div class="flex50">
        <p
          class="data-number text-rg cursor"
          :id="parent.layoutNm + '-Value4'"
          data-type="column"
          @click="optionChangeClick"
          :style="styleObj('-Value4')"
        >
          {{ parent.componentOption[parent.layoutNm + "-Value4"].columnData }}
          <span class="data-unit ml5 point-none" :style="styleObj('-Value4')">
            {{ parent.componentOption[parent.layoutNm + "-Value4"].unitData }}
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    parent: {
      type: Object,
      required: true,
    },
    optionChangeClick: {
      type: Function,
    },
    componentOptn: {
      type: Object,
      required: true,
    },
  },
  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 + "-Title1"] =
        JSON.parse(JSON.stringify(this.componentOptn));
      this.parent["componentOption"][this.parent.layoutNm + "-Title2"] =
        JSON.parse(JSON.stringify(this.componentOptn));
      this.parent["componentOption"][this.parent.layoutNm + "-Title3"] =
        JSON.parse(JSON.stringify(this.componentOptn));
      this.parent["componentOption"][this.parent.layoutNm + "-Title4"] =
        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));
      this.parent["componentOption"][this.parent.layoutNm + "-Value3"] =
        JSON.parse(JSON.stringify(this.componentOptn));
      this.parent["componentOption"][this.parent.layoutNm + "-Value4"] =
        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>

