<template>
  <view class="">
    <view class="load">
      <u-loading-page
        loading-color="#61b077"
        color="#61b077"
        :loading="loading"
      ></u-loading-page>
    </view>
    <view class="we-run-page">
      <view class="contant">
        <image
          src="../../static/img/run/bg.png"
          class="bg"
          mode="widthFix"
        ></image>
        <view class="banner">
          <image
            class="img"
            src="../../static/img/run/banner.png"
            mode="scaleToFill"
          ></image>
        </view>
        <view class="we-run-container">
          <image
            src="../../static/img/run/runBg.png"
            class="run-logo"
            mode="widthFix"
          ></image>
          <view class="run-step-number">
            <text class="title">今日步数</text>
            <view class="steps" v-if="unregistered">
              <text class="num">{{ todayNum ? todayNum : "--" }}</text>
            </view>
            <view v-else class="steps-empower">
              <u-button
                open-type="getPhoneNumber"
                @getphonenumber="getInfoPhoneNumber"
                type="primary"
                size="normal"
                color="#00c791"
                :plain="true"
                text="授权查看"
              ></u-button>
            </view>
            <view v-if="unregistered && todayNum" class="steps-empower">
              <u-button
                type="primary"
                size="normal"
                @click="runRecord"
                color="#00c791"
                :plain="true"
                text="查看步数记录"
              >
              </u-button>
            </view>
          </view>
          <!-- <image src="../../static/img/run/ranking_btn.png" class="ranking_btn" mode="widthFix"></image> -->
          <!-- 模块 -->
		  <view class="noticeTips">
		  	<u-notice-bar :text="notice" speed="50" ></u-notice-bar>
		  </view>
          <view class="runDataExplain">
            <view class="runData-ul sh-flex">
              <view
                class="runData-li"
                v-for="(item, index) in iconList"
                :key="index"
                @click="lookMode(item.name)"
              >
                <image :src="item.img" mode="widthFix" alt=""></image>
                <text class="name">{{ item.name }}</text>
              </view>
            </view>
          </view>
		  
		  <view class="we-run-good" @click="changeTabBar('商城')">
		    <image
		      class="img"
		      src="../../static/img/run/goodsThing.png"
		      mode="scaleToFill"
		    ></image>
		  </view>
        </view>
       
      </view>
      <u-tabbar
        :value="tabBarVal"
        @change="changeTabBar"
        :fixed="true"
        :placeholder="true"
        activeColor="#00c791"
        :safeAreaInsetBottom="true"
      >
        <u-tabbar-item text="步数" name="步数">
          <image
            class="u-page__item__slot-icon"
            slot="active-icon"
            src="../../static/img/run/tabbar_Index1.png"
          >
          </image>
          <image
            class="u-page__item__slot-icon"
            slot="inactive-icon"
            src="../../static/img/run/tabbar_Index.png"
          >
          </image>
        </u-tabbar-item>
        <u-tabbar-item text="商城" name="商城">
          <image
            class="u-page__item__slot-icon"
            slot="active-icon"
            src="../../static/img/run/tabbar_shop1.png"
          >
          </image>
          <image
            class="u-page__item__slot-icon"
            slot="inactive-icon"
            src="../../static/img/run/tabbar_shop.png"
          >
          </image>
        </u-tabbar-item>
      </u-tabbar>
    </view>
  </view>
</template>
<script>
import http from "@/shopro/request/index";
import store from "@/shopro/store";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      loading: true,
      unregistered: true,
      tabBarVal: "步数",
      registerPopup: true, 
      tips: "获取",
      seconds: 10,
      checkSessionStatus: false,
	  notice:"说明：本应用仅向本单位工会内部授权手机号开放使用，首次使用需要授权手机号来进行身份验证。",
      iconList: [
        {
          img: require("../../static/img/run/walk-icon1.png"),
          name: "新闻公告",
        },
        {
          img: require("../../static/img/run/walk-icon2.png"),
          name: "活动投票",
        },
        {
          img: require("../../static/img/run/walk-icon3.png"),
          name: "建议反馈",
        },
        {
          img: require("../../static/img/run/walk-icon4.png"),
          name: "员工调研",
        },
        {
          img: require("../../static/img/run/walk-icon5.png"),
          name: "特卖专区",
        },
        {
          img: require("../../static/img/run/walk-icon6.png"),
          name: "兑换奖励",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["userInfo", "todayNum", "wxCode"]),
  },
  methods: {
    ...mapActions([
      "getPhoneNumber",
      "registerInfoFn",
      "getWeRunDataFn",
      "authCheck",
      "getUserInfo",
      "checkValidSession",
    ]),
    // 切换底部tab;
    changeTabBar(name) {
      this.tabBarVal = name;
      if (name == "商城") {
        if (!this.unregistered) {
          this.$u.toast("点击授权进行注册");
          return false;
        }
        uni.navigateTo({
          url: "/pages/h5/index",
        });
      }
    },
    // 获取手机号
    async getInfoPhoneNumber(e) {
      let number = await this.getPhoneNumber(e);
      let register = await this.registerInfoFn();
      if (register) {
        //注册成功，再掉获取步数接口
        this.unregistered = true;
        let runData = await this.getWeRunDataFn();
      }
    },
    async authAndWeRun() {
      let auth = await this.authCheck();
      console.log("调用authcheck的值" + auth);
      this.loading = false;
      if (auth == 0) {
        let runData = await this.getWeRunDataFn();
        console.log("调用this.loading的值" + this.loading);
        runData && (this.unregistered = true);
      } else if (auth == 2001) {
        this.unregistered = false;
      }
      console.log("调用this.loading的值" + this.loading);
    },
    async loginSession() {
      let token = uni.getStorageSync("token");
      let that = this;
      //
      /**
				 * session有效{
					 用户注册：token有/无/失效  homepaeg- authcheck(2001)- code-wxRun
					 用户未注册：token有/无  authcheck(1001)-homepage-code-手机号-注册-wxRun（点击授权登录）
				 }
				 * session无效{
					用户注册：token有/无/失效 login-更新session -homepage -authcheck - wxrun
					用户未注册：token无/失效  login-更新session -homepage -authcheck （点击授权登录）
				 }
				
				 * *
				*/
      if (this.checkSessionStatus && token) {
        this.loading = true;
        let token = uni.getStorageSync("token");
        console.log("token的值====================" + token);
        this.authAndWeRun();
      } else {
        // session 不存在，调用login。userInfo 。更新session
        this.loading = false;
        uni.login({
          success: function (info) {
            //调用code 
            that.$store.commit("wxCode", info.code); //按钮切换全选。
            let userInfo = that.getUserInfo(info.code);
            userInfo.then((res) => {
              that.authCheck().then((checkCode) => {
                console.log("处理lll" + checkCode);
                if (checkCode == 0) {
                  that.unregistered = true;
                  that.getWeRunDataFn().then((runData) => {});
                } else if (checkCode == 2001) {
                  that.unregistered = false;
                }
              });
            });
          },
          fail: function (err) {
            console.log(err);
            uni.showToast({
              title: err,
              duration: 2000,
              icon: "none",
            });
          },
        });
      }
    },
    async getAuth() {
      let that = this;
      uni.checkSession({
        //校验session
        success(res) {
          //有效
          if (res.errMsg === "checkSession:ok") {
            that.checkSessionStatus = true;
            // 如果有缓存信息
            that.loginSession();
          }
        },
        fail(err) {
          //无效
          console.log("无效session");
          that.checkSessionStatus = false;
          that.loginSession();
        },
      });
    },
    // 查看模块
    lookMode(name) {
      if (name == "特卖专区") {
        this.changeTabBar("商城");
      } else {
		uni.showToast({
			title: "此功能暂未启用，敬请期待",
			duration: 2000,
			icon:'none'
		});
      }
    },
    runRecord() {
      uni.navigateTo({ url: "/pages/h5/walkingRecord" });
    },
  },
  onHide() {},
  onShow() {
    this.tabBarVal = "步数";  
    this.getAuth();
  },
  onReady() {
	  wx.clearStorage();
  },
  onShareAppMessage(res) {
    return { 
      path: "pages/index/index",
    };
  },
};
</script>
<style lang="scss" scoped> 
.we-run-page {
  background-color: #fff;

  .contant {
    height: calc(100% - 100px - env(safe-area-inset-bottom));
    box-sizing: border-box; 
    .bg {
      width: 100%;
    }

    .banner {
      position: absolute;
      top: 0;
      text-align: center;
      width: 95%;
	  margin:20rpx;
	  height: 100rpx;
      .img {
        width: 100%;
        border-radius: 20rpx;
		    height: 260rpx;
      }
    }

    .we-run-container {
      position: absolute;
      top: 300rpx;
      text-align: center;
      width: 100%;

      .run-logo {
        width: 425rpx;
      }

      .run-step-number {
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        top: 175rpx;

        .title {
          font-size: 25rpx;
        }

        .steps {
          font-size: 25rpx;

          .num {
            font-size: 57rpx;
            font-weight: bold;
          }
        }

        .steps-empower {
          margin-top: 30rpx;
          font-size: 20rpx;
        }
      }
		.noticeTips{
			padding:20rpx;
			margin-top:20rpx ;
		}
      .runDataExplain {
        width: 90%;
        margin: 10px auto;
		margin-bottom:0;
        .runData-ul {
          flex: 1;
          flex-flow: wrap;
          justify-content: center;
          align-items: center;
        }
        .runData-li {
          width: 33.33%;
          margin-bottom: 30rpx;
          image {
            width: 80rpx;
			max-height: 80rpx;
            display: block;
            margin: 0 auto;
            margin-bottom: 20rpx;
          }
		  .name{
			  font-size: 28rpx;
		  }
        }
      }

      .ranking_btn {
        margin-top: 100rpx;
        height: 120rpx;
      }
    }
    .we-run-good {
	 width: 95%;
	 margin: 0 auto;
	 margin-bottom: 180rpx;
	  image{
		  width: 100%;
		  height: 215rpx;
	  }
    }
  }

  .registre-popup {
    margin: 60rpx 0;
    padding: 0 40rpx;

    .btn {
    }
  }
}

.u-page__item__slot-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
