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

const OperationArea = ({ recommend }) => {
  // 添加跳转方法
  const handleNavigate = (type) => {
    if (type === "鱼市秒杀") {
      Taro.navigateTo({
        url: "/pages/indexSub/seckillIndex/index",
      });
    } else if (type === "高佣专项") {
      Taro.navigateTo({
        url: "/pages/indexSub/highCommission/index",
      });
    }
  };

  return (
    <View className="operation-wrap">
      {recommend.map((item, index) => (
        <View
          key={index}
          className="operation-item"
          onClick={() => handleNavigate(item.tag.name)}
        >
          <View className="title-wrap">
            <Text className="title">{item.tag.name}</Text>
            {/* <Text className="tag">高佣金必囤爆品</Text> */}
          </View>
          <View className="product-list">
            {item.goods &&
              item.goods.map((product, productIndex) => (
                <View key={productIndex} className="product-item">
                  <Image
                    className="product-img"
                    src={product.image_url}
                    mode="aspectFill"
                  />
                  <View className="price-wrap">
                    <View className="current-price">
                      <Text className="symbol">¥</Text>
                      <Text className="number">{product.reserve_price}</Text>
                    </View>
                    <Text className="original-price">
                      ¥{product.original_price}
                    </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;
