import { useMemo } from 'react'
import Taro from '@tarojs/taro'
import useSave from "@/utils/hooks/useSave"
import { compressImage, random } from '@/utils'
import onlove from '@/assets/icons/housemantj/onlove.png'
import love from '@/assets/icons/housemantj/bheart.png'
import VideoStart from '@/assets/icons/housemantj/VideoStart.png'

import './style.less'

export default (props) => {

  const { className, item, style, } = props

  const uqClass = useMemo(() => random('f'), [])

  // const cls = useMemo(() => [className, 'contentCard', uqClass].filter(Boolean).join(' '), [className, uqClass])

  const [isSaved, toggleSave] = useSave(item.isSaved, 'note', item.noteId)
  const Detail = () => {
    Taro.navigateTo({ url: `/pages/details/NoteDetails/index?id=${item.noteId}` });

  }
  return (

    <view className={uqClass} style={{ overflow: 'hidden', backgroundColor: 'while' }}>
      <view className='contentCard' style={style}>
        <view className='cardTop'>
          <image mode='widthFix' src={compressImage(item.poster)} className='cCardimg' />
          <image className='lefttips' src={item.noteType == 'video' ? VideoStart : ''} />
          <image onClick={toggleSave} src={isSaved > 0 ? onlove : love} className='loveharde'></image>
        </view>
        <view className='bContent' onClick={Detail}>
          <view className='cCword'>{(item.summary).toString().length > 35 ? (item.summary).substring(0, 35) + '...' : (item.summary)}</view>
        </view>
      </view>
    </view>
  )
}