import { View } from '@tarojs/components'
import { Image } from '@nutui/nutui-react-taro'
import { Share } from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import { ShopGoods } from '@/api/shop/shopGoods/model'
import './GoodsItem.scss'

interface GoodsItemProps {
  goods: ShopGoods
}

const GoodsItem = ({ goods }: GoodsItemProps) => {
  // 跳转到商品详情
  const goToDetail = () => {
    Taro.navigateTo({
      url: `/shop/goodsDetail/index?id=${goods.goodsId}`
    })
  }

  return (
    <View className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
      <Image
        src={goods.image || ''}
        mode={'aspectFit'}
        lazyLoad={false}
        radius="10px 10px 0 0"
        height="180"
        onClick={goToDetail}
      />
      <View className={'flex flex-col p-2 rounded-lg'}>
        <View>
          <View className={'car-no text-sm'}>{goods.name || goods.goodsName}</View>
          <View className={'flex justify-between text-xs py-1'}>
            <span className={'text-orange-500'}>{goods.comments || ''}</span>
            <span className={'text-gray-400'}>已售 {goods.sales || 0}</span>
          </View>
          <View className={'flex justify-between items-center py-2'}>
            <View className={'flex text-red-500 text-xl items-baseline'}>
              <span className={'text-xs'}>￥</span>
              <span className={'font-bold text-2xl'}>{goods.price || '0.00'}</span>
            </View>
            <View className={'buy-btn'}>
              <View className={'cart-icon'}>
                <Share size={20} className={'mx-4 mt-2'}
                       onClick={goToDetail}/>
              </View>
              <View className={'text-white pl-4 pr-5'}
                   onClick={goToDetail}>购买
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default GoodsItem