<template>
  <view class="login" :style="vuex_theme">
    <view class="box">
      <view v-if="changeLogin == '账号密码登录'" class="form">
        <u-form :model="form" ref="uForm">
          <u-form-item
            prop="mobile"
            :leftIconStyle="{
              width: '40rpx',
              height: '40rpx',
              position: 'relative',
              right: '8rpx',
            }"
            :left-icon="vuex_baseImgUrl && `${vuex_baseImgUrl}login_mobile.png`"
            borderBottom
          >
            <u-input
              v-model="form.mobile"
              border="none"
              maxlength="11"
              placeholder="请输入手机号"
              :customStyle="{ fontSize: '17px' }"
            />
          </u-form-item>
          <u-form-item
            prop="verifyCode"
            :leftIconStyle="{
              width: '40rpx',
              height: '40rpx',
              position: 'relative',
              right: '8rpx',
            }"
            :left-icon="vuex_baseImgUrl && `${vuex_baseImgUrl}login_code1.png`"
            borderBottom
          >
            <u-input
              v-model="form.password"
              border="none"
              placeholder="请输入验证码"
              :customStyle="{ fontSize: '17px' }"
            />
            <u-button
              type="default"
              size="mini"
              slot="right"
              :hair-line="false"
              :custom-style="{
                color: 'var(--primary-color)',
                border: 'none',
                fontSize: '30rpx',
              }"
              @click="getCode"
            >
              {{ codeText }}
            </u-button>
            <u-code ref="uCode" @change="codeChange"></u-code>
          </u-form-item>
        </u-form>
      </view>
      <view v-else class="form">
        <u-form :model="form" ref="uForm">
          <u-form-item
            prop="mobile"
            :left-icon-style="{
              width: '40rpx',
              height: '40rpx',
              position: 'relative',
              right: '8rpx',
            }"
            :left-icon="vuex_baseImgUrl && `${vuex_baseImgUrl}login_mobile.png`"
            borderBottom
          >
            <u-input
              v-model="form.mobile"
              border="none"
              placeholder="请输入账号"
              :customStyle="{ fontSize: '17px' }"
            />
          </u-form-item>
          <u-form-item
            prop="verifyCode"
            :left-icon-style="{
              width: '40rpx',
              height: '40rpx',
              position: 'relative',
              right: '8rpx',
            }"
            :left-icon="vuex_baseImgUrl && `${vuex_baseImgUrl}login_code2.png`"
            borderBottom
          >
            <u-input
              v-model="form.password"
              border="none"
              type="password"
              placeholder="请输入密码"
              :customStyle="{ fontSize: '17px' }"
            />
          </u-form-item>
        </u-form>
      </view>

      <view class="btn button_warp">
        <c-button
          type="confirm"
          shape="circle"
          :customStyle="{
            borderRadius: '48rpx',
            fontSize: '34rpx',
            color: '#fff',
            fontWeight: '400',
          }"
          text="登录"
          :disabled="isDisable"
          @click="phoneLogin"
        ></c-button>
      </view>

      <view class="changeLogin" @click="onchangeLogin">
        {{ changeLogin }}
      </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>
    <view>
      <u-toast ref="uToast" />
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { getSmsCodeApi } from "@/config/api.js";
import md5 from "@/common/md5";

export default {
  data() {
    return {
      errorType: "toast",
      isDisable: true,
      checked: [],
      service: "https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/agreement/%E3%80%8A%E4%BC%98%E5%AD%A6%E4%B9%90%E4%B8%9A%E7%94%A8%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE%E3%80%8B.htm",
      policy: "https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/agreement/%E3%80%8A%E4%BC%98%E5%AD%A6%E4%B9%90%E4%B8%9A%E9%9A%90%E7%A7%81%E5%8D%8F%E8%AE%AE%E3%80%8B.htm",
      form: {
        mobile: "",
        password: "",
      },
      changeLogin: "账号密码登录",
      codeText: "发送验证码",
    };
  },

  onLoad() {
    if (this.vuex_appId == 'wxac18386e35824192') {
      // 新华
      this.service = "http://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 = "http://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: {
    onchangeLogin() {
      if (this.changeLogin == "验证码登录") {
        this.changeLogin = "账号密码登录";
      } else {
        this.changeLogin = "验证码登录";
      }
    },

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

    codeChange(text) {
      this.codeText = text;
    },

    getCode() {
      const { mobile = "" } = this.form;

      if (!(mobile && /^1[0-9]{10}$/.test(mobile))) {
        this.$refs.uToast.show({
          message: "请填写正确手机号",
          type: "error",
          duration: 1500,
        });
      } else {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: "正在获取验证码",
          });
          setTimeout(() => {
            uni.hideLoading();
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();

            console.log(mobile);

            getSmsCodeApi({
              phone: mobile,
            });
          }, 1000);
        } else {
          this.$u.toast("倒计时结束后再发送");
        }
      }
    },

    phoneLogin() {
      if (this.changeLogin == "账号密码登录") {
        this.$store.dispatch(`user/login`, {
          way: "code",
          type: "teacher",
          phone: this.form.mobile,
          code: this.form.password,
        });
      } else {
        console.log(md5.hex_md5(this.form.password));
        this.$store.dispatch(`user/login`, {
          way: "name",
          type: "teacher",
          username: this.form.mobile,
          password: md5.hex_md5(this.form.password),
        });
      }
    },
  },
};
</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: 120rpx;
      margin: 0 auto;
    }

    .name {
      margin: 32rpx 0 0 0;
      text-align: center;
      font-size: 48rpx;
      line-height: 66rpx;
      color: #000000;
      font-weight: 600;
    }

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

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

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

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

    .btn {
      margin-top: 128rpx;
      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>