import React from "react";
import { observer } from "mobx-react";
import "./NoPrizeCard.less";
import { SvgaPlayer } from "@grace/svgaplayer";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { _throttle, randomNum } from "../../utils/utils";
import { Button } from "@grace/ui";
import { PageCtrl } from "@/core/ctrls/PageCtrl";
import { ModalCtrl } from "@/core/ctrls/ModalCtrl";
import { LOG_KEY, MatterShareOpt, MatterViewOpt, pageView, sensorLog,MatterViewDuration } from '../../utils/sensors.js';

@observer
class NoPrizeCard extends React.Component {

  state = {
    card: true,
  };

  componentDidMount() {
    pageView("b14284", {
      page_name: "抽中未中奖弹窗",
    });
    sensorLog(LOG_KEY.exposure, "b14284", "d14285", {
      page_name: "抽中未中奖弹窗",
      button_name: "点击翻转按钮",
    });
    
  }

  /** card1文本选择 */
  opt1 = () => {
    const list = [
      'NoPrizeCard/text1.png',
      'NoPrizeCard/text2.png',
      'NoPrizeCard/text3.png',
      'NoPrizeCard/text4.png'
    ]
    const address = list[randomNum(0, 4)]
    return address
  }

  /** 切换按钮*/
  clickExchange1 = () => {
    sensorLog(LOG_KEY.click, "b14284", "d14285", {
      page_name: "抽中未中奖弹窗",
      button_name: "点击翻转按钮",
    });
    this.setState({
      card: false,
      svg: true
    });

    setTimeout(() => {
      this.setState({
        svg: false,
        card: false,
      });
    }, 2000)

  };


  /** 关闭按钮*/
  clickClose = _throttle(() => {
    ModalCtrl.closeModal();
  });

  render() {
    const { card } = this.state;
    const { data } = this.props;
    return <div className="NoPrizeCard modal_center">
      {
        card === true ?
          //翻转前
          <div className="card1">
            {/* <SvgaPlayer className="bg" src={RES_PATH + "svga/5输出展开.svga"} loop={1} /> */}
            <span className="picture"></span>
            {/* <img className="text" src={RES_PATH + this.opt1()} /> */}
          </div>
          //翻转后
          : <div>
            {/* <SvgaPlayer className="bg" src={RES_PATH + "svga/6输出切换.svga"} loop={1} /> */}
            <Swiper className="prodSwiper"
              slidesPerView={1}
              pagination={{ clickable: true }}
            >
              {
                data?.productInfos?.map((item, index) => {
                  return <SwiperSlide className="prodItem" key={index}>
                    <span className="line"></span>
                    <img className="picture2"
                      src={item?.productImg}
                      alt={item?.productText}
                    />
                    <div className="txt">
                      {item?.productText}
                    </div>
                  </SwiperSlide>
                })
              }
            </Swiper>
            {/* <Button className="exchange2" /> */}
          </div>
      }

      {
        card === true && <Button className="exchange1 md27" onClick={this.clickExchange1} />
      }


      <Button className="close" onClick={this.clickClose} />
    </div>;
  }
}

export default NoPrizeCard;
