import classnames from "classnames";
import dayjs from "dayjs";
import Taro from "@tarojs/taro";
import { Component, PropsWithChildren } from "react";
import {
  Block,
  View,
  Text,
  Image,
  Swiper,
  SwiperItem,
} from "@tarojs/components";

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

/** 自定义组件 **/
import AtCalendar from "../../components/calendar";
import PopupPrivacy from "../../components/popup/popup-privacy";

import PopupSiteSwiper from "../../components/popup/popup-site-swiper";
import PopupAlert from "../../components/popup/popup-alert";
import type CustomTabBar from "../../custom-tab-bar";
import Navbar from "../../components/navbar/navbar";
/** 自定义组件 **/

import {
  RefreshWxUserInfo,
  GetNoReadMessageNum,
  GetOtherSetting,
  GetSitePopupList,
  GetSiteCarousel,
  GetSiteAddTag,
} from "../../utils/Interface";

// css引入
import "taro-ui/rn/style/components/calendar.scss";
import "./index.less";
import { go, msg } from "../../utils/traoAPI";

// PropsWithChildren
class Index extends Component<any, any> {
  pageCtx = Taro.getCurrentInstance().page;

  constructor(props) {
    super(props);
    this.state = {
      isShowIndexFlag: this.props.isShowIndexFlag,
      isShowPrivacyPopup: false,
      isShowSiteSwiper: false,
      isNotRegister: false, // 是否未注册
      isDev: false, // 正在开发提示
      sitePopupList: [], // 站点管理列表
      // imgUrl: this.app.globalData.imgUrl,
      userinfo: {
        mobile: this.props.mobile,
      },
      connectInstrument: {},
      yiqiinfo: {},
      titleHeight: "",
      menu: {
        top: 44,
        height: 0,
      },
      list: [],
      params: "",
      messageCount: Taro.getStorageSync("messageCount") || 0,
      offlineDialogType: 1, //1离线弹窗 2升级弹窗
      offlineDialogForce: 0, //0可选是否升级  1强制升级
      versioninfo: {}, //仪器版本号,
      info: {}, // 护理推荐点击参与活动的信息
      weekinfo: undefined,
      currentDate: dayjs().format("YYYY-MM-DD"),
      // 横幅轮播
      bannerList: [],
      bannerCurrent: 0,
    };
  }

  async onLoad() {
    const isFirst = Taro.getStorageSync("isWelcome");
    if (!isFirst) {
      go("/pages/initiate/initiate");
    }

    const menu = Taro.getMenuButtonBoundingClientRect();
    this.setState({ menu });
  }

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {
    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
    tabbar?.setSelected(0);

    this.showInit();
  }

  componentDidHide() {}

  showInit() {
    const isFirst = Taro.getStorageSync("isWelcome");
    const mobile = Taro.getStorageSync("mobile");
    if (isFirst) {
      this.checkShowPrivacyPopup();
      this.GetSitePopupList();
      this.GetSiteCarousel();
      // this.GetOtherSetting(); // 获取小程序设置：商城地址和版本

      if (mobile) {
        this.GetNoReadMessageNum(); // 查询是否有消息
        this.RefreshWxUserInfo();

        // if (!this.state.isShowIndexFlag) {
        //   // 仅初次进入首页运行
        //   this.GetSitePopupList();
        //   this.props.setIndexFlag(true);
        // }
      }
    }
  }

  // 检测是否弹出隐私协议
  checkShowPrivacyPopup() {
    const isPrivacy = Taro.getStorageSync("isPrivacy");
    if (isPrivacy !== "true") {
      Taro.getPrivacySetting({
        success: (res) => {
          // console.log("检测是否弹出隐私协议", res); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
          if (res.needAuthorization) {
            // 需要弹出隐私协议
            const isPrivacyPopup = Taro.getStorageSync("isPrivacyPopup");
            if (!isPrivacyPopup) {
              // 隐私确认弹窗
              this.setState({ isShowPrivacyPopup: true });
              Taro.setStorageSync("isPrivacy", "true");
            }
          } else {
            // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
          }
        },
        fail: () => {},
        complete: () => {},
      });
    }
  }

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

  // 获取消息数量
  GetNoReadMessageNum = async () => {
    let res = await GetNoReadMessageNum();
    if (res.data.code === 200) {
      Taro.setStorageSync("messageCount", res.data.data);
      this.setState({ messagecount: res.data.data });
    }
  };

  // 获取小程序设置
  GetOtherSetting = async () => {
    let res = await GetOtherSetting();
    if (res.data.code === 200) {
      this.props.otherSettingRefresh(res.data.data);
    }
  };

  // 获取站点管理-弹窗列表 1-首页 2-发现模块 3-活动模块
  GetSitePopupList = async () => {
    let res = await GetSitePopupList(1);
    if (res.data.code === 200) {
      // console.log("GetSitePopupList", res);
      if (res.data.data) {
        if (res.data.data.length) {
          this.setState({
            sitePopupList: res.data.data,
            isShowSiteSwiper: true,
          });
        }
      } else {
        // msg("暂无数据");
      }
    }
  };

  // 获取站点管理-广告轮播列表
  GetSiteCarousel = async () => {
    let res = await GetSiteCarousel();
    if (res.data.code === 200) {
      if (res.data.data) {
        this.setState({ bannerList: res.data.data });
      }
    }
  };

  GetSiteAddTag = async (id) => {
    let res = await GetSiteAddTag(id);
    console.log("tag", res.data);
    if (res.data.code === 200) {
      if (res.data.data) {
      }
    }
  };

  goRegister() {
    go("/pages/register/register");
  }

  // 新增设备
  addNewDevice = () => {
    this.isRegister();
    if (this.isRegister()) {
      // todo
      go("/pages/instrument/instrument");
    }
  };

  // 是否已注册
  isRegister() {
    let mobile = Taro.getStorageSync("mobile");
    if (!mobile) {
      this.alertRegister();
      return false;
    }
    return true;
  }

  showPrivacy = () => {
    this.setState({ isShowPrivacyPopup: true });
  };

  closePrivacy = () => {
    this.setState({ isShowPrivacyPopup: false });
  };

  closeAlert = () => {
    this.setState({ isNotRegister: false });
  };

  public alertRegister = () => {
    this.setState({ isNotRegister: true }); // 打开弹窗
    // if (!this.props.mobile) {
    //   this.setState({ isNotRegister: true }); // 打开弹窗
    //   return;
    // } else {
    //   go("/pages/instrument/instrument");
    // }
  };

  onTimeChange = (value) => {
    console.log("onTimeChange", value);
    this.setState({ currentDate: value });
  };

  // 护理记录
  toNursingRecords = () => {
    go("/pages/recording/recording");
  };

  gourl = (e) => {
    const { url } = e.currentTarget.dataset;
    if (this.isRegister()) {
      go(url);
    }
  };

  closeDev = () => {
    this.setState({ isDev: false });
  };

  closeSiteSwiper = () => {
    this.setState({ isShowSiteSwiper: false });
  };

  bannerSwiperchange() {}

  gobanner(item) {
    // 跳转类型：0无跳转、1跳转内部链接、3跳转外部链接、4跳转小程序、5导向视频号、6导向视频号直播间',
    /**
     *  `link`  ： '跳转链接（跳转外部链接、跳转内部链接）',
        `link_params` ： '跳转链接参数（跳转内部链接）',
        `redirect_appid` ： '外链小程序appid（跳转小程序）',
        `redirect_url` ： '外链小程序url（跳转小程序）',
        `video_no` ： '视频号（导向视频号、导向视频号直播间）',
        `feed_id` ： '视频号feedId（导向视频号）',
    */
    let { type, id } = item;
    this.GetSiteAddTag(id);

    if (type === 0) {
      return;
    }
    switch (type) {
      case 1: // 跳转内部链接
        if (item.linkParams) {
          Taro.reLaunch({
            url: item.link + "?" + item.linkParams,
          });
        } else {
          Taro.reLaunch({
            url: item.link,
          });
        }
        break;
      case 3: // 跳转外部链接
        if (item.linkParams) {
          Taro.navigateTo({
            url:
              "/pages/webViewPage/webViewPage?url=" +
              item.link +
              "?" +
              item.linkParams,
          });
        } else {
          Taro.navigateTo({
            url: "/pages/webViewPage/webViewPage?url=" + item.link,
          });
        }
        break;
      case 4: // 跳转小程序
        Taro.navigateToMiniProgram({
          appId: item.redirectAppid,
          path: item.redirectUrl,
          success: (res) => {
            // 打开成功
            console.log("跳转小程序success", res);
          },
          fail: (res) => {
            console.log("跳转小程序fail", res);
          },
        });
        break;
      case 5: // 跳转视频号
        Taro.openChannelsActivity({
          finderUserName: item.videoNo,
          feedId: item.feedId,
          success: (res) => {
            // 打开成功
            console.log("跳转视频号success", res);
          },
          fail: (res) => {
            console.log("跳转视频号fail", res);
          },
        });
        break;
      case 6: // 跳转视频号直播间
        Taro.openChannelsLive({
          finderUserName: item.videoNo,
          feedId: item.feedId,
          success: (res) => {
            // 打开成功
            console.log("视频号直播间success", res);
          },
          fail: (res) => {
            console.log("视频号直播间fail", res);
          },
        });
        break;
    }
  }

  render() {
    let {
      currentDate,
      messagecount,
      sitePopupList,
      isShowPrivacyPopup,
      isNotRegister,
      isShowSiteSwiper,
      isDev,

      bannerList,
      bannerCurrent,
    } = this.state;

    console.log("bannerList", bannerList);
    return (
      <Block>
        <PopupAlert
          isShow={isNotRegister}
          title="提示"
          content="暂未授权注册，请点击注册"
          confirmButtonText="确定"
          textAlgin="center"
          type="1"
          close={this.closeAlert}
          confirm={this.closeAlert}
        />
        <PopupAlert
          isShow={isDev}
          title="提示"
          content="页面正在开发中"
          confirmButtonText="确定"
          textAlgin="center"
          close={this.closeDev}
          confirm={this.closeDev}
        />
        <PopupPrivacy
          isShow={isShowPrivacyPopup}
          closePrivacy={this.closePrivacy}
        />

        <PopupSiteSwiper
          isShow={isShowSiteSwiper}
          siteData={sitePopupList}
          size="middle"
          confirmButtonText="确定"
          textAlgin="center"
          close={this.closeSiteSwiper}
          confirm={this.closeSiteSwiper}
        />
        <Navbar
          leftSlot={
            <Block>
              <View
                className="message"
                onClick={this.gourl}
                data-url="/pages/message/message"
              >
                <Image
                  className="message-img"
                  src={require("../../img/index/message.png")}
                  mode="aspectFill"
                ></Image>
                {messagecount ? <View className="tip"></View> : ""}
              </View>
            </Block>
          }
        ></Navbar>
        <View className="index">
          <View className="date-title" onClick={this.toNursingRecords}>
            <Text style={{ fontSize: "26rpx", color: "#666" }}>护理记录</Text>
            <View className="at-icon at-icon-chevron-right"></View>
          </View>
          <View className="bg-while">
            <AtCalendar
              hideArrow={true}
              isSwiper={false}
              currentDate={currentDate}
              maxDate={Date.now()}
              onTimeChange={this.onTimeChange}
            />
          </View>
        </View>
        <View className="infobox5">
          <View
            className={classnames("nurse_plan_box", "flex", "aitems", "sb")}
          >
            <View className="title">前往护理</View>
          </View>
          <View
            className={classnames(
              "add_device",
              "flex",
              "jcenter",
              "aitems",
              "bg-while"
            )}
          >
            <View className="add_device_btn">
              <View className="txt_box flex jcenter aitems">
                <View
                  className="at-icon at-icon-add"
                  style="color: #fff"
                ></View>
                <View className="txt" onClick={this.addNewDevice}>
                  添加新设备
                </View>
              </View>
            </View>
            <View className="tips">您暂时还没有绑定任何设备</View>
          </View>
        </View>

        {/* <View className="infobox7">
          <View className="nurse_recommend_box flex  aitems sb">
              <View className="title">护理推荐</View>
              <View className="txt_box flex jcenter aitems" data-url="/pages/care_plan/list/list" onClick={this.goCarePlanList}>
                  <View className="txt">更多</View>
                  <Image className="right_icon" src="/img/index-right.png" mode="aspectFill"></Image>
              </View>
          </View>
          <ScrollView className="scroll_View" enable-flex scroll-x>
              <View className="recommend_list flex">
                  <Block wx:for="{{carePlanList}}" wx:key="index">
                      <View className="recommend_item" data-url="/pages/care_plan/detail/detail?id={{item.id}}" onClick={this.gourl}>
                          <Image className="banner_img" src={imgUrl+item.indexBanner} mode="aspectFill"></Image>
                          <View className="bottom flex sb fc">
                              <View className="title ellipsis2">{{item.title}}</View>
                              <View className="join_in {{carePlan.activity.id==item.id&&carePlan.join.status==1?'disabled':''}}">
                                  <Block wx:if="{{carePlan.activity.id===item.id&&carePlan.join.status==1}}">参与中</Block>
                                  <Block wx:else>参与</Block>
                              </View>
                          </View>
                      </View>
                  </Block>
              </View>
          </ScrollView>
        </View> */}

        {/* {bannerList.length && (
          <View className="infobox3">
            <Swiper
              autoplay={true}
              onAnimationFinish={this.bannerSwiperchange.bind(this)}
              current={bannerCurrent}
            >
              {bannerList.map((item, index) => {
                return (
                  <SwiperItem
                    key={"banner_" + index}
                    onClick={this.gobanner.bind(this)}
                    data-item={item}
                  >
                    <Image src={item.fileUrl} />
                  </SwiperItem>
                );
              })}
            </Swiper>
          </View>
        )} */}
        <View className="infobox3">
          <Swiper
            autoplay={true}
            onAnimationFinish={this.bannerSwiperchange.bind(this)}
            current={bannerCurrent}
          >
            {bannerList.map((item, index) => {
              return (
                <SwiperItem
                  key={"banner_" + index}
                  onClick={this.gobanner.bind(this, item)}
                >
                  <Image src={item.fileUrl} />
                </SwiperItem>
              );
            })}
          </Swiper>
        </View>
      </Block>
    );
  }
}

const mapStateToProps = (state) => ({
  background: state.navigation.background,
  mobile: state.userInfo.mobile,
  isShowIndexFlag: state.globalStore.isShowIndexFlag,
});
const mapDispatchToProps = (dispatch) => ({
  userRefresh(data) {
    dispatch(userRefresh(data));
  },
  otherSettingRefresh(data) {
    dispatch(otherSettingRefresh(data));
  },
  setIndexFlag(data) {
    dispatch(setIndexFlag(data));
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(Index);