<template>
  <div class="mb-30">
    <div class="flex-sp-bw mb-20">
      <div class="resultext">
        <img :src="resulticon" alt="">
        <p>총 <b>{{ count }}개</b>의 {{ helpText }}</p>
      </div>
      <button type="button" class="gopage" @click="fnMoveTo">모두보기</button>
    </div>
    <div v-if="list.length > 0">
      <CardStyleComponent :name="name" :list="list" />
    </div>
    <div v-else class="no-results">
      <img :src="nosearch" alt="">
      <p>검색 결과가 없습니다.</p>
      <p>단어의 철자가 정확한지 확인해 주시기 바랍니다.<br> 검색어의 단어 수를 줄이거나, 다른 검색어(유사어)로 검색해 보시기 바랍니다.<br> 일반적으로 많이 사용하는 검색어로 다시 검색해 주시기 바랍니다.</p>
    </div>
  </div>
</template>
<script>
// COMPONENT
import CardStyleComponent from '@/views/component/listLayout/CardStyleComponent.vue';
export default {
  name: "CardViewList",

  components: {
    CardStyleComponent,
  },

  props: {
    name: {
      type: String,
      default: 'P',
    },
    count: {
      type: Number,
      default: 0,
    },
    list: {
      type: Array,
      default: () => [],
    },
    params: {
      type: Object,
      default: () => { },
    },
  },

  data() {
    return {
      // ICON
      resulticon: "client/resources/images/icon/r-check.png",
      nosearch: "client/resources/images/no_search.png",
    };
  },

  computed: {
    helpText() {
      switch (this.name) {
        case 'P':
          return '사진 기록물이 검색되었습니다.';
        case 'V':
          return '영상 기록물이 검색되었습니다.';
        case 'M':
          return '미디어 영상이 검색되었습니다.';
        case 'N':
          return '보도자료가 검색되었습니다.';
      }
    },
  },

  methods: {
    // 페이지 이동
    fnMoveTo() {
      switch (this.name) {
        case 'P':
          this.$router.push({ name: 'PicHistorySearch', query: this.params });
          break;
        case 'V':
          this.$router.push({ name: 'VideoHistorySearch', query: this.params });
          break;
        case 'M':
          this.$router.push({ name: 'MediaVideoSearch', query: this.params });
          break;
        case 'N':
          this.$router.push({ name: 'NewsReleaseSearch', query: this.params });
          break;
      }
    }
  },
};
</script>