import { Component } from "react";
import { View, Text, Swiper, SwiperItem, Image } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import "./index.less";
import Taro from "@tarojs/taro";
import productDetailIcon from "../../images/productDetail/productDetailIcon.png";
import like from "../../images/productDetail/like.png";
import home from "../../images/nav/home.png";
import selfBuy from "../../images/productDetail/selfBuy.png";
import share from "../../images/productDetail/share.png";
import ProductCard from "../../components/ProductCard"; //产品卡片
import Modal from "../../components/Modal"; //弹窗

export default class Index extends Component {
  state = {
    isShare: false, //是否是分享
    isOpened: false, //是否打开弹窗
    productList: [
      {
        id: 1,
        name: "青岛大虾",
        price: 99.9,
        originalPrice: 159.9,
        image: "https://example.com/img1.jpg",
        sales: 1234,
        tag: "热销",
      },
      {
        id: 2,
        name: "三文鱼刺身",
        price: 158,
        originalPrice: 198,
        image: "https://example.com/img2.jpg",
        sales: 856,
        tag: "新品",
      },
      {
        id: 3,
        name: "帝王蟹",
        price: 299,
        originalPrice: 399,
        image: "https://example.com/img3.jpg",
        sales: 566,
        tag: "限时",
      },
    ],
  };

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  // 复制商品编号
  handleCopy = (text) => {
    Taro.setClipboardData({
      data: text,
      success: () => {
        Taro.showToast({
          title: "复制成功",
          icon: "success",
        });
      },
    });
  };

  // 添加跳转首页方法
  handleToHome = () => {
    Taro.switchTab({
      url: "/pages/index/index",
    });
  };

  // 立即购买
  handleBuy = () => {
    console.log(111);

    this.setState({
      isOpened: true,
    });
  };

  // 添加返回方法
  handleBack = () => {
    const pages = Taro.getCurrentPages();
    if (pages.length > 1) {
      Taro.navigateBack();
    }
  };

  render() {
    return (
      <View
        className="index"
        style={{ paddingTop: Taro.navigationBarHeight + "px" }}
      >
        {!this.state.isShare && (
          <View className="back-btn" onClick={this.handleBack}>
            <AtIcon value="chevron-left" size="24" color="#999999"></AtIcon>
          </View>
        )}
        {/* 轮播图 */}
        <Swiper className="swiper" autoplay circular>
          <SwiperItem>
            <Image className="swiper-img" src="图片地址1" mode="aspectFill" />
          </SwiperItem>
          {/* 可以添加更多 SwiperItem */}
        </Swiper>

        {/* 商品详情模块 */}
        <View className="product-info">
          {/* 商品名称 */}
          <Text className="product-name">
            <Text className="self-tag">自营</Text>
            商品名称
          </Text>

          {/* 价格和标签行 */}
          <View className="price-tag-row">
            {/* 价格区域 */}
            <View className="price-box">
              <Text className="current-price">
                <Text className="currency">¥</Text>
                299
              </Text>
              <Text className="original-price">¥399</Text>
            </View>
            {/* 标签区域 */}
            <View className="tag-box">
              <Text className="tag">分享赚￥1.51</Text>
            </View>
          </View>

          {/* 分割线 */}
          <View className="divider" />

          {/* 商品编号行 */}
          <View className="product-number-row">
            <Text className="number-label">商品编号：123456</Text>
            <Text
              className="copy-btn"
              onClick={() => this.handleCopy("123456")}
            >
              复制
            </Text>
          </View>
        </View>
        {/* 商品标签模块 */}
        <View className="product-tag-row">
          <View className="tag-item">
            <Image src={productDetailIcon} mode="aspectFit" />
            <Text className="tag-text">渔市商品</Text>
          </View>
          <View className="tag-item">
            <Image src={productDetailIcon} mode="aspectFit" />
            <Text className="tag-text">品质保证</Text>
          </View>
          <View className="tag-item">
            <Image src={productDetailIcon} mode="aspectFit" />
            <Text className="tag-text">无忧售后</Text>
          </View>
        </View>
        {/* 猜你喜欢 */}
        <View className="guess-you-like">
          <Image src={like} mode="aspectFit" />
          <Text className="title">猜你喜欢</Text>
        </View>
        {/* 猜你喜欢产品列表 */}
        <View className="product-card-list">
          {this.state.productList.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </View>
        {/* 底部购买模块 */}
        <View className="bottom-buy">
          <View onClick={this.handleToHome} className="bottom-buy-left">
            <Image src={home} mode="aspectFit" />
            <Text className="bottom-buy-text">首页</Text>
          </View>
          <View className="bottom-buy-right">
            {!this.state.isShare ? (
              <>
                <View className="bottom-buy-right-self">
                  <Image src={share} mode="aspectFit" />
                  <Text className="bottom-buy-text">分享赚</Text>
                </View>
                <View className="bottom-buy-right-share">
                  <Image src={selfBuy} mode="aspectFit" />
                  <Text className="bottom-buy-text">自购省</Text>
                </View>
              </>
            ) : (
              <View onClick={this.handleBuy} className="bottom-buy-right-btn">
                <Text className="bottom-buy-text">立即购买</Text>
              </View>
            )}
          </View>
        </View>
        {/* 分享弹窗 */}
        <Modal
          linkText="阿拉山口监督卡监督卡就"
          title="咸鱼口令已复制"
          isOpened={this.state.isOpened}
        />
      </View>
    );
  }
}
