<template>
  <view class="main">
    <view class="content">
      <view class="contentTitle">用户隐私保护政策确认</view>
      <view class="contentText"> 尊敬的用户： </view>
      <view class="contentText">
        为了更好的维护您的权益，我们对
        <text class="tips" @click="handleOpenPrivacyContract"
          >《皖美驿站隐私保护指引》</text
        >进行了更新，特向您推送本更新提示，请仔细阅读并充分理解相关条款。
      </view>
      <view class="contentText">
        您点击“立即授权”，即代表您已经阅读并同意更新后的<text
          class="tips"
          @click="handleOpenPrivacyContract"
          >《皖美驿站隐私保护指引》</text
        >条款。
      </view>
      <view class="imgbox">
        <image class="img" src="https://eshangtech.com/minTestImg/registerIcon.png" />
      </view>

      <div class="desc newBtnFixed" v-if="!user.MEMBERSHIP_ID">
        <!-- <div class="desc">申请获取你的公开信息(昵称、头像)</div> -->
        <button
          class="loginBtn"
          type="primary"
          open-type="getUserInfo"
          @getuserinfo="bindGetUserInfo"
        >
          手机号快捷登录
        </button>
      </div>
      <div
        class="desc newBtnFixed"
        v-else-if="user.MEMBERSHIP_ID && !user.MEMBERSHIP_MOBILEPHONE"
      >
        <button
          class="loginBtn"
          type="primary"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          快速登录账号
        </button>
      </div>

      <div class="cancelBtn" @click="handleCancel" v-if="showCancel">
        <div class="cancel">取消授权</div>
      </div>
    </view>

    <div class="page-body" v-if="false">
      <div class="top-regigter">
        <image src="https://eshangtech.com/ShopICO/login_logo.png"></image>

        <div class="desc" v-if="!user.MEMBERSHIP_ID">
          <!-- <div class="desc">申请获取你的公开信息(昵称、头像)</div> -->
          <button
            type="primary"
            open-type="getUserInfo"
            @getuserinfo="bindGetUserInfo"
          >
            手机号快捷登录
          </button>
        </div>
        <div
          class="desc"
          v-else-if="user.MEMBERSHIP_ID && !user.MEMBERSHIP_MOBILEPHONE"
        >
          <button
            type="primary"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
          >
            快速登录账号
          </button>
        </div>
      </div>

      <!-- <div class="bottom-content">
      <image class="logo1" src="../..https://eshangtech.com/wanmeiyizhanImg/logo.png"></image>
      <image class="logo2" src="../..https://eshangtech.com/wanmeiyizhanImg/yifu_logo.png"></image>
    </div> -->
      <div style="width: 100%; display: flex; justify-content: center">
        <view class="login-tip-text">
          该小程序仅供企业内部人员登录使用，<br />您的手机号是核实身份的唯一凭证。
        </view>
      </div>

      <view class="privacyMeng" v-if="showPrivacy"></view>
      <view class="privacy" v-if="showPrivacy">
        <view class="privacyContent">
          <p class="contentTitle">用户隐私保护提示</p>
          <view class="contentWord">
            感谢您使用本产品，您使用本产品前应当仔细阅读并同意<text
              class="tips"
              @click="handleOpenPrivacyContract"
              >《小程序隐私保护指引》</text
            >
            当您点击同意并开始使用产品服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束。如您拒绝，将无法更好的体验产品。
          </view>
        </view>
        <view class="btnList">
          <button class="btns noAgree" @click="handleRefuse">拒绝</button>
          <button
            class="btns agree"
            id="agree-btn3"
            open-type="agreePrivacyAuthorization"
            @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
          >
            同意
          </button>
        </view>
      </view>
    </div>
  </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      disable: true,
      isgetCode: false,
      getCodeText: "发送验证码",
      height: "",
      saveData: {
        mobile: "",
        code: "",
      },
      shouldNavback: false,
      showPrivacy: false, // 隐私弹框的东西
      showBtn: false, // 隐私权限有了之后 就会出来这俩按钮
      showCancel: true, // 显示取消按钮
    };
  },
  onLoad() {
    if (
      !this.user.MEMBERSHIP_ID ||
      (this.user.MEMBERSHIP_ID && !this.user.MEMBERSHIP_MOBILEPHONE)
    ) {
    } else {
      this.showCancel = false;
    }

    let systemInfo = uni.getStorageSync("systemInfo");
    this.height =
      systemInfo.windowHeight + (94 / 750) * systemInfo.windowWidth + "px";
    let _this = this;
    uni.getPrivacySetting({
      success: (res) => {
        console.log("res123123", res);
        if (res.needAuthorization) {
          _this.showPrivacy = true;
        } else {
          _this.showBtn = true;
        }
      },
    });
  },
  computed: {
    ...mapGetters({
      canIuse: "canIuse",
      user: "user",
      InviteCode: "InviteCode",
    }),
  },
  methods: {
    ...mapMutations({
      setUser: "setUser",
      setCanIUse: "canIuse",
      payForVip: "payForVip",
    }),
    // 打开隐私协议页面
    handleOpenPrivacyContract() {
      wx.openPrivacyContract({
        success: (success) => {
          console.log("success", success);
        }, // 打开成功
        fail: () => {}, // 打开失败
        complete: () => {},
      });
    },
    // 点击了同意
    handleAgreePrivacyAuthorization(e) {
      console.log("e1", e);
      this.showPrivacy = false;
      this.showBtn = true;
    },
    // 点击了拒绝
    handleRefuse() {
      this.showPrivacy = false;
    },
    // 取消授权
    handleCancel() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getPhoneNumber(e) {
      let _this = this;
      let _data = e.mp.detail;
      let user = _this.user;
      console.log("_data", _data);
      console.log("_this", _this);
      console.log("user", user);

      if (_data.errMsg.indexOf("ok") > -1) {
        let arr = {
          action_type: "BindPhone",
          encryptedData: encodeURIComponent(_data.encryptedData),
          sessionKey: encodeURIComponent(user.session_key),
          iv: encodeURIComponent(_data.iv),
          userUnionId: user.USER_UNIONID,
          WechatUserId: user.WechatUserId,
          recommendId: _this.InviteCode,
          requestType: "application/x-www-form-urlencoded",
        };
        _this.$api.postCoop(arr).then(function (rs) {
          console.log("rs", rs);
          rs = rs.Data;
          user.MEMBERSHIP_ID = rs.MEMBERSHIP_ID;
          user.MEMBERSHIP_NAME = rs.MEMBERSHIP_NAME;
          user.MEMBERSHIP_MOBILEPHONE = rs.MEMBERSHIP_MOBILEPHONE;
          user.INDUSTRY_MEMBERSHIP_ID = rs.INDUSTRY_MEMBERSHIP_ID;
          user.MEMBERSHIP_LEVEL_TEXT = rs.MEMBERSHIP_LEVEL_TEXT;
          user.MEMBERSHIP_TYPE = rs.MEMBERSHIP_TYPE;
          user.COUPON_COUNT = rs.COUPON_COUNT;
          _this.setUser(user);
          _this.setCanIUse(false);
          // _this.payForVip(true)
          // uni.switchTab({ url: "/pages/home/index" });
          uni.navigateBack({
            delta: 1,
          });
        });
      }
    },

    bindGetUserInfo(e) {
      // 申请权限
      let _this = this;
      let user = _this.user;
      let res = e.mp.detail;
      if (e.mp.detail) {
        // uni.getUserInfo({
        //   success (res) {
        console.log("user", this.user);
        let arr = {
          action_type: "WeChatAuthorize",
          encryptedData: encodeURIComponent(res.encryptedData),
          sessionKey: encodeURIComponent(user.session_key),
          iv: encodeURIComponent(res.iv),
          recommendId: _this.InviteCode,
          requestType: "application/x-www-form-urlencoded",
        };

        _this.$api.postCoop(arr).then(function (rs) {
          rs = rs.Data;
          user.USER_UNIONID = rs.USER_UNIONID;
          user.WechatUserId = rs.WechatUserId;
          user.MEMBERSHIP_ID = rs.MEMBERSHIP_ID;
          user.INDUSTRY_MEMBERSHIP_ID = rs.INDUSTRY_MEMBERSHIP_ID;
          user.MEMBERSHIP_NAME = rs.MEMBERSHIP_NAME;
          user.MEMBERSHIP_MOBILEPHONE = rs.MEMBERSHIP_MOBILEPHONE;
          user.ACCOUNT_BALANCE = rs.ACCOUNT_BALANCE;
          user.MEMBERSHIP_POINT = rs.MEMBERSHIP_POINT;
          user.MEMBERSHIP_TYPE = rs.MEMBERSHIP_TYPE;
          _this.showCancel = false;

          console.log("rs", rs);
          _this.setUser(user);
          _this.setCanIUse(false);
          _this.$forceUpdate();
        });
        //   }
        // })
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
  box-sizing: border-box;
  padding: 24rpx 32rpx;
  .content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 56rpx 64rpx;
    background: url("https://eshangtech.com/minTestImg/wanmeiyizhanRegister.svg")
      no-repeat;
    .contentTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 36rpx;
      color: #130f05;
      line-height: 52rpx;
      text-align: left;
      font-style: normal;
      text-align: center;
    }
    .contentText {
      margin-top: 40rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #130f05;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
      .tips {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
        color: #ba922f;
      }
    }
    .imgbox {
      width: 100%;
      height: 400rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 48rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .desc {
      font-size: 28rpx;
      text-align: center;
      margin-top: 64rpx;
    }
    .newBtnFixed {
      position: fixed;
      bottom: 200rpx;
      left: 68rpx;
      width: calc(100% - 139rpx);
      .loginBtn {
        background: #ba922f !important;
      }
    }
    .cancelBtn {
      position: fixed;
      bottom: 100rpx;
      left: 68rpx;
      width: calc(100% - 139rpx);
      padding: 18rpx 0;
      text-align: center;
      color: #130f05;
      border-radius: 8rpx;
      background: #f2f2f2;
      .cancel {
        font-size: 32rpx;
        text-align: center;
      }
    }
  }

  .cancelBtn {
    position: fixed;
    bottom: 100rpx;
    left: 68rpx;
    width: calc(100% - 139rpx);
    padding: 18rpx 0;
    text-align: center;
    color: #130f05;
    border-radius: 8rpx;
    background: #f2f2f2;
    .cancel {
      font-size: 32rpx;
      text-align: center;
    }
  }
}

.page-body {
  padding: 48rpx 46rpx;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh);
}

.top-regigter {
  // padding 48rpx 0
  text-align: center;
  // height 390rpx
  width: 100%;

  image {
    width: 562rpx;
    height: 448rpx;
  }
}

.phone-input,
.code-input {
  height: 114rpx;
  border-bottom: 1rpx solid #f5f5f5;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  background-color: #fff;
  padding-left: 16rpx;

  label {
    color: #383838;
    width: 198rpx;
  }

  input {
    color: #383838;
    width: 260rpx;
  }
}

.get-code {
  color: #a6a6a9;
  border: 1rpx solid #a5a5a8;
  border-radius: 6rpx;
  text-align: center;
  width: 178rpx;
  height: 46rpx;
  line-height: 46rpx;
  background-color: #fff;
}

.submit-btn {
  background-color: #383838;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  width: 660rpx;
  font-size: 32rpx;
  margin-top: 80rpx;
  text-align: center;
  color: #fff;
}

.cantsubmit {
  background-color: #9c9b9c;
}

.rule-box {
  margin-top: 340rpx;
  padding-bottom: 40rpx;
  font-size: 28rpx;
  text-align: center;
}

.rule-text {
  color: #4089e5;
}

.hover-code {
  opacity: 1;
}

.hover-code:hover {
  opacity: 0.1;
  background-color: #000;
  transition: all 1s ease;
}

button {
  font-size: 32rpx;
  margin-top: 32rpx;
}

.title {
  text-align: center;
}

.desc {
  font-size: 28rpx;
  text-align: center;
  margin-top: 64rpx;
}

.bottom-content {
  display: flex;
  align-items: center;
  justify-content: center;

  .logo1 {
    width: 93rpx;
    height: 99rpx;
  }

  .logo2 {
    margin-left: 64rpx;
    width: 64rpx;
    height: 84rpx;
  }
}

.login-tip-text {
  position: sticky;
  bottom: 120rpx;
  left: 0;
  // width: 580rpx;
  z-index: 99;
  text-align: center;
  font-size: 26rpx;
  color: #888;
}

.privacyMeng {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999998;
}

.privacy {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
  z-index: 999999;
  border-top-right-radius: 24px;
  border-top-left-radius: 24px;
  background: #fff;

  .privacyContent {
    .contentTitle {
      font-size: 48rpx;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #000000;
      line-height: 56rpx;
    }

    .contentWord {
      margin-top: 32rpx;
      text-indent: 2em;

      .tips {
        font-size: 28rpx;
        font-family: Source Han Sans CN-Normal, Source Han Sans CN;
        font-weight: 400;
        color: #8bc21f;
        line-height: 33rpx;
      }
    }
  }

  .btnList {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 48rpx;

    .btns {
      display: inline-block;
      padding: 0 90rpx;
      border-radius: 15rpx;
    }

    .noAgree {
      background: rgb(242, 242, 242);
      color: rgb(26, 187, 107);
      font-weight: 600;
    }

    .agree {
      background: rgb(26, 187, 107);
      color: #fff;
      font-weight: 600;
    }
  }
}
</style>
