<style>
.login {
  background: url("../assets/img/login-bg.png");
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.login-box {
  max-width: 436px;
  padding: 30px 40px;
  margin: 100px auto;
  position: absolute;
  right: 360px;
  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">{{loginType === 'bindEmail' ? '立即绑定' : (isLogin ? "登錄" : "註冊") }}</div>
          <div
            class="f16 bold cursor-pointer"
            v-if="loginType !== 'bindEmail'"
            @click="loginToRegister"
          >
            {{ isLogin ? "註冊賬號" : "返回登錄" }}
          </div>
        </div>
        <div class="login_row">
          <div class="form-group">
            <div class="login_labelName">輸入郵箱</div>
            <q-input outlined v-model="loginMsg.Mailbox" />
            <div class="primary q-mt-sm" v-show="tips">邮箱格式有误,请核实</div>
          </div>
          <div v-if="loginType === 'MailCode' || loginType === 'bindEmail'">
            <q-btn
              v-if="!isSend"
              class="q-mb-lg"
              unelevated
              color="grey-3"
              style="
                width: 100%;
                color: #8b8b8b !important;
                height: 50px;
                margin-top: 20px;
              "
              filled
              label="发送验证码"
              @click="sendVerify"
            />
            <div v-else class="mt q-mb-sm">
              <q-input outlined v-model="loginMsg.MailCode" type="text" />
              <div
                class="q-mt-sm"
                :class="cutDown ? 'text-grey-6' : ''"
                @click="reSend"
              >
                {{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
              </div>
            </div>
          </div>
          <div v-if="loginType === 'PassWord' || (!isLogin && loginType !== 'bindEmail')" class="form-group">
            <div class="login_labelName flex justify-between items-center">
              密碼<span
                class="text-grey-6 cursor-pointer"
                v-if="loginType === 'PassWord'"
                @click="resetPassword"
                >忘記密碼</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
            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-show="loginType === 'wechat'">
        <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,
        Mailbox: "",
        PassWord: "",
        MailCode: "",
      },
      // , 'google', 'facebook', 'apple'
      typeList: ["wechat"],
      logo: "",
      flag: 2,
      mylabel: "登入",
    };
  },
  created() {},
  mounted() {
    console.log("login", this.$route.query);
    const { code, state } = this.$route.query;
    if (code) {
      this.fetchLoginInfo(code, state);
      this.isLogin = false;
      this.loginType = "bindEmail";
      this.mylabel = "立即绑定";
    }
    this.getOpenInfo();
    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: {
    fetchLoginInfo(code, state) {
      this.apipost(
        "getWXToken_post",
        {
          code,
          state,
        },
        (res) => {
          if (res.data.resultCode == 1) {
            const { type, unoinid } = res.data.data;
            if (type === 1) {
              this.CommonJump("/index", {});
            } else {
              this.isLogin = false;
              // 绑定邮箱
              this.loginType = "bindEmail";
              this.userId = unoinid;
            }
          } else {
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        (err) => {}
      );
    },
    getOpenInfo() {
      this.apipost(
        "GetOpenInfo_post",
        {},
        (r) => {
          if (r.data.resultCode == 1) {
            this.openInfo = r.data.data;
          } else {
            this.$q.notify({
              type: "negative",
              message: r.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
    setWechatCode() {
      const { AppID, State, OpenRedirectUri } = this.openInfo;
      const obj = new WxLogin({
        self_redirect: false,
        id: "login_container",
        appid: AppID,
        scope: "snsapi_login",
        redirect_uri: OpenRedirectUri, // 是	重定向地址，需要进行UrlEncode
        state: State,
        style: "",
        href: "",
      });
    },
    loginToRegister() {
      this.isLogin = !this.isLogin;
      if (!this.isLogin) {
        this.mylabel = "注册";
        this.loginType = "MailCode";
      } else {
        this.mylabel = "登录";
      }
    },
    reSend() {
      if (this.cutDown) {
        return;
      }
      this.inSending = false;
      this.sendVerify();
    },
    sendVerify() {
      if (this.inSending) return;
      this.inSending = true;
      if (this.verifyEmail()) {
        if(!this.userId && this.loginType === 'bindEmail') {
              this.$q.notify({
                type: "negative",
                message: '微信登录出错,请重新登录',
                position: "top",
                timeout: 2000, // 以毫秒为单位; 0意味着没有超时
              });
              // this.useWechatLogin()
              return
        }
        let SendType = this.userId ? 3 : this.isLogin ? 1 : 0;
        this.apipost(
          "directCustomer_post_SendMail",
          {
            Mailbox: this.loginMsg.Mailbox,
            SendType: SendType,
            Id: this.userId,
          },
          (res) => {
            this.inSending = false;
            if (res.data.resultCode == 1) {
              this.isSend = true;
              this.cutDown = 60;
              this.startCutDown();
            } else {
              this.$q.notify({
                type: "negative",
                message: res.data.message,
                position: "top",
                timeout: 2000, // 以毫秒为单位; 0意味着没有超时
              });
            }
          },
          null
        );
      } else {
        this.inSending = false;
      }
    },
    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,
        Mailbox: "",
        PassWord: "",
        MailCode: "",
      };
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.cutDown = 0;
    },
    verifyEmail() {
      if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.loginMsg.Mailbox)) {
        this.tips = false;
        return true;
      } else {
        // 提示用户邮箱格式有误
        this.tips = true;
        return false;
      }
    },
    changeLoginType() {
      if (this.loginType === "PassWord") {
        this.loginType = "MailCode";
      } else {
        this.loginType = "PassWord";
      }
    },
    useWechatLogin() {
      // this.loginType = "wechat";
      // this.setWechatCode()
      const { AppID, State, OpenRedirectUri } = this.openInfo;
      let redirect_uri = OpenRedirectUri;
      const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${AppID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=${State}&wechat_redirect=${redirect_uri}`;
      // this.windowObjectReference = window.open(url, 'wechat', 'left: 20,top: 20,width:200,height:200,')
      // console.log('windowObjectReference', this.windowObjectReference)
      // setTimeout(() => {console.log(this.windowObjectReference.close())}, 1000)
      window.location.href = url;
    },
    login() {
      if (this.mylabel === "提交中...") {
        return;
      }
      if (!this.isAgree) {
        this.$q.notify({
          type: "negative",
          message: "请先同意平台使用协议",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      if (this.loginMsg.Mailbox == "") {
        this.$q.notify({
          type: "negative",
          message: "请输入账号",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      if (this.loginMsg.PassWord == "" && this.loginType === "PassWord") {
        this.$q.notify({
          type: "negative",
          message: "请输入密码",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      if (
        this.loginMsg.MailCode == "" &&
        (this.loginType === "MailCode" || this.loginType === "bindEmail")
      ) {
        this.$q.notify({
          type: "negative",
          message: "请输入邮箱验证码",
          position: "top",
          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
        });
        return;
      }
      let params = { ...this.loginMsg };
      let url = "MailboxPwdLogin_post"; // 密码登录
      if (!this.isLogin) {
        url = "directCustomer_post_MailRegister";
      } else if (this.loginType === "MailBox") {
        ulr = "MailboxLogin_post";
      }
      if (this.loginType === "bindEmail") {
        url = "BindMailByOpenId_post";
        params.Unoinid = this.userId;
      }
      this.mylabel = "提交中...";
      this.apipost(
        url,
        params,
        (res) => {
          this.mylabel = "登入";
          if (res.data.resultCode == 1) {
            var jsonData = JSON.stringify(res.data.data);
            window.localStorage.setItem("b2bUser", jsonData);
            console.log("userInfo", jsonData, res.data.data);
            this.CommonJump("/index", {});
          } else {
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        (err) => {}
      );
    },
    resetPassword() {
      this.CommonJump("/resetPassword", {});
    },
  },
};
</script>
