<template>
  <div
    id="vue-summary"
    style="display: none; max-width: 800px; margin: 0 auto"
    v-bind:style="{ display: success ? 'inherit' : 'none' }"
  >
    <div>
      <div v-if="success" style="padding-top: 24px">
        <decorated-title title="요약"></decorated-title>
        <div
          v-bind:style="{ padding: defaultSize * 2 + 'px' }"
          style="display: flex"
        >
          <div style="width: 50%">
            <table style="margin: 0 auto">
              <tbody>
                <tr
                  :key="index"
                  v-bind:style="{
                    display:
                      review.scoreMetaMap[scoringRule].label.indexOf('만원') ===
                      -1
                        ? 'inherit'
                        : 'none',
                  }"
                  v-for="(scoringRule, index) in review.scoringRules"
                >
                  <td
                    class="scoring-rule-table-td"
                    style="color: #404040; font-size: 13px; font-weight: bold"
                  >
                    {{ review.scoreMetaMap[scoringRule].name }}
                  </td>
                  <td
                    class="scoring-rule-table-td"
                    style="color: #404040; font-size: 13px; font-weight: bold"
                    v-if="review.scoreMetaMap[scoringRule].score > 0"
                  >
                    <score-bubble
                      v-if="review.scoreMetaMap[scoringRule].score === -1"
                      v-bind:score="0"
                    ></score-bubble>
                    <score-bubble
                      v-else
                      v-bind:score="review.scoreMetaMap[scoringRule].score"
                    ></score-bubble>
                  </td>
                  <td
                    v-else
                    colspan="3"
                    style="
                      font-size: 12px;
                      color: rgb(138, 138, 138);
                      border-bottom: none;
                    "
                  >
                    스펙 정보가 없습니다.
                  </td>
                  <td
                    class="scoring-rule-table-td"
                    style="
                      text-align: right;
                      font-size: 12px;
                      font-weight: bold;
                      color: #707070;
                    "
                    v-if="review.scoreMetaMap[scoringRule].score > 0"
                  >
                    <span v-if="review.scoreMetaMap[scoringRule].score === -1"
                      >0점</span
                    >
                    <span v-else
                      >{{ review.scoreMetaMap[scoringRule].score }}점</span
                    >
                  </td>
                  <td
                    class="scoring-rule-table-td"
                    style="color: #404040; font-size: 13px; font-weight: bold"
                    v-if="review.scoreMetaMap[scoringRule].score > 0"
                  >
                    <div
                      style="
                        display: inline-block;
                        width: 1px;
                        height: 10px;
                        background-color: #e5e5e5;
                        margin-right: 10px;
                      "
                    ></div>
                    {{ review.scoreMetaMap[scoringRule].label }}
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              style="
                margin: 0 auto;
                margin-top: 20px;
                display: flex;
                flex-wrap: wrap;
                max-width: 250px;
              "
            >
              <div
                :key="index"
                style="
                  border-radius: 15px;
                  padding: 5px 12px;
                  background-color: #f5f6f9;
                  color: #8a8a8a;
                  font-size: 14px;
                  font-weight: 500;
                  margin-right: 16px;
                  margin-bottom: 5px;
                  line-height: 20.72px;
                "
                v-for="(tag, index) in review.tags"
              >
                # {{ tag }}
              </div>
            </div>
          </div>
          <div
            style="
              width: 45%;
              border-left: 1px solid #e5e5e5;
              padding-left: 30px;
            "
          >
            <div
              v-if="review.reviewData.twoLineSummary.length > 0"
              style="
                margin: 15px 0 18px 0;
                background-color: #f5f6f9;
                width: 100%;
                padding: 10px;
                box-sizing: border-box;
                border-radius: 10px;
                display: flex;
              "
            >
              <div>
                <img
                  src="https://nosearch.com/static/images/doctor_tip.png"
                  style="width: 22px; height: auto; margin-right: 8px"
                />
              </div>
              <div>
                <div
                  :key="index"
                  style="
                    color: #404040;
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 20.72px;
                  "
                  v-for="(
                    line, index
                  ) in review.reviewData.twoLineSummary.split('\n')"
                >
                  {{ line }}
                </div>
              </div>
            </div>
            <div v-if="reviewTexts.length > 0">
              <div
                style="
                  line-height: 25px;
                  color: #404040;
                  font-size: 15px;
                  margin: 10px 0;
                  text-align: left;
                "
                v-for="reviewText in reviewTexts"
                v-bind:key="reviewText.index"
              >
                {{ reviewText }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { BASE_URL } from "../../shared";
import DecoratedTitle from "../../elements/decoratedTitle.vue";
import ScoreBubble from "../../elements/scoreBubble.vue";

export default {
  name: "specSummaryPc",
  components: {
    "decorated-title": DecoratedTitle,
    "score-bubble": ScoreBubble,
  },
  props: {
    cateCd: String,
    goodsCd: String,
    goodsNo: String,
    goodsNm: String,
  },
  data() {
    return {
      defaultSize: 10,
      seen: true,
      loading: false,
      success: false,
      review: null,
      reviewTexts: [],
    };
  },
  created: function () {
    this.loadData();
  },
  computed: {
    isValidData: function () {
      return this.data && this.data.modelName;
    },
    specUrl: function () {
      if (
        this.review &&
        this.review.modelName &&
        this.review.productCategoryKey
      ) {
        let bigCategory = null;
        if (this.cateCd) {
          if (this.cateCd.indexOf("005") === 0) {
            bigCategory = "living";
          } else if (this.cateCd.indexOf("006") === 0) {
            bigCategory = "kitchen";
          } else if (this.cateCd.indexOf("007") === 0) {
            bigCategory = "season";
          } else if (this.cateCd.indexOf("008") === 0) {
            bigCategory = "digitalit";
          } else {
            bigCategory = "living";
          }
        }
        return (
          "https://nosearch.com/product/" +
          bigCategory +
          "/" +
          this.review.productCategoryKey +
          "/detail/" +
          encodeURI(this.review.modelName) +
          "?simple=true"
        );
      }
      return null;
    },
  },
  methods: {
    sendSpecReviewClickEvent() {
      const eventProperties = {
        goods_no: this.goodsNo,
        goods_name: this.goodsNm,
        cate_cd: this.cateCd,
        productCategoryKey: this.review.productCategoryKey,
        model: this.goodsCd,
      };
      if (window.mixpanel) {
        window.mixpanel.track("노써치_스펙_분석_보기_클릭", eventProperties);
      }
    },
    async loadData() {
      try {
        const godoCategoryId = this.cateCd;
        const modelName = this.goodsCd;
        this.loading = true;
        const res = await axios.get(
          BASE_URL +
            "/ns_api/v1/product/review?godoCategoryId=" +
            godoCategoryId +
            "&modelName=" +
            modelName
        );
        if (res.data.success && res.data.data) {
          this.review = res.data.data;
          this.reviewTexts = res.data.data.reviewData.summary.split("\n\n");
          this.success = true;
        } else {
          this.success = false;
        }
      } catch (e) {
        this.success = false;
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style></style>
