import {Image} from '@nutui/nutui-react-taro'
import {View, Text} from '@tarojs/components'
import Taro from '@tarojs/taro'
import {ShopGoods} from "@/api/shop/shopGoods/model"
import {CmsNavigation} from "@/api/cms/cmsNavigation/model"
import './GoodsList.scss'

interface GoodsListProps {
  data: ShopGoods[]
  nav?: CmsNavigation
}

const GoodsList = (props: GoodsListProps) => {

  return (
    <>
      <View className={'py-3'} style={{paddingTop: '0'}}>
        <View className={'bg-gray-50'}>
          <View className={'grid grid-cols-2 gap-2 pb-2 p-2'}>
            {props.data?.map((item, index) => {
              return (
                <View key={index} className={'goods-waterfall-item bg-white'} style={{
                  borderRadius: '0 0 6px 6px'
                }}>
                  <View className={'goods-card'}>
                    <Image
                      src={item.image}
                      lazyLoad={false}
                      style={{
                        borderRadius: '6px 6px 0 0',
                        height: '180px'
                      }}
                      onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}
                    />
                    <View className={'goods-info p-2 flex flex-col'}>
                      <View className={'goods-title text-sm font-bold'}>{item.name}</View>
                      <View className={'goods-meta'}>
                        <Text className={'goods-comments text-gray-400 text-xs'}>{item.comments}</Text>
                      </View>
                      <View className={'goods-price-section flex justify-between'}>
                        <View className={'goods-price'}>
                          <Text className={'price-unit text-orange-600 font-bold text-lg'}>￥</Text>
                          <Text className={'price-number text-orange-600 font-bold text-lg'}>{item.price}</Text>
                        </View>
                        <View className={'goods-actions'}>
                          <Text className={'goods-sales text-gray-400 text-xs'}>已售 {item.sales}</Text>
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              )
            })}
          </View>
        </View>
      </View>
    </>
  )
}
export default GoodsList