import { Image, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useCallback, useMemo } from 'react'
import LabAndImg from '../LabAndImg'
import styles from './index.module.scss'
import { goLink } from '@/common/common'
import { formatHashTag, formatImgUrl } from '@/common/format'

interface Params {
  desStatus?: true | false
  productList?: any[]
  popupShow?: (any) => void
}
const Product = ({ desStatus = true, productList = [], popupShow }: Params) => {
  const labAndImgObj = useCallback(
    (item) => {
      return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
    },
    [productList],
  )
  return (
    <View className={styles.products_list}>
      {productList?.map((item, key) => {
        return (
          <View key={key} className={styles.products_item} onClick={() => popupShow?.(item)}>
            <View className={styles.item_img}>
              <LabAndImg value={labAndImgObj(item)} />
              <View className={styles.num}>{item.product_color_count}色</View>
            </View>
            <View className={styles.item_con}>
              <View className={styles.title}>
                <text>{formatHashTag(item.code, '')} </text>
                {item.name}
              </View>
              <View className={styles.tag_list}>
                <View className={styles.tag}>{item.width}</View>
                <View className={styles.tag_g}>{item.weight_density}</View>
              </View>
              <View className={styles.introduce}>{item.component}</View>
              {desStatus && <View className={styles.des}>{item.describe}</View>}
            </View>
          </View>
        )
      })}
    </View>
  )
}

export default Product
