import { Image, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useCallback, useMemo } from 'react'
import classNames from 'classnames'
import LabAndImg from '../LabAndImg'
import IconFont from '../iconfont/iconfont'
import styles from './index.module.scss'
import { goLink } from '@/common/common'
import { formatHashTag, formatImgUrl } from '@/common/fotmat'

interface Params {
  desStatus?: true | false
  productList?: any[]
}
const Product = ({ desStatus = true, productList = [] }: 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) => {
        return (
          <View key={item.id} className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
            <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.header_con}>
                <View>
                  {!!item.product_screw_id
                && <View className={styles.header_label}>
                  <Text>推荐</Text>
                  <Text>配套螺纹</Text>
                </View>}
                </View>
                <IconFont name="icon-shoucangchenggong" size={50} />
              </View>
            </View>
          </View>
        )
      })}
    </View>
  )
}

export default Product
