<style>
.login-box {
  max-width: 436px;
  padding: 30px 40px;
  margin: 40px auto;
  background-clip: padding-box;
  background: #ffffff;
  border-radius: 18px;
}

.login-box .tw_logo {
  margin: 0 auto 20px;
  display: block;
  height: 45px;
  width: auto;
}

.login-box .tip-text {
  font-size: 16px;
  margin-bottom: 15px;
  color: #999;
  text-align: center;
}

.login-box .tip-text a {
  color: #00afff;
}

.login_row {
  width: 100%;
}

.form-group {
  position: relative;
  margin-bottom: 15px;
}

.login_labelName {
  margin-top: 34px;
  font-size: 16px;
  margin-bottom: 16px;
}

.form-group i {
  position: absolute;
  right: 6px;
  bottom: 0;
  z-index: 2;
  width: 46px;
  height: 46px;
  text-align: center;
  line-height: 46px;
  color: #999;
  font-size: 28px;
  cursor: pointer;
}

.login-box .q-field__control {
  height: 46px;
}
.type-item {
  width: 50px;
  height: 50px;
  background: #f5f5f5;
  border-radius: 25px;
}
.type-item img {
  width: 28px;
  height: 28px;
}
</style>
<template>
  <div class="login">
    <div class="login-box">
      <!-- <img :src="logo" class="tw_logo" /> -->
      <!-- <p class="tip-text">
        還沒有帳號嗎？立即<a style="cursor:pointer;" @click="CommonJump('/register',{})">免費加入</a>
      </p> -->
      <div v-if="loginType !== 'wechat'">
        <div class="flex items-end justify-between">
          <div class="f34 bold">{{ isLogin ? "登錄" : "註冊" }}</div>
          <div class="f16 bold cursor-pointer" @click="loginToRegister">
            {{ isLogin ? "註冊賬號" : "返回登錄" }}
          </div>
        </div>
        <div class="login_row">
          <div class="form-group">
            <div class="login_labelName">輸入郵箱</div>
            <q-input outlined v-model="loginMsg.account" />
            <div class="main" v-show="tips">邮箱格式有误,请核实</div>
          </div>
          <div class="form-group" v-if="loginType === 'password'">
            <div class="login_labelName flex justify-between items-center">
              密碼<span class="text-grey-6 cursor-pointer">忘記密碼</span>
            </div>
            <q-input
              v-if="flag == 1"
              outlined
              v-model="loginMsg.password"
              type="text"
              ref="pwd"
            />
            <q-input
              v-if="flag == 2"
              outlined
              v-model="loginMsg.password"
              type="password"
              ref="pwd"
            />
            <i
              class="iconfont iconyanjing_xianshi"
              v-if="flag == 1"
              @click="flag = 2"
            ></i>
            <i
              class="iconfont iconbiyan"
              v-if="flag == 2"
              @click="flag = 1"
            ></i>
          </div>
          <div v-if="loginType === 'verify'">
            <q-btn
              v-if="!isSend"
              color="primary"
              unelevated
              style="width: 100%; height: 50px; margin-top: 20px"
              filled
              label="发送验证码"
              @click="sendVerify"
            />
            <div v-else>
              <q-input outlined v-model="loginMsg.verify" type="text" />
              <div>
                {{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
              </div>
            </div>
          </div>
          <div
            class="text-right f16 text-grey-6 cursor-pointer"
            v-if="isLogin"
            @click="changeLoginType"
          >
            {{
              loginType === "password" ? "使用郵箱驗證登陸" : "使用賬號密碼登陸"
            }}
          </div>
          <div class="q-mb-xl">
            <q-btn
              color="primary"
              unelevated
              style="width: 100%; height: 50px; margin-top: 20px"
              filled
              :label="mylabel"
              @click="login"
            />
          </div>
          <div class="flex flex-center">
            <div
              class="text-center text-grey-6 q-px-lg inline-block bg-white"
              style="z-index: 1; margin: 0 auto"
            >
              更多登录方式
            </div>
          </div>
          <q-separator style="margin-top: -10px" />
          <div class="flex flex-center q-mt-lg q-mb-xl">
            <div
              @click="useWechatLogin"
              class="type-item flex flex-center cursor-pointer"
              v-for="item in typeList"
              :key="item"
            >
              <img :src="require(`src/assets/img/${item}.png`)" />
            </div>
          </div>
          <div class="flex items-start no-wrap">
            <div><q-checkbox v-model="isAgree"></q-checkbox></div>
            <span
              >在使用印象的产品和服务前，我已阅读
              理解并同意印象的<a>《隐私政策》</a>和<a>《使用条款》</a></span
            >
          </div>
        </div>
      </div>
      <!-- 微信扫码页面 -->
      <div v-else>
        <div class="bold f34">微信登錄</div>
        <!-- <qrcode-vue></qrcode-vue> -->
        <div id="login_container"></div>
      </div>
    </div>
  </div>
</template>

<script>
import QrcodeVue from "qrcode.vue";
export default {
  name: "Login",
  components: {
    QrcodeVue,
  },
  data() {
    return {
      isSend: false,
      tips: false,
      cutDown: 0,
      loginType: "password", // password 邮箱密码，verify，邮箱验证码，wechat微信登录 微信登录没有绑定邮箱时跳转绑定邮箱业务逻辑
      isAgree: false,
      isLogin: true,
      loginMsg: {
        RB_Group_Id: 0,
        account: "",
        password: "",
        verify: "",
      },
      // , 'google', 'facebook', 'apple'
      typeList: ["wechat"],
      logo: "",
      flag: 2,
      mylabel: "登入",
    };
  },
  created() {},
  mounted() {
    var jObj = JSON.parse(localStorage.getItem("groupinfo"));
    this.loginMsg.RB_Group_Id = jObj.GroupId;
    //获取网站基础配置
    if (localStorage.baseifo) {
      var jObj = JSON.parse(window.localStorage.getItem("baseifo"));
      this.logo = jObj.Config.Logo;
    }
  },
  watch: {
    loginType: function () {
      this.resetInfo();
    },
  },
  methods: {
    getOpenInfo() {
      this.apipost(
        "GetOpenInfo_post",
        {},
        (r) => {
          this.openInfo = r.data;
          this.setWechatCode()
        },
        null
      );
    },
    setWechatCode() {
      const { AppID, State, OpenRedirectUri } = this.openInfo;
      const obj = new WxLogin({
        self_redirect: true,
        id: "login_container",
        appid: AppID,
        scope: "snsapi_login",
        redirect_uri: OpenRedirectUri, // 是	重定向地址，需要进行UrlEncode
        state: State,
        style: "",
        href: "",
      });
    },
    loginToRegister() {
      this.isLogin = !this.isLogin;
    },
    sendVerify() {
      if (this.verifyEmail()) {
        this.isSend = true;
        this.cutDown = 60;
        this.startCutDown();
      }
    },
    startCutDown() {
      this.timer = setTimeout(() => {
        this.cutDown--;
        if (this.cutDown) {
          this.startCutDown();
        }
      }, 1000);
    },
    resetInfo() {
      this.isSend = false;
      this.tips = false;
      this.loginMsg = {
        RB_Group_Id: 0,
        account: "",
        password: "",
        verify: "",
      };
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.cutDown = 0;
    },
    verifyEmail() {
      if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.loginMsg.account)) {
        this.tips = false;
        return true;
      } else {
        // 提示用户邮箱格式有误
        this.tips = true;
        return false;
      }
    },
    changeLoginType() {
      if (this.loginType === "password") {
        this.loginType = "verify";
      } else {
        this.loginType = "password";
      }
    },
    useWechatLogin() {
      this.loginType = "wechat";
      this.setWechatCode()
    },
    login() {
      if (this.loginMsg.account == "") {
        this.$q.notify({
          type: "negative",
          message: "请输入账号",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      if (this.loginMsg.password == "") {
        this.$q.notify({
          type: "negative",
          message: "请输入密码",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      this.mylabel = "提交中...";
      this.apipost(
        "b2b_post_Login",
        this.loginMsg,
        (res) => {
          this.mylabel = "登入";
          if (res.data.resultCode == 1) {
            var jsonData = JSON.stringify(res.data.data);
            window.localStorage.setItem("b2bUser", jsonData);
            this.CommonJump("/index", {});
          } else {
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        (err) => {}
      );
    },
  },
};
</script>
