<template>
  <div class="project-container">

    <!-- 새 카드 -->
    <div class="card new-card">
      <div class="new-symbol">
        <img src="../../../resources/img/content/ico_digital_asset.svg" alt="">
      </div>
      <div class="new-text">새로운<br>디지털 자산 만들기</div>
      <div class="new-icon"></div>
    </div>

    <!-- v-for 카드 반복 -->
    <div class="card" v-for="(project, index) in projects" :key="index">
      <div class="thumbnail">
        <img :src="project.img" alt="" />
      </div>
      <div class="card-footer">
        <div class="w_100 layout center space-between">
          <p class="title">{{ project.name }}</p>
          <div class="layout center">
            <button @click="toggleFavorite(index)">
              <img
                :src="project.isFavorite
                  ? require('../../../resources/img/content/ico_favorites.svg')
                  : require('../../../resources/img/content/ico_unFavorites.svg')"
              />
            </button>
            <button @click="toggleMenu(index)">
                <img src="../../../resources/img/component/common/ico_bread_dot.svg"
                    alt=""
                    style="transform: rotate(90deg); width: 20px; height: 20px;" />
            </button>
          </div>
        </div>
        <p class="date">{{ project.date }}</p>
      </div>
      <!-- 드롭다운 메뉴 표시 -->
    <div v-if="openMenuIndex === index" class="dropdown-menu">
        <button><img src="../../../resources/img/content/ico_subShare.svg" alt=""> 공유</button>
        <button><img src="../../../resources/img/content/ico_subCopy.svg" alt=""> 복사</button>
        <button><img src="../../../resources/img/content/ico_trashcan.svg" alt=""> 삭제</button>
        <button><img src="../../../resources/img/content/ico_version.svg" alt=""> 버전기록</button>
    </div>
    </div>

  </div>
</template>

<script>

export default {
    data() {
        return {
            projects: [
                { name: '프로젝트A', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: false },
                { name: '프로젝트B', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: true },
                { name: '프로젝트C', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: false },
                { name: '프로젝트D', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: true },
                { name: '프로젝트E', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: false },
            ],
             openMenuIndex: null,

        };
    },
    methods: {
        toggleFavorite(index) {
            this.projects[index].isFavorite = !this.projects[index].isFavorite;
        },
        toggleMenu(index) {
            this.openMenuIndex = this.openMenuIndex === index ? null : index;
        }
    },
    watch: {},
    computed: {},
    components: {},
    created() {},
    mounted() {},
    beforeUnmount() {},
};

</script>