<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(routeName, null)">모두보기</button>
    </div>
    <ul>
      <li v-for="(item, idx2) of list" :key="idx2" class="result-box mb-15">
        <div class="main-img">
          <img v-if="item.hasOwnProperty('files') && item.files.length > 0" :src="item.files[0].filePath" alt="">
          <img v-else src="client/resources/images/img6.png" alt="">
        </div>
        <div class="text-box">
          <h5>{{ item.sj }}</h5>
          <p v-if="name === 'P' || name === 'V'" class="address">{{ item.adres }}</p>
          <p class="text">{{ item.cn }}</p>
          <div class="mb-20">
            <ul class="category">
              <li v-for="(ctgry, idx3) of item.ctgrys" :key="idx3" class="category1">{{ ctgry.ctgryNm }}</li>
            </ul>
          </div>
          <div class="date">
            <ul>
              <li>생산연도 <b>{{ item.prdctnYear }}</b></li>
              <li>|</li>
              <li>등록일 <b>{{ item.rgsde }}</b></li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "CardViewList",

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

  data() {
    return {
    };
  },

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

  created() { },
  mounted() { },
  watch: {},
  methods: {
    // 페이지 이동
    fnMoveTo(page, id) {
      if (id !== null || id !== '') {
        this.$router.push({ name: page, query: { id: id } });
      } else {
        this.$router.push({ name: page });
      }
    }
  },
};
</script>
<style scoped>
/* 임시로 추가 */
.main-img img {
  max-width: 320px;
}
</style>