<template>
  <div
    style="display: none; max-width: 800px"
    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>
    <div style="margin: 24px 0; text-align: center">
      <decorated-title
        title="성능 테스트 영상"
        style="margin-bottom: 24px"
      ></decorated-title>
      <iframe
        width="100%"
        max-width="560"
        height="315"
        v-bind:src="'https://youtube.com/embed/' + videoUrl"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import DecoratedTitle from "../elements/decoratedTitle.vue";

export default {
  name: "testVideo",
  components: {
    "decorated-title": DecoratedTitle,
  },
  props: {
    cateCd: String,
    goodsNo: String,
    goodsCd: String,
  },
  data() {
    return {
      success: false,
      videoUrl: "",
    };
  },
  created: function () {
    this.loadData();
  },
  computed: {
    isPCDevice: () => {
      return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
        ? false
        : true;
    },
  },
  methods: {
    async getCategoryKey() {
      try {
        const res = await axios.get(
          "https://api.nosearch.com/ns_api/v1/store/getGoodsOne?goodsNo=" +
            this.goodsNo
        );
        return res.data.resultBody.productCategoryKey;
      } catch (e) {
        console.log(e);
        return null;
      }
    },
    async loadData() {
      try {
        this.loading = true;
        const nsCateKey = await this.getCategoryKey();

        if (nsCateKey) {
          const res = await axios.get(
            "https://api.nosearch.com/ns_api/v1/contentsAdminPicks?postType=pickDetail&categoryKey=" +
              nsCateKey +
              "&model=" +
              this.goodsCd
          );
          if (res.data) {
            // eslint-disable-next-line no-useless-escape
            const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
            const matchs = res.data.videoUrl.match(regExp);
            this.videoUrl = matchs[7];
            this.success = true;
          } else {
            this.success = false;
          }
        } else this.success = false;
      } catch (e) {
        this.success = false;
        console.log(e);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style></style>
