import Taro from "@tarojs/taro";
import dayjs from "dayjs";
import { Component } from "react";
import {
  Block,
  View,
  Text,
  Image,
  RichText,
  ScrollView,
} from "@tarojs/components";
import { Loading } from "@antmjs/vantui";

import "./integral_list.less";

/*** redux ***/
import { connect } from "react-redux";
import { userRefresh } from "../../store/features/userInfo";
import { otherSettingRefresh } from "../../store/features/otherSetting";
/*** redux end ***/

/** 自定义组件 **/
import Navbar from "../../components/navbar/navbar";
import PopupAlert from "../../components/popup/popup-alert";
/** 自定义组件 **/

import {
  GetOtherSetting,
  GetIntegralRule,
  GetObtainUserIntegral,
  GetIsAttentionOfficialAccount,
  GetOfficialAccount,
  GetCloseOfficialAccount,
  RefreshWxUserInfo,
} from "../../utils/Interface";

import { msg } from "../../utils/traoAPI";

class IntegralList extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "我的积分",
      userinfo: {
        ...this.props.userInfo,
      },
      otherSetting: {
        // skipAppid: "",
        // skipPath: "",
        // envVersion: "",
        ...this.props.otherSetting,
      },
      page: 1,
      list: [],
      isIntegral: false, // 积分规则
      isOfficialAccount: false, // 是否关注公众号-一年展示一次
      nodes: "",

      pageNum: 1,
      pageSize: 10,
      total: 0,
      dargState: 0,
    };
  }

  async onLoad() {
    this.initData();
    this.GetIntegralRule();
  }
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async initData() {
    this.RefreshWxUserInfo();
    this.GetObtainUserIntegral();
    this.GetIsAttentionOfficialAccount();
  }

  // 刷新用户信息
  RefreshWxUserInfo = async () => {
    let res = await RefreshWxUserInfo();
    if (res.data.code === 200) {
      this.props.userRefresh(res.data.data);
      this.setState({ userInfo: res.data.data });
    }
  };

  openShop = () => {
    let { otherSetting } = this.state;
    if (otherSetting.skipAppid) {
      this.goMiniProgram();
    } else {
      this.GetOtherSetting(); // 获取小程序设置：商城地址和版本
    }
  };
  // 获取小程序设置
  GetOtherSetting = async () => {
    let res = await GetOtherSetting();
    if (res.data.code === 200) {
      let { otherSetting } = this.state;
      otherSetting.skipAppid = res.data.data.skipAppid;
      otherSetting.skipPath = res.data.data.skipPath;
      otherSetting.envVersion = res.data.data.envVersion;
      this.setState({ otherSetting });
      this.goMiniProgram();
    }
  };
  goMiniProgram = () => {
    let { otherSetting } = this.state;
    Taro.navigateToMiniProgram({
      appId: otherSetting.skipAppid,
      path: otherSetting.skipPath,
      envVersion: otherSetting.envVersion,
      success() {
        // 打开成功
        // Taro.switchTab({
        //   url: "/pages/index/index",
        // });
      },
      fail() {
        // Taro.switchTab({
        //   url: "/pages/index/index",
        // });
      },
    });
  };

  // 检查是否关注公众号：只在每年的09-30号前提醒，如果没有关注则弹窗提醒
  checkOfficialAccount() {
    let currentTime = dayjs().valueOf();
    let targetTime = dayjs().month(9).day(30).valueOf();
    // 仅9月30日前触发：提醒过期弹窗
    if (currentTime <= targetTime) {
      // 检查：今年未提醒，则弹窗
      this.setState({ isOfficialAccount: true });
      // let isOfficialAccount = Taro.getStorageSync("isOfficialAccount");
      // if (isOfficialAccount) {
      //   let oldYear = isOfficialAccount;
      //   let currentYear = dayjs().format("YYYY");
      //   if (currentYear < oldYear) {
      //     // 检查：今年未提醒，则弹窗
      //     this.setState({ isOfficialAccount: true });
      //   }
      // } else {
      //   this.setState({ isOfficialAccount: true });
      // }
    }
  }

  // 用户是否已关闭提醒
  GetOfficialAccount = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let res = await GetOfficialAccount();
    if (res.data.code === 200) {
      if (!res.data.data) {
        // 如果false则是未关闭提醒
        this.checkOfficialAccount(); // 检测时间，弹窗提示关注公众号
      }
    }
  };
  // 用户是否关注公众号
  GetIsAttentionOfficialAccount = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let res = await GetIsAttentionOfficialAccount();
    if (res.data.code === 200) {
      if (!res.data.data) {
        // 如果false则是没关注
        this.GetOfficialAccount();
      }
    }
  };

  // 用户关闭提醒
  GetCloseOfficialAccount = async () => {
    let { data } = await GetCloseOfficialAccount();
    if (data.code === 200) {
      msg("已关闭提醒");
    } else {
      msg("操作失败");
    }
  };

  GetObtainUserIntegral = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let { list, pageNum, pageSize } = this.state;
    let res = await GetObtainUserIntegral({
      pageNum,
      pageSize,
    });
    if (res.data.code === 200) {
      if (res.data.rows.length) {
        let data = res.data.rows.map((item: any) => {
          item.createTime = item.createTime
            ? dayjs(item.createTime).format("YYYY-MM-DD hh:mm:ss")
            : "";
          return item;
        });

        list = [].concat(list, data);
        this.setState({ list: list, total: res.data.total, dargState: 0 });
      }
    }
  };

  GetIntegralRule = async () => {
    Taro.showLoading({
      title: "请求中...",
      mask: true,
    });
    let res = await GetIntegralRule();
    console.log("GetIntegralRule", res);
    if (res.data.code === 200) {
      let nodes = decodeURIComponent(res.data.data.value || "");
      nodes = nodes.replace(/\<img/gi, '<img style="width:100%;height:auto" ');
      nodes = nodes.replace(
        /\<table/gi,
        '<table style="border-spacing: 0;border-collapse: collapse;border: 1px solid #000" '
      );
      nodes = nodes.replace(
        /\<td/gi,
        '<td style="border: 1px solid #000;text-align:center" '
      );
      this.setState({ nodes: nodes });
    }
  };

  integralPopupShow = () => {
    this.setState({ isIntegral: true });
  };

  integralPopupClose = () => {
    this.setState({ isIntegral: false });
  };

  /** 关注公众号弹窗 */
  officialPopupConfirm = () => {
    // let currentYear = dayjs().format("YYYY");
    // Taro.setStorageSync("isOfficialAccount", currentYear); // 标记：本年度已提醒
    this.GetCloseOfficialAccount();
    this.officialPopupClose();
  };
  officialPopupClose = () => {
    this.setState({ isOfficialAccount: false });
  };

  /*** 上拉加载 ***/
  reduction = () => {
    //还原初始设置
    // const time = 0.5;
    this.setState({
      scrollY: true,
    });
  };
  touchStart = (e) => {
    this.setState({
      start_p: e.touches[0],
    });
  };
  touchmove = (e) => {
    let move_p = e.touches[0], //移动时的位置
      deviationX = 0.3, //左右偏移量(超过这个偏移量不执行下拉操做)
      deviationY = 70, //拉动长度（低于这个值的时候不执行）
      maxY = 100; //拉动的最大高度

    let start_x = this.state.start_p.clientX,
      start_y = this.state.start_p.clientY,
      move_x = move_p.clientX,
      move_y = move_p.clientY;

    //获得偏移数值
    let dev = Math.abs(move_x - start_x) / Math.abs(move_y - start_y);
    if (dev < deviationX) {
      //当偏移数值大于设置的偏移数值时则不执行操做
      let pY = Math.abs(move_y - start_y) / 3.5; //拖动倍率（使拖动的时候有粘滞的感受--试了不少次 这个倍率恰好）
      if (move_y - start_y > 0) {
        //下拉操做
        if (pY >= deviationY) {
          // this.setState({ dargState: 1, downText: "释放刷新" });
        } else {
          // this.setState({ dargState: 0, downText: "下拉刷新" });
        }
        if (pY >= maxY) {
          pY = maxY;
        }
        this.setState({
          scrollY: false, //拖动的时候禁用
        });
      }
      if (start_y - (move_y + 100) > 0) {
        //上拉操做
        // console.log("上拉操做");
        if (pY >= deviationY) {
          this.setState({ dargState: -1 });
        }
      }
    }
  };
  pull = () => {
    //上拉
    console.log("上拉");
    let { list, total, pageNum, dargState } = this.state;
    if (dargState === -1) {
      if (list.length < total) {
        this.setState({ pageNum: pageNum + 1 });
        setTimeout(() => {
          this.GetObtainUserIntegral();
        }, 100);
      }
    }
  };
  down = () => {
    //下拉
    console.log("下拉");
    // this.props.onDown()
  };
  ScrollToUpper = () => {
    //滚动到顶部事件
    console.log("滚动到顶部事件");
    // this.props.Upper()
  };
  ScrollToLower = () => {
    //滚动到底部事件
    console.log("滚动到底部事件");
    // this.props.Lower()
  };
  touchEnd = () => {
    if (this.state.dargState === 1) {
      this.down();
    } else if (this.state.dargState === -1) {
      this.pull();
    }
    // this.reduction();
  };
  /*** 上拉加载 ***/

  render() {
    let {
      list,
      userinfo,
      isIntegral,
      isOfficialAccount,
      nodes,
      dargState,
      total,
    } = this.state;
    return (
      <Block>
        <PopupAlert
          myClassName="integral"
          isLarge={true}
          isClose={true}
          isShow={isIntegral}
          title="积分规则"
          content={<RichText nodes={nodes} />}
          confirmButtonText="我知道了"
          textAlgin="center"
          close={this.integralPopupClose}
          confirm={this.integralPopupClose}
        />
        <PopupAlert
          myClassName="officialAccount"
          isLarge={true}
          isClose={true}
          isShow={isOfficialAccount}
          title="过期积分提醒"
          type="3"
          content={
            // <View style={{ height: "700rpx" }}> // 删除测试阶段标签后，需改回700rpx
            <View style={{ height: "750rpx" }}>
              <Image
                style={{
                  width: "100%",
                  height: "600rpx",
                  // backgroundColor: "#666",
                }}
                showMenuByLongpress={true} // 长按识别二维码
                src={require("../../img/qrcode-test.jpg")}
                mode="aspectFit"
              />
              <View style={{ marginTop: "20rpx" }}>
                长按图片关注公众号，可以接收积分过期提醒
              </View>
              <View style={{ marginTop: "10rpx", color: "#666" }}>
                (测试阶段公众号为：广州云强信息科技有限公司)
              </View>
            </View>
          }
          confirmButtonText="我知道了"
          textAlgin="center"
          close={this.officialPopupClose}
          confirm={this.officialPopupConfirm}
        />

        <Navbar titleSlot="我的积分" isBack={true} />

        <View style="background: #f3f3f3;padding: 33rpx 30rpx 31rpx 30rpx;">
          <View className="integral_box1">
            <View
              className="info1 flex aitems"
              onClick={this.integralPopupShow}
            >
              <View className="tip1">积分规则</View>
              <View className="icon">
                <Image
                  src={require("../../img/user/right.png")}
                  mode="aspectFill"
                />
              </View>
            </View>
            <View className="info3">可用积分</View>
            <View className="info2">{userinfo.credit}</View>
            <View className="info4 flex aitems jcenter">
              <View className="tip1" onClick={this.openShop}>
                前往积分商城
              </View>
            </View>
            <Image
              className="point_bg"
              src={require("../../img/user/point-bg.png")}
              mode="aspectFill"
            />
          </View>
        </View>

        <View className="integral_box2">
          {/* {list.length === 0 && (
            <View className="nodata">
              <Image
                className="nodata_img"
                src={require("../../img/user/points.png")}
                mode="aspectFill"
              ></Image>
              <View>暂无数据</View>
            </View>
          )}
          {list.map((item: any, key: number) => {
            return (
              <View className="list" key={key}>
                <View className="list_block flex aitems sb">
                  <View className="left">
                    <View className="tip1">{item.remarkContent}</View>
                    <View className="tip2">{item.createTime}</View>
                  </View>
                  <View className="rights" style={item.style}>
                    {item.source === "1"
                      ? "+" + item.floatScore
                      : "-" + item.floatScore}
                  </View>
                </View>
              </View>
            );
          })} */}
          <ScrollView
            onTouchMove={this.touchmove}
            onTouchEnd={this.touchEnd}
            onTouchStart={this.touchStart}
            onScrollToUpper={this.ScrollToUpper}
            onScrollToLower={this.ScrollToLower}
            className="dragUpdata"
            scrollY={this.state.scrollY}
            scrollWithAnimation
          >
            <View>
              <View>
                {list.length === 0 && (
                  <View className="nodata">
                    <Image
                      className="nodata_img"
                      src={require("../../img/user/points.png")}
                      mode="aspectFill"
                    />
                    <View className="nodata_text">暂无积分记录</View>
                  </View>
                )}
                {list.map((item: any, key: number) => {
                  return (
                    <View className="list" key={key}>
                      <View className="list_block flex aitems sb">
                        <View className="left">
                          <View className="tip1">{item.remarkContent}</View>
                          <View className="tip2">{item.createTime}</View>
                        </View>
                        <View className="rights" style={item.style}>
                          {item.source === "1"
                            ? "+" + item.floatScore
                            : "-" + item.floatScore}
                        </View>
                      </View>
                    </View>
                  );
                })}
              </View>
              <View style="height: 20rpx"></View>
            </View>
          </ScrollView>

          {list.length > 0 && list.length < total && (
            <View className="upDragBox">
              {dargState === 0 ? (
                <Text style="color: #666">上拉加载更多</Text>
              ) : (
                <Loading size="24px">加载中...</Loading>
              )}
            </View>
          )}

          {list.length > 0 && list.length === total && (
            <View style="margin: 10rpx 0;text-align: center;">
              <Text style="color: #666;">已到底部</Text>
            </View>
          )}
        </View>
      </Block>
    );
  }
}

const mapStateToProps = (state) => ({
  userInfo: state.userInfo,
  otherSetting: state.otherSetting,
});
const mapDispatchToProps = (dispatch) => ({
  userRefresh(data) {
    dispatch(userRefresh(data));
  },
  otherSettingRefresh(data) {
    dispatch(otherSettingRefresh(data));
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(IntegralList);