<template>
  <div
    style="display: none; max-width: 800px; padding: 10px"
    v-bind:style="{
      display: success ? '' : 'none',
      margin: isPCDevice ? '0 auto' : '',
    }"
  >
    <div
      style="
        width: 100%;
        max-width: 800px;
        height: 5px;
        background-color: #f5f5f5;
        margin-bottom: 24px;
      "
    ></div>
    <decorated-title title="AI 리뷰 분석"></decorated-title>
    <div class="review-analysis-sub-title">
      <span> 온라인 상의 소비자 리뷰를 AI가 검토해</span>
      <span> 긍정·부정 요소를 뽑아 분석한 결과입니다. </span>
    </div>
    <review-analysis-summary
      v-bind:positive="positive"
      v-bind:negative="negative"
      v-bind:neutral="neutral"
    ></review-analysis-summary>

    <div class="review-analysis-filtering-wrapper">
      <div
        class="review-analysis-filter-button"
        v-on:click="setFilterType('all')"
      >
        <input
          type="radio"
          name="reviewType"
          value="all"
          id="allReview"
          checked="checked"
        />
        <label for="allReview">모든 리뷰</label>
      </div>
      <div
        class="review-analysis-filter-button"
        style="margin: 0 16px"
        v-on:click="setFilterType('positive')"
      >
        <input
          type="radio"
          name="reviewType"
          value="positive"
          id="positiveReview"
        />
        <label for="positiveReview">긍정 리뷰</label>
      </div>
      <div
        class="review-analysis-filter-button"
        v-on:click="setFilterType('negative')"
      >
        <input
          type="radio"
          name="reviewType"
          value="negative"
          id="negativeReview"
        />
        <label for="negativeReview">부정 리뷰</label>
      </div>
    </div>

    <div
      style="
        width: 100%;
        max-width: 800px;
        height: 1px;
        background-color: #e5e5e5;
        margin: 24px 0;
      "
    ></div>
    <div
      v-if="filterType == 'all'"
      v-on:click="clickAllMoreButton"
      style="margin: 10px"
    >
      <div
        v-for="(reviewData, index) in allReviewData"
        v-bind:key="reviewData.index"
      >
        <review-box
          v-if="index < nowAllReviewCount"
          v-bind:type="reviewData.type"
          v-bind:date="reviewData.date"
          v-bind:text="reviewData.text"
        ></review-box>
      </div>
      <div
        v-if="allReviewData.length > 5"
        class="review-analysis-more-button"
        v-bind:style="
          nowAllReviewCount === allReviewData.length ? 'display:none' : ''
        "
      >
        더보기 ({{ nowAllReviewCount }}/{{ allReviewData.length }})
      </div>
    </div>
    <div
      v-if="filterType == 'positive'"
      v-on:click="clickPositiveMoreButton"
      style="margin: 10px"
    >
      <div
        v-for="(reviewData, index) in positiveReviewData"
        v-bind:key="reviewData.index"
      >
        <review-box
          v-if="index < nowPositiveReviewCount"
          type="positive"
          v-bind:date="reviewData.date"
          v-bind:text="reviewData.text"
        ></review-box>
      </div>
      <div
        v-if="positiveReviewData.length > 5"
        class="review-analysis-more-button"
        v-bind:style="
          nowPositiveReviewCount === positiveReviewData.length
            ? 'display:none'
            : ''
        "
      >
        더보기 ({{ nowPositiveReviewCount }}/{{ positiveReviewData.length }})
      </div>
    </div>
    <div
      v-if="filterType == 'negative'"
      v-on:click="clickNegativeMoreButton"
      style="margin: 10px"
    >
      <div
        v-for="(reviewData, index) in negativeReviewData"
        v-bind:key="reviewData.index"
      >
        <review-box
          v-if="index < nowNegativeReviewCount"
          type="negative"
          v-bind:date="reviewData.date"
          v-bind:text="reviewData.text"
        ></review-box>
      </div>
      <div
        v-if="negativeReviewData.length > 5"
        class="review-analysis-more-button"
        v-bind:style="
          nowNegativeReviewCount === negativeReviewData.length
            ? 'display:none'
            : ''
        "
      >
        더보기 ({{ nowNegativeReviewCount }}/{{ negativeReviewData.length }})
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { BASE_URL } from "../../shared";
import DecoratedTitle from "../../elements/decoratedTitle.vue";
import ReviewAnalysisSummary from "./reviewAnalysisSummary.vue";
import ReviewBox from "./reviewBox.vue";

export default {
  name: "reviewAnalysisPage",
  components: {
    "decorated-title": DecoratedTitle,
    "review-analysis-summary": ReviewAnalysisSummary,
    "review-box": ReviewBox,
  },
  props: {
    goodsNo: String,
    goodsCd: String,
    onSuccess: Function,
  },
  data() {
    return {
      success: false,
      allReviewData: [],
      positiveReviewData: [],
      negativeReviewData: [],
      nowAllReviewCount: 0,
      nowPositiveReviewCount: 0,
      nowNegativeReviewCount: 0,
      positive: 0,
      negative: 0,
      neutral: 0,
      filterType: "all",
    };
  },
  created: function () {
    this.loadData();
  },
  computed: {
    isPCDevice: () => {
      return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
        ? false
        : true;
    },
  },
  methods: {
    setFilterType(type) {
      this.filterType = type;
      this.nowAllReviewCount = 5;
      this.nowPositiveReviewCount = 5;
      this.nowNegativeReviewCount = 5;
    },
    shuffleReviews(array) {
      this.allReviewData = array.sort(() => Math.random() - 0.5);
    },
    async getCategoryKey() {
      try {
        const res = await axios.get(
          BASE_URL + "/ns_api/v1/store/getGoodsOne?goodsNo=" + this.goodsNo
        );
        return res.data.resultBody.productCategoryKey;
      } catch (e) {
        console.log(e);
        this.summary = false;
        return null;
      }
    },
    async loadData() {
      try {
        this.loading = true;
        const nsCateKey = await this.getCategoryKey();
        const res = await axios.get(
          BASE_URL +
            "/ns_api/v1/productReviews/" +
            nsCateKey +
            "/" +
            this.goodsCd
        );

        if (res.data && res.data.sentiment && res.data.summary) {
          this.positiveReviewData = res.data.summary.positive;
          this.nowPositiveReviewCount = 5;

          this.negativeReviewData = res.data.summary.negative;
          this.nowNegativeReviewCount = 5;

          res.data.summary.positive.forEach((review) => {
            let newReview = review;
            newReview.type = "positive";
            this.allReviewData.push(newReview);
          });
          res.data.summary.negative.forEach((review) => {
            let newReview = review;
            newReview.type = "negative";
            this.allReviewData.push(newReview);
          });

          if (this.allReviewData.length === 0) {
            this.success = false;
            return;
          }

          this.shuffleReviews(this.allReviewData);
          this.nowAllReviewCount = 5;

          this.positive = res.data.sentiment.positive;
          this.negative = res.data.sentiment.negative;
          this.neutral = res.data.sentiment.neutral;

          this.success = true;
          if (this.onSuccess) this.onSuccess();
        } else {
          this.success = false;
        }
      } catch (e) {
        this.success = false;
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
    clickAllMoreButton() {
      if (this.nowAllReviewCount + 5 > this.allReviewData.length)
        this.nowAllReviewCount = this.allReviewData.length;
      else this.nowAllReviewCount += 5;
    },
    clickPositiveMoreButton() {
      if (this.nowPositiveReviewCount + 5 > this.positiveReviewData.length)
        this.nowPositiveReviewCount = this.positiveReviewData.length;
      else this.nowPositiveReviewCount += 5;
    },
    clickNegativeMoreButton() {
      if (this.nowNegativeReviewCount + 5 > this.negativeReviewData.length)
        this.nowNegativeReviewCount = this.negativeReviewData.length;
      else this.nowNegativeReviewCount += 5;
    },
  },
};
</script>

<style></style>
