import { View, Text, Image } from "@tarojs/components";
import "./index.less";
import joinStoreBg from '../../../images/index/jionStore.png'
import saveMoneyBg from '../../../images/index/save-money.png'
import shareEarnBg from '../../../images/index/share-earn.png'

const ProductList = () => {
  // 模拟商品数据
  const products = [
    {
      id: 1,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
      price: 99.99,
      originalPrice: 199.99,
      saveMoney: 10,
      shareEarn: 20
    },
    {
      id: 1,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
      price: 99.99,
      originalPrice: 199.99,
      saveMoney: 10,
      shareEarn: 20
    },
    {
      id: 1,
      image: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1saL6x.img?w=768&h=411&m=6",
      name: "这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称这是一个商品名称",
      price: 99.99,
      originalPrice: 199.99,
      saveMoney: 10,
      shareEarn: 20
    },
    // ... 其他商品数据
  ];

  return (
    <View className="product-list-wrap">
      {products.map((product, index) => (
        <View key={product.id}>
          <View className="product-item">
            <Image className="product-img" src={product.image} mode="aspectFill" />
            <View className="product-info">
              <View className="product-name" style={{"WebkitBoxOrient": "vertical"}}>
                <Text className="self-tag">自营</Text>
                {product.name}
              </View>
              <View className="price-line">
                <View className="price-info">
                  <Text className="symbol">¥</Text>
                  <Text className="price">{product.price}</Text>
                  <Text className="original-price">¥{product.originalPrice}</Text>
                </View>
                <View className="add-btn">
                  <Image 
                    className="join-store-bg" 
                    src={joinStoreBg}
                    mode="aspectFit"
                  />
                  <Text className="btn-text">加入小店</Text>
                </View>
              </View>
              <View className="profit-line">
                <View className="save-money">
                  <Image className="bg" src={saveMoneyBg} mode="aspectFit" />
                  <View className="content">
                    <Text className="label">自购省</Text>
                    <Text className="money">¥{product.saveMoney}</Text>
                  </View>
                </View>
                <View className="share-earn">
                  <Image className="bg" src={shareEarnBg} mode="aspectFit" />
                  <View className="content">
                    <Text className="label">分享赚</Text>
                    <Text className="money">¥{product.shareEarn}</Text>
                  </View>
                </View>
              </View>
            </View>
          </View>
          {index !== products.length - 1 && <View className="divider"></View>}
        </View>
      ))}
    </View>
  );
};

export default ProductList;