import { AtModal, AtModalContent } from "taro-ui";
import { View, Image, Text } from "@tarojs/components";
import { addLog } from "../../service";
import { formatDate } from "../../common/time";
import { isDebounce } from "../../common/debounce";
import "./index.less";
import Taro from "@tarojs/taro";
import selectStep from "../../images/productDetail/selectStep.png";
import xianyu from "../../images/productDetail/xianyu.png";
import stepThree from "../../images/productDetail/stepThree.png";
export default function Modal(props) {
  const { productPromotion, isOpened, title, linkText, id, shareUserId,isSeckill } =
    props;
  const handleCopyLink = () => {
    if (!isDebounce(500)) return; // 如果在300ms内重复触发，直接返回
    Taro.setClipboardData({
      data: productPromotion.short_tpwd,
    }).then(() => {
      Taro.showToast({
        title: "口令已复制",
        icon: "success",
      });
      if (isSeckill) {
        const dayid = formatDate(new Date(), "YYYY-MM-DD");
        let userId = "";
        if (Taro.getStorageSync("loginInfo")) {
          userId = Taro.getStorageSync("loginInfo").id;
        }
        let ext = "";
        if (shareUserId) {
          ext = JSON.stringify({
            share_users_id: shareUserId,
          });
        }
        addLog({
          event_type: "buy_product_link",
          event_type_title: "点击购买",
          goods_id: Number(id),
          ext,
          dayid,
          users_id: userId||0,
        });
      }
    });
  };
  return (
    <AtModal isOpened={isOpened} closeOnClickOverlay={true}>
      <AtModalContent>
        <View className="container">
          <View className="title">{title}</View>
          <View className="content">
            <View className="link-text">{linkText}</View>
            <View className="steps">
              <View className="step-item">
                <View className="step-title">
                  <Text className="number">1</Text>
                  <Text className="desc">点击复制口令</Text>
                </View>
                <View className="step-box">
                  <View className="step-One">复制口令</View>
                  <Image className="step-img-one" src={selectStep} />
                </View>
              </View>
              <View className="step-item">
                <View className="step-title">
                  <Text className="number">2</Text>
                  <Text className="desc">打开闲鱼APP</Text>
                </View>
                <View className="step-box">
                  <Image className="step-img-t" src={xianyu} />
                  <Image className="step-img-two" src={selectStep} />
                </View>
              </View>
              <View className="step-item">
                <View className="step-title">
                  <Text className="number">3</Text>
                  <Text className="desc">自动识别口令</Text>
                </View>
                <View className="step-box">
                  <Image
                    mode="heightFix"
                    className="step-img-three"
                    src={stepThree}
                  />
                </View>
              </View>
            </View>
            {/* 复制口令 */}
            <View className="copy-link" onClick={handleCopyLink}>
              复制口令
            </View>
          </View>
        </View>
      </AtModalContent>
    </AtModal>
  );
}