<template>
  <div class="review-analysis-summary-wrapper">
    <div class="review-analysis-summary-gauges-wrapper">
      <div class="review-analysis-summary-gauge-wrapper positive">
        <img
          src="https://nosearch.com/static/images/positive_smile.png"
          class="review-analysis-summary-icon"
        />
        <span class="review-analysis-summary-text" style="color: #6191ff"
          >긍정 리뷰</span
        >
        <div class="review-analysis-summary-gauge-box">
          <div
            v-if="positivePercentage > 0"
            class="review-analysis-summary-gauge"
            v-bind:style="{
              width: positivePercentage * 140 + 'px',
              'background-color': '#81A7FF',
            }"
          />
        </div>
        <span class="review-analysis-summary-review-count">{{ positive }}</span>
      </div>
      <div
        class="review-analysis-summary-gauge-wrapper negative"
        style="margin-bottom: 6px"
      >
        <img
          src="https://nosearch.com/static/images/negative_upset.png"
          class="review-analysis-summary-icon"
        />
        <span class="review-analysis-summary-text" style="color: #ff6861"
          >부정 리뷰</span
        >
        <div class="review-analysis-summary-gauge-box">
          <div
            v-if="negativePercentage > 0"
            class="review-analysis-summary-gauge"
            v-bind:style="{
              width: negativePercentage * 140 + 'px',
              'background-color': '#FF907D',
            }"
          />
        </div>
        <span class="review-analysis-summary-review-count">{{ negative }}</span>
      </div>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 10px 30px;
      "
    >
      <div
        class="review-analysis-summary-satisfaction"
        style="text-align: center"
      >
        <span class="review-analysis-summary-span-text">제품 만족도</span>
        <h3
          class="review-analysis-summary-h3-text"
          v-bind:style="{
            padding: isPCDevice ? '0' : '',
          }"
        >
          {{ satisfactionPercentage }}%
        </h3>
      </div>
      <div style="width: 1px; height: 50px; background-color: #e5e5e5"></div>
      <div
        class="review-analysis-summary-total-count"
        style="text-align: center"
      >
        <span class="review-analysis-summary-span-text">분석 후기</span>
        <h3
          class="review-analysis-summary-h3-text"
          v-bind:style="{
            padding: isPCDevice ? '0' : '',
          }"
        >
          {{ totalReviews }}
        </h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "reviewAnalysisSummary",
  props: {
    positive: Number,
    negative: Number,
    neutral: Number,
  },
  computed: {
    isPCDevice: () => {
      return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
        ? false
        : true;
    },

    totalReviews: function () {
      const countOfreviews = this.positive + this.negative + this.neutral;
      if (countOfreviews > 100) return "100+";
      else return countOfreviews;
    },
    satisfactionPercentage: function () {
      if (this.positive > 0)
        return (
          (this.positive / (this.positive + this.negative)).toFixed(2) * 100
        );
      else return 0;
    },
    positivePercentage: function () {
      if (this.positive > 0) {
        return (this.positive / (this.positive + this.negative)).toFixed(2);
      } else return 0;
    },
    negativePercentage: function () {
      if (this.negative > 0)
        return (this.negative / (this.positive + this.negative)).toFixed(2);
      else return 0;
    },
  },
};
</script>

<style></style>
