import classnames from "classnames";
import Taro from "@tarojs/taro";
import { Component } from "react";

import {
  Block,
  View,
  Image,
  Text,
  Button,
  PageMeta,
  Swiper,
  SwiperItem,
} from "@tarojs/components";

import { Popup } from "@antmjs/vantui";

import "./popup.less";
import "./popup-site-swiper.less";
import "./fade.css";

import { go, goJump } from "../../utils/traoAPI";

/*** props
 * isLarge            是否大尺寸
 * isShow             是否显示
 * isClose            右上角关闭图标
 * content            弹窗内容
 * confirmButtonText  确定按钮
 * textAlgin          文本对齐 left  right  center
 * data               数据
 * @confirm           关闭回调
 * ***/
export default class PopupSiteSwiper extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "确认组件",
      current: 0,
      toRight: false,
      isClick: false,
      typeButton: {
        1: "前往内部页面",
        2: "",
        3: "打开外部链接",
        4: "前往小程序",
        5: "前往视频号",
        6: "前往直播间",
      },
    };
  }

  async onLoad() {}
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  initData = () => {
    if (this.props.siteData) {
      let arr = JSON.parse(JSON.stringify(this.props.siteData));
      this.setState({ siteList: arr });
    }
  };

  onClose = () => {
    this.props.close();
  };

  onConfirm = (item: any) => {
    let { type } = item;
    this.props.confirm();
  };

  onClickStop = (e) => {
    e.stopPropagation();
  };

  onChange(event) {
    const current = event.detail.current;
    const { current: curCurrent } = this.state;
    const { siteData } = this.props;
    if (curCurrent + 2 === siteData.length && current + 1 === siteData.length) {
      this.setState({ toRight: true });
    }
    this.setState({ current });
  }
  onClickSwiperItem(item) {
    goJump(item);
  }
  onFinish(event) {
    const { current } = event.detail;
    const { toRight, isClick } = this.state;
    const { siteData } = this.props;
    if (current === siteData.length - 1) {
      if (toRight || isClick) {
        this.setState({ toRight: false, isClick: false });
      } else {
        // this.toHomePage();
      }
    }
  }

  render() {
    let { confirmButtonText, isShow, siteData, type, isLarge } = this.props;
    let { current } = this.state;

    return (
      <Block>
        <PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
        <Popup
          style="background-color: transparent;"
          show={isShow}
          closeOnClickOverlay={false}
          round
          overlayStyle="width: 100vw;padding: 0;"
          onClick={this.onClickStop}
          // onClose={this.onClose}
        >
          <View
            className="at-icon at-icon-close site-close"
            onClick={this.onClose}
          ></View>
          <View className={classnames("common-box")}>
            <View className="site-popup-content-box">
              <Swiper
                className="absolutely"
                style="width: 600rpx;height: 800rpx"
                current={current}
                onChange={this.onChange.bind(this)}
                onAnimationFinish={this.onFinish.bind(this)}
                duration={800}
                indicatorDots={false}
                indicatorColor="#999"
                indicatorActiveColor="#333"
              >
                {siteData.map((item, index) => {
                  return (
                    <SwiperItem
                      className="absolutely"
                      onClick={this.onClickSwiperItem.bind(this, item)}
                      key={"swiper_" + index}
                    >
                      <View
                        // className="body FadeInFrame fadein"
                        style={{
                          width: "100%",
                          height: "100%",
                          // display: current === index ? "block" : "none",
                        }}
                      >
                        <Image
                          className="cover"
                          src={item.fileUrl}
                          mode="aspectFit"
                        ></Image>
                      </View>
                    </SwiperItem>
                  );
                })}
              </Swiper>
            </View>

            {/* <View className="common-popup-btns">
              <Button className="common-popup-btn" onClick={this.onConfirm}>
                {confirmButtonText}
              </Button>
            </View> */}
          </View>
        </Popup>
      </Block>
    );
  }
}
