import { AtModal, AtModalContent } from "taro-ui";
import { View, Image, Text } from "@tarojs/components";
import "./index.less";
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) {
  return (
    <AtModal isOpened={props.isOpened} closeOnClickOverlay={true}>
      <AtModalContent>
        <View className="container">
          <View className="title">{props.title}</View>
          <View className="content">
            <View className="link-text">{props.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">第二步说明文字</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">
                复制口令
            </View>
          </View>
        </View>
      </AtModalContent>
    </AtModal>
  );
}
