import React from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import { Avatar } from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import GuideBar from '@/components/GuideBar'
import { withAuth  } from '@/components'
// import img from '@/config/images'
import './index.scss'

const Message = () => {
  const messageList = Array(10).fill(0).map((_, index) => ({
    id: index + 1,
    title: `消息${index + 1}消息${index + 1}消息${index + 1}消息${index + 1}`,
    content: Array(Math.round(Math.random() * 40)).fill(0).map((_, index) => `消息${index + 1}`).join(''),
  }))

  return (
    <View className='message-container'>
      <View className='custom-navbar'>
        <View className='message-navigator'>
          <Avatar className='message-navigator-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
          <Text className='message-navigator-title'>消息</Text>
        </View>
      </View>
      <ScrollView scrollY className='message-content'>
        <View className='message-content-list'>
          {messageList.map((item) => (
            <View className='message-item' key={item.id}>
              <View className='message-item-title'>
                <Text>{item.title}</Text>
              </View>
              <View className='message-item-content'>
                <Text>{item.content}</Text>
              </View>
            </View>
          ))}
        </View>
      </ScrollView>
      <GuideBar currentPage='message' />
    </View>
  )
}

export default withAuth(Message)