<template>
  <view class="page" :style="vuex_theme">
    <view class="login">
      <view class="title-v">
        <view class="title"> 手机号快速登录 </view>
        <image
          src="https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/excellet-working/loginclose.jpg"
          @click="closeX"
          alt=""
        />
      </view>
      <view class="agreement">
        <view class="check">
          <u-checkbox-group @change="checkboxChange">
            <u-checkbox
              size="36"
              activeColor="var(--primary-color)"
              v-model="checked"
              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>
          <text class="span" @click="linkZs">《知识产权保护规则》</text>
        </view>
      </view>
      <view class="btn">
        <button
          shape="circle"
          :disabled="!checked"
          scope="phoneNumber"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          style="
            border-radius: 24px;
            font-size: 17px;
            font-weight: 400;
            overflow: visible;
          "
          :style="{
            'background-color': checked
              ? 'var(--primary-color)'
              : 'rgba(0, 0, 0, 0.06)',
            color: checked ? '#fff' : 'rgba(0, 0, 0, 0.45)',
          }"
        >
          手机号一键登录
        </button>

        <!-- <c-button type="confirm" shape="circle"
					:customStyle="{borderRadius:'48rpx',fontSize:'34rpx',color:'#fff',fontWeight:'400'}" text="手机验证码/账号密码登录"
					:disabled="!checked" @click="jumploginStyle"></c-button> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "yxly-login",
  props: {},
  data() {
    return {
      checked: false,
      service:
        "https://hropublic.oss-cn-beijing.aliyuncs.com/APP/alipay-recruit/%E6%99%BA%E7%94%A8%E5%B7%A5%E7%94%A8%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.html",
      policy:
        "https://hropublic.oss-cn-beijing.aliyuncs.com/APP/alipay-recruit/%E6%99%BA%E7%94%A8%E5%B7%A5%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.html",
      zs: "https://hropublic.oss-cn-beijing.aliyuncs.com/APP/alipay-recruit/%E6%99%BA%E7%94%A8%E5%B7%A5%E7%9F%A5%E8%AF%86%E4%BA%A7%E6%9D%83%E4%BF%9D%E6%8A%A4%E8%A7%84%E5%88%99.html",
    };
  },

  mounted() {
    if (this.vuex_appId == "wx2a515776284cae17") {
      // 新华
      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";
      this.zs =
        "https://hropublic.oss-cn-beijing.aliyuncs.com/APP/xhsx/1.2-%E6%96%B0%E5%8D%8E%E5%AE%9E%E4%B9%A0%E7%9F%A5%E8%AF%86%E4%BA%A7%E6%9D%83%E4%BF%9D%E6%8A%A4%E8%A7%84%E5%88%99(%E6%B8%85%E6%B4%81%E7%89%88).html";
    }
  },
  methods: {
    checkboxChange() {},

    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}`,
      });
    },

    linkZs() {
      this.$u.route({
        url: `/pages/common/webview/webview?navtitle=知识产权保护规则&url=${this.zs}`,
      });
    },

    closeX() {
      this.$emit("clickX");
    },

    // 按钮点击
    getPhoneNumber(e) {
      console.log("1111111", e);
      // this.getUserProfile();
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        const { encryptedData, sign } = e.detail;
        const mobile_code = {
          response: encryptedData,
          sign,
        };
        this.$store
          .dispatch(`user/phoneLogin`, {
            grant_type: "zfb_authorization_code",
            scope: "global_access:end_user",
            wx_app_id: this.vuex_appId,
            mobile_code: JSON.stringify(mobile_code),
            // islangch: '0'
          })
          .then((res) => {
            this.checked = false;
            this.$emit("clickX");
            if (res && res.loginType == "success") {
              this.$emit("callBack");
              uni.$emit("handleSuccess", true);
            }
          });
      }
    },

    jumploginStyle() {
      this.$emit("clickX");
      this.$u.route({
        url: "/pages/student/my/login-style/login-style",
        // type: 'redirectTo',
        params: {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .login {
    height: 200px;
    background-color: #fff;
    padding: 32rpx;

    .title-v {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
      }

      image {
        width: 16px;
        height: 16px;
        // padding: 24rpx;
      }
    }

    .btn {
      margin-top: 40rpx;
      button[disabled] {
        color: rgba(0, 0, 0, 0.45) !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
    }

    .agreement {
      margin-top: 40rpx;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      font-size: 24rpx;
      // margin: 30rpx 0 32rpx 0;
      // padding: 0 50rpx;

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

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

        .span {
          color: var(--primary-color);
        }
      }
    }
  }
}
</style>