<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>
    我的收藏
  </view>
</template>

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

  .top-box {
    padding: 24rpx;
    background: #ffffff;
  }
</style>
