import { Image, View } from '@tarojs/components'
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from '../goods/index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import { formatDateTime, formatHashTag, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'

const Goods = (props: any) => {
  const labAndImgObj = useCallback((item) => {
    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
  }, [])
  return (
    <View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
      {
        props.data?.texture_url === '' && <>

          <View className={styles.picBox}>
            <Image className={styles.pic} mode="aspectFill" src="https://test.cdn.zzfzyc.com/mall/no_img.png"></Image>
            <View className={styles.posBox}>{props.data?.product_color_count}色</View>
          </View>
        </>
      }
      {
        props.data?.texture_url !== ''
                && <>
                  <View className={styles.leftBox}>
                    <LabAndImg value={labAndImgObj(props.data)} />
                    {/* <Image className={styles.pic} mode={'aspectFill'} src={props.data?.picUrl}></Image> */}
                    <View className={styles.posBox}>{props.data?.product_color_count}色</View>
                  </View>
                </>
      }
      <View className={styles.rightBox}>
        <View className={styles.productName}>{formatHashTag(props.data?.code, props.data?.name)}</View>
        <View className={styles.tips}>{props.data?.component}</View>
        <View className={styles.flexTag}>
          <View className={styles.tagOne}>{props.data?.width}</View>
          <View className={styles.tagTwo}>{props.data?.weight_density}</View>
        </View>
      </View>
    </View>
  )
}
export default memo(Goods)
