import { AtModal, AtModalContent } from "taro-ui";
import { View, Image, Text } from "@tarojs/components";
import { addLog } from "../../service";
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 } = props;
  const handleCopyLink = () => {
    Taro.setClipboardData({
      data: productPromotion.short_tpwd,
    }).then(() => {
      Taro.showToast({
        title: '口令已复制',
        icon: 'success',
      });
      addLog({
        log_type: 'click_to_purchase',
      });
    });
  }
  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>
  );
}