<template>
  <view class="login" :style="vuex_theme">
    <u-navbar
      leftIconSize="40"
      leftIconColor="#fff"
      :titleStyle="{color: '#fff'}"
      title="登录"
      bgColor="transparent"
      placeholder
      autoBack
    />
    <view class="box">

        <view class="form">

          <view class="title">
            <img src="https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/t_logo.png" alt="" />
            <view class="one">欢迎登录优学乐业</view>
            <view class="two">教师端</view>
          </view>

          <view v-if="changeLogin == '密码登录'">
           
            <u-form :model="form" ref="uForm">
              <view style="background: #F7F7F7;border-radius: 8px;">
                <u-form-item
                  prop="mobile"
                >
                  <u-input
                    v-model="form.mobile"
                    border="none"
                    maxlength="11"
                    placeholder="请输入手机号"
                    :customStyle="{fontSize:'30rpx', padding: '24rpx 40rpx', fontWeight: '400'}"
                  />
                </u-form-item>
              </view>
             
              <view style="background: #F7F7F7;margin-top: 20px;border-radius: 8px;">
                <u-form-item
                  prop="verifyCode"
                >
                  <u-input
                    v-model="form.password"
                    border="none"
                    placeholder="请输入验证码"
                    :customStyle="{fontSize:'30rpx', padding: '24rpx 40rpx', fontWeight: '400'}"
                  />
                  <u-button
                    type="default"
                    size="mini"
                    slot="right"
                    :hair-line="false"
                    hover-class="none"
                    :custom-style="{color:'var(--primary-color)', border:'none',fontSize:'30rpx', background: 'none', fontWeight: '500', padding: '0 40rpx'}"
                    @click="getCode"
                  >
                    {{ codeText }}
                  </u-button>
                  <u-code ref="uCode" @change="codeChange"></u-code>
                </u-form-item>
              </view>
            </u-form>

          </view>
          <view v-else>
            <u-form :model="form" ref="uForm">

              <view style="background: #F7F7F7;border-radius: 8px;">
                <u-form-item
                  prop="mobile"
                >
                  <u-input
                    v-model="form.mobile"
                    border="none"
                    placeholder="请输入账号"
                    :customStyle="{fontSize:'30rpx', padding: '24rpx 40rpx', fontWeight: '400'}"
                  />
                </u-form-item>
              </view>

              <view style="background: #F7F7F7;margin-top: 20px;border-radius: 8px;">
                <u-form-item
                  prop="verifyCode"
                >
                  <u-input
                    v-model="form.password"
                    border="none"
                    type="password"
                    placeholder="请输入密码"
                    :customStyle="{fontSize:'30rpx', padding: '24rpx 40rpx', fontWeight: '400'}"
                  />
                </u-form-item>
              </view>
             
            </u-form>

          </view>


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

          <view class="other_login">
            <view class="quickLogin" @click="onChangeQuickLogin">
              快速登录
            </view>
            <view class="changeLogin" @click="onchangeLogin">
              {{ changeLogin }}
            </view>
          </view>

        </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>
    <u-popup :show="yxlyLoginShow" mode="bottom" round="18">
      <yxly-login
        @clickX="yxlyLoginShow = false"
        @callBack="sucesslogin"
      ></yxly-login>
    </u-popup>
  </view>
</template>

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

export default {
  data() {
    return {
      yxlyLoginShow: false,
      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 = "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: {

    onChangeQuickLogin() {
      this.yxlyLoginShow = true
    },

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

            getSmsCodeApi({ phone: mobile, type: 'teacher_login' }).then(res => {
              console.warn(res)
              this.$refs.uCode.start();
            }).catch(errors => {
                uni.showToast({
                  title: errors.data.msg,
                  icon: "none",
                  duration: 2500,
                })
              })
          }, 1000);
        } else {
          this.$u.toast("倒计时结束后再发送");
        }
      }
    },

    phoneLogin() {
      

      if (this.changeLogin == "密码登录") {

        if (!(this.form.mobile && /^1[0-9]{10}$/.test(this.form.mobile))) {
          this.$refs.uToast.show({
            title: '请填写正确手机号',
            type: 'error',
            duration: 1500,
          })
          return
        }
        if (!(this.form.password && /^[0-9]{4}$/.test(this.form.password))) {
          this.$refs.uToast.show({
            title: '请填写正确验证码',
            type: 'error',
            duration: 1500,
          })
          return
        }

        this.$store.dispatch(`user/login`, {
          way: "code",
          type: "teacher",
          phone: this.form.mobile,
          code: this.form.password,
        })
        .then((data) => {
          if (data) {
            // self.$emit("callBack");
            uni.navigateBack();
          }
        });
      } 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),
        })
        .then((data) => {
          if (data) {
            // self.$emit("callBack");
            uni.navigateBack();
          }
        });
      }
    },
  },
};
</script>

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

  background-image: url("https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/login_background.png");
  background-size: contain;
  background-repeat: no-repeat;

  .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;
    }

    .other_login {
      width: 100%;
      text-align: center;
      margin: 40rpx 0 0 0;
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      display: flex;
      justify-content: center;

      .changeLogin {
        margin-left: 40rpx;
      }
    }

    .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: 256rpx 40rpx 0px;
      background: #fff;
      border-radius: 20rpx;
      padding: 80rpx 36rpx 0rpx;

      .title {
        text-align: center;

        img {
          width: 208rpx;
          height: 160rpx;
          margin-bottom: 20rpx;
        }

        .one {
          font-size: 48rpx;
          font-weight: 600;
          color: #000000;
        }

        .two {
          font-size: 36rpx;
          font-weight: 400;
          color: #000000;
          margin-bottom: 50rpx;
          margin-top: 8rpx;
        }
      }

    }

    .form /deep/ .u-border-bottom:after {
      border-bottom-width: 0px;
    }

    .form /deep/ .u-form-item {
      padding: 0;
    }

    .form /deep/ .u-form-item__body {
      padding: 0px;
    }


    .form /deep/ .u-flex {
      padding-right: 20rpx;
    }

    .btn {
      margin-top: 40rpx;
    }

    .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>