<script setup>
  import { reactive } from 'vue'

  const topNavOptions = [
    { name: '全部', value: '0' },
    { name: '笔记', value: '1' },
    { name: '文件', value: '2' }
  ]

  const formData = reactive({
    name: '',
    type: '0'
  })
</script>

<template>
  <view class="collection-index">
    <view class="top-box">
      <cb-search v-model="formData.name"></cb-search>
      <view class="top-options">
        <view
          v-for="(item, index) in topNavOptions"
          :key="index"
          :class="{ active: item.value === formData.type }"
          class="text"
          @click="formData.type = item.value"
        >
          {{ item.name }}
        </view>
      </view>
    </view>

    <!-- <cb-empty name="暂无收藏"></cb-empty> -->
    <view class="list-box">
      <view v-for="item in 3" :key="item" class="card-box">
        <view class="top-item">
          <view class="left-box">
            <text>这是收藏的文案标题</text>
            <text class="text">
              这是收藏这是收藏的文这是收藏的文案这是收藏的案这是案这是文案这是收
            </text>
          </view>
          <!-- <image
            src="/static/images/my-index/text-icon.png"
            mode="heightFix"
            class="right-img"
          ></image> -->
        </view>
        <view class="date-box">
          <text>Admin</text>
          <text>2月17日</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/index.scss';
  @import '@/styles/top-selector.scss';

  .top-box {
    padding: 24rpx;
    background: #ffffff;
  }

  .list-box {
    padding: 32rpx 24rpx;
    .card-box + .card-box {
      margin-top: 16rpx;
    }
    .card-box {
      font-family: PingFang SC, PingFang SC;
      font-style: normal;
      text-transform: none;
      border-radius: 16rpx;
      background: #ffffff;
      padding: 32rpx;
      .top-item {
        display: flex;
        justify-content: space-between;
        .left-box {
          display: flex;
          flex-direction: column;
          text {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all; // 可选：确保长单词也能换行
          }
          .text {
            font-size: 24rpx;
            color: #999999;
            margin-top: 16rpx;
            -webkit-line-clamp: 2;
            line-clamp: 2;
          }
        }
        .right-img {
          height: 112rpx;
          flex-shrink: 0;
        }
      }
      .date-box {
        display: flex;
        justify-content: space-between;
        font-weight: 500;
        font-size: 24rpx;
        color: #999999;
        margin-top: 20rpx;
      }
    }
  }
</style>
