<template>
  <view class="page" :style="vuex_theme">
    <view class="login">
      <view class="title-v">
        <view class="title">手机号快速登录</view>
        <img
          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"  v-model="checked">
            <u-checkbox
              size="28"
              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 class="btn button_warp">
        <c-button
          type="confirm"
          shape="circle"
          :customStyle="{
            borderRadius: '48rpx',
            fontSize: '34rpx',
            color: '#fff',
            fontWeight: '400',
          }"
          text="手机号一键登录"
          openType="getPhoneNumber"
          :disabled="isDisable"
          @getPhoneNumber="getPhoneNumber"
        ></c-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "yxly-login",
  props: {},
  data() {
    return {
      checked: false,
      isDisable: true,
      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",
    };
  },

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

  mounted() {
    if (this.vuex_appId == "wx1d61898f341c39ec") {
     // 新华
      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"
    }
  },

  methods: {
    checkboxChange(e) {
      // this.checked = e.length != 0 ? false : true;
    },

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

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

    // 按钮点击
    getPhoneNumber(e) {

      console.log("getPhoneNumber", e);

      if (!e.detail.code) {
        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,
          })
          .then((data) => {
            if (data) {
              // self.$emit("callBack");
              uni.navigateBack();
            }
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .login {
    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;
      }

      img {
        width: 16px;
        height: 16px;
      }
    }

    .btn {
      margin-top: 40rpx;
    }

    .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: 5rpx 0 0 0;
        // display: inline-block;
      }

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

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