<template>
  <div class="code-fun-flex-col page">
    <!-- 全部便签文件夹项 -->
    <FolderItem id="all" name="全部便签" :noteCount="allCount" :isSelected="selectedFolder === 'all'" :onPress="handleAllClick" />

    <!-- 加星便签文件夹项 -->
    <FolderItem id="starred" name="加星便签" :noteCount="starredCount" :isSelected="selectedFolder === 'starred'" :onPress="handleStarredClick" />

    <!-- 回收站文件夹项 -->
    <FolderItem id="trash" name="回收站" :noteCount="trashCount" :isSelected="selectedFolder === 'trash'" :onPress="handleTrashClick" />

    <!-- 同步信息区域 -->
    <div class="code-fun-flex-col code-fun-justify-start section_7">
      <div class="code-fun-flex-row code-fun-justify-between code-fun-items-center section_8">
        <div class="code-fun-flex-row code-fun-items-center">
          <img class="code-fun-shrink-0 image_7" :src="`assets/icons/drawable-xxhdpi/btn_edit_folder.png`" />
          <span class="text_11 code-fun-ml-10">上次同步:{{ lastSyncTime }}</span>
        </div>
        <div class="code-fun-flex-row code-fun-items-center">
          <img class="image_8 code-fun-ml-12" :src="`assets/icons/drawable-xxhdpi/btn_add_folder.png`" @click="handleAddFolder" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import FolderItem from './FolderItem.vue'

const props = defineProps({
  allCount: {
    type: Number,
    default: 0,
  },
  starredCount: {
    type: Number,
    default: 0,
  },
  trashCount: {
    type: Number,
    default: 0,
  },
  archiveCount: {
    type: Number,
    default: 0,
  },
  selectedFolder: {
    type: String,
    default: '',
  },
  lastSyncTime: {
    type: String,
    default: '10/10上午9:28',
  },
  onAllClick: {
    type: Function,
    default: null,
  },
  onStarredClick: {
    type: Function,
    default: null,
  },
  onTrashClick: {
    type: Function,
    default: null,
  },
  onArchiveClick: {
    type: Function,
    default: null,
  },
  onAddFolder: {
    type: Function,
    default: null,
  },
})

const handleAllClick = () => {
  if (props.onAllClick) {
    props.onAllClick()
  }
}

const handleStarredClick = () => {
  if (props.onStarredClick) {
    props.onStarredClick()
  }
}

const handleTrashClick = () => {
  if (props.onTrashClick) {
    props.onTrashClick()
  }
}

const handleArchiveClick = () => {
  if (props.onArchiveClick) {
    props.onArchiveClick()
  }
}

const handleAddFolder = event => {
  // 阻止事件冒泡到父元素
  event.stopPropagation()
  if (props.onAddFolder) {
    props.onAddFolder()
  }
}
</script>

<style lang="less" scoped>
.page {
  .section_7 {
    margin-top: 2rem;
    background-color: #00000000;
    .section_8 {
      padding: 0.29rem 0.92rem;
      background-color: #f4f4f4;
      border: solid 0.063rem #f0ece7;
      .image_7,
      .image_8 {
        border-radius: 0.63rem;
        width: 2rem;
        height: 2rem;
        object-fit: contain;
      }
      .text_11 {
        color: #cacaca;
        font-size: 0.7rem;
        line-height: 1.16rem;
      }
    }
  }
}
</style>
