import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import "./index.less";

const OperationArea = () => {
  // 模拟商品数据
  const seckillProducts = [
    {
      id: 1,
      name: "商品1",
      price: 20.20,
      originalPrice: 30.00,
      image: "商品图片地址1"
    },
    {
      id: 2,
      name: "商品2",
      price: 25.50,
      originalPrice: 35.00,
      image: "商品图片地址2"
    },
    {
      id: 3,
      name: "商品3",
      price: 15.80,
      originalPrice: 28.00,
      image: "商品图片地址3"
    }
  ];

  // 添加跳转方法
  const handleNavigate = (type) => {
    if (type === 'seckill') {
      Taro.navigateTo({
        url: '/pages/seckillIndex/index'
      });
    } else if (type === 'highCommission') {

    }
  };

  return (
    <View className="operation-wrap" >
      <View className="operation-item" onClick={() => handleNavigate('seckill')}>
        <View className="title">限时秒杀</View>
        <View className="product-list">
          {seckillProducts.map(product => (
            <View key={product.id} className="product-item">
              <Image className="product-img" src={product.image} mode="aspectFill" />
              <View className="price-wrap">
                <View className="current-price">
                  <Text className="symbol">¥</Text>
                  <Text className="number">{product.price.toFixed(2)}</Text>
                </View>
                <Text className="original-price">¥{product.originalPrice.toFixed(2)}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>
      <View className="operation-item" onClick={() => handleNavigate('highCommission')}>
        <View className="title-wrap">
          <Text className="title">高佣专项</Text>
          <Text className="tag">高佣金必囤爆品</Text>
        </View>
        {/* 这里可以添加高佣专项的具体内容 */}
      </View>
    </View>
  );
};

export default OperationArea; 