<template>
  <view class="login" :style="vuex_theme">
    <!-- <view style="width: '100%'; height: '100%'"> -->
    <image
      style="width: 100%; height: 100%"
      :src="vuex_baseImgUrl && `${vuex_baseImgUrl}logo_bg.png`"
    />
    <!-- </view> -->

    <view class="box">
      <view class="logo">
        <image
          style="width: 446rpx; height: 240rpx"
          :src="vuex_baseImgUrl && `${vuex_baseImgUrl}logo.png`"
        />
      </view>

      <view class="btn button_warp">
        <c-button
          type="confirm"
          text="手机号一键登录"
          :disabled="isDisable"
          openType="getPhoneNumber"
          @getPhoneNumber="getPhoneNumber"
          @click="getUserProfile"
        ></c-button>
      </view>

      <view class="changeLogin" @click="handelMobileLogin">
        手机号码登录/注册
      </view>

      <view class="agreement">
        <view class="check">
          <u-checkbox-group @change="checkboxChange" v-model="checked">
            <u-checkbox
              size="30"
              activeColor="var(--primary-color)"
              shape="circle"
            >
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="text">
          <text>您已阅读理解并同意</text>
          <text class="span" @click="linkService">《服务协议》、</text>
          <text class="span" @click="linkPolicy">《隐私政策》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      isDisable: false,
      checked: [""],
      service: "https://hropublic.oss-cn-beijing.aliyuncs.com/agreement/%E6%A0%A1%E8%81%8C%E9%80%9A%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.html",
      policy: "https://hropublic.oss-cn-beijing.aliyuncs.com/agreement/%E6%A0%A1%E8%81%8C%E9%80%9A%E9%9A%90%E7%A7%81%E5%8D%8F%E8%AE%AE.html",
      form: {
        mobile: "",
        password: "",
      },
    };
  },

  onLoad() {
    if (this.vuex_appId == 'wxac18386e35824192') {
      // 新华
      this.service = "https://hropublic.oss-cn-beijing.aliyuncs.com/APP/xhsx/1-%20%E6%96%B0%E5%8D%8E%E5%AE%9E%E4%B9%A0%E7%94%A8%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE(%E6%B8%85%E6%B4%81%E7%89%88).html"
      this.policy = "https://hropublic.oss-cn-beijing.aliyuncs.com/APP/xhsx/1.1-%20%E6%96%B0%E5%8D%8E%E5%AE%9E%E4%B9%A0%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96(%E6%B8%85%E6%B4%81%E7%89%88).html"
    }
  },

  onShow() {},

  watch: {
    checked: function (newVal, oldVal) {
      this.isDisable = newVal.length != 0 ? false : true;
    },
  },

  computed: {
    ...mapState("user", {
      // 箭头函数可使代码更简练
      isReg: "isReg",
    }),
  },

  methods: {
    linkService() {
      console.log(this);
      this.$u.route({
        url: `/pages/common/webview/webview?navtitle=服务协议&url=${this.service}`,
      });
    },

    linkPolicy() {
      this.$u.route({
        url: `/pages/common/webview/webview?navtitle=隐私政策&url=${this.policy}`,
      });
    },

    checkboxChange(n) {
      console.log(n);
    },

    getUserProfile() {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      if (this.isDisable) {
        return
      }
      wx.getUserProfile({
        desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log("getUserProfile...", res);
          // this.$store.commit('setWenxinUserInfo', res);
          this.$u.vuex("vuex_weixinUserInfo", res.userInfo);
        },
      });
    },

    getPhoneNumber(e) {
      if (this.isDisable) {
        return
      }

      wx.login({
        success: (res) => {
          console.log(res);

          this.$store.dispatch(`user/login`, {
            way: "wechat_code",
            type: "teacher",
            jsCode: res.code,
            code: e.detail.code,
          });
        },
      });
    },

    handelMobileLogin() {
      this.$u.route({
        url: "/pages/main/my/mobileLogin/mobileLogin",
        params: {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;

  .box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    .logo {
      padding: 156rpx 0 0 0;
      width: 446rpx;
      margin: 0 auto;
    }

    .changeLogin {
      width: 100%;
      text-align: center;
      margin: 48rpx 0 0 0;
      font-size: 15px;
      font-weight: 400;
      color: var(--primary-color);
    }

    .agreement {
      position: fixed;
      left: 0;
      bottom: 34rpx;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      font-size: 24rpx;
      margin: 30rpx 0 32rpx 0;
      padding: 0 50rpx;

      .check {
        width: 40rpx;
        padding: 3rpx 0 0 0;
        // display: inline-block;
      }

      .text {
        // display: inline-block;
        color: rgba(0, 0, 0, 0.45);

        .span {
          color: var(--primary-color);
        }
      }
    }

    .form {
      margin: 30rpx 60rpx 0px;
    }

    .btn {
      margin-top: 80rpx;
      padding: 0 48rpx;
    }

    .wxLogin {
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 180rpx;

      button {
        background-color: transparent;
      }

      button::after {
        border: initial;
      }

      image {
        width: 96rpx;
        height: 96rpx;
      }

      text {
        margin-top: 0rpx;
      }
    }
  }
}
</style>