<template>
  <ul class="card-wrap">
    <li v-for="(item, idx) in list" :key="idx" class="mb-30" @click="fnMoveTo(item)">
      <div class="result-box">
        <div class="main-img">
          <div v-if="!$isEmpty(typeText)" class="float-div">
            <p class="float-txt">{{ typeText }}</p>
          </div>
          <img v-if="name === 'M'" :src="getYouTubeThumbnail(item.link)" alt="영상 썸네일">
          <img v-else-if="!$isEmpty(item.thumbnail)" :src="item.thumbnail.filePath" :alt="item.sj + ' 썸네일'">
          <img v-else src="client/resources/images/img6.png" alt="Not found image">
        </div>
        <div class="text-box">
          <h5>{{ item.sj }}</h5>
          <p v-if="item.hasOwnProperty('adres')" class="address">{{ item.adres }}</p>
          <p class="text">{{ item.cn ? $stripHtml(item.cn) : '' }}</p>
          <div class="mb-20" style="white-space: pre">
            <ul class="category">
              <li v-for="(ctgry, ctgryIdx) of item.ctgrys" :key="ctgryIdx" class="category1">{{ ctgry.ctgryNm }}</li>
            </ul>
          </div>
          <div class="date">
            <ul>
              <li>생산연도 <b>{{ item.prdctnYear ? $formatPrdctnDate(item.prdctnYear) : '-' }}</b></li>
              <li>|</li>
              <li>등록 <b>{{ $dotFormatDate(item.rgsde) }}</b></li>
            </ul>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
import { getYouTubeThumbnail } from '../../../resources/js/youtubeUtils';

export default {
  name: "CardStyleComponent",

  props: {
    typeText: {
      type: String,
      default: null
    },
    name: {
      type: String,
      default: 'P'
    },
    list: {
      type: Array,
      default: () => [],
    },
  },

  computed: {
    page() {
      switch (this.name) {
        case 'P':
          return 'PicHistoryDetail';
        case 'V':
          return 'VideoHistoryDetail';
        case 'M':
          return 'MediaVideoDetail';
        case 'N':
          return 'NewsReleaseDetail';
      }
    },
  },

  methods: {
    // 유투브 썸네일 제작
    getYouTubeThumbnail,
    // 페이지 이동
    fnMoveTo(item) {
      let key = null;
      switch (this.name) {
        case 'P':
        case 'V':
          key = 'dcryId';
          break;
        case 'M':
          key = 'mediaVidoId';
          break;
        case 'N':
          key = 'nesDtaId';
          break;
      }
      this.$router.push({ name: this.page, query: { id: item[key] } });
    }
  },
};
</script>