<template>
  <div class="te-login">
    <div class="te-login-panel">
      <div class="logo">
        <i
          v-if="!system.logo_url"
          :class="
            system.logo != ''
              ? system.logo
              : 'fa fa-american-sign-language-interpreting'
          "
        ></i>
        <img v-if="system.logo_url != ''" :src="system.logo_url" />

        <span class="title">{{ system.name || "让生活更美好" }}</span>
      </div>
      <div class="item" :class="mode == 'up' ? '' : 'none'">
        <i class="fa fa-user-o left" aria-hidden="true"></i>
        <input
          type="text"
          :class="uerr ? 'err' : ''"
          @focus="uerr = false"
          v-model="uname"
          @keyup.enter="onLogin"
          placeholder="请输入登录账号"
        />
      </div>
      <div class="item" :class="mode == 'up' ? 'none' : ''">
        <i class="fa fa-mobile left" aria-hidden="true"></i>
        <input
          type="text"
          v-model="uname"
          :class="uerr ? 'err' : ''"
          @focus="uerr = false"
          @keyup.enter="onLogin"
          placeholder="请输入手机号"
        />
      </div>
      <div class="item" :class="mode == 'up' ? '' : 'none'">
        <i class="fa fa-key left" aria-hidden="true"></i>
        <input
          :type="pwd_tp"
          v-model="pwd"
          :class="perr ? 'err' : ''"
          @focus="perr = false"
          @keyup.enter="onLogin"
          placeholder="请输入密码"
        />
        <i
          class="fa fa-eye right"
          v-if="show_pwd"
          aria-hidden="true"
          @click="
            show_pwd = !show_pwd;
            pwd_tp = 'password';
          "
        ></i>
        <i
          class="fa fa-eye-slash right"
          v-if="!show_pwd"
          aria-hidden="true"
          @click="
            show_pwd = !show_pwd;
            pwd_tp = 'text';
          "
        ></i>
      </div>
      <div class="item" :class="mode == 'up' ? 'none' : ''">
        <i class="fa fa-key left" aria-hidden="true"></i>
        <input
          type="text"
          v-model="pwd"
          :class="perr ? 'err' : ''"
          @focus="perr = false"
          @keyup.enter="onLogin"
          placeholder="请输入验证码"
        />
        <button
          type="button"
          class="right sendMsg"
          @click="sendMsg"
          :class="sending ? 'disabled' : ''"
        >
          {{ send_msg_text || send_msg_origin_text }}
        </button>
      </div>
      <div class="item small">
        <span class="error" :class="show_error ? '' : 'hide'">{{
          errmsg
        }}</span>
      </div>

      <div class="item">
        <button
          type="button"
          class="login"
          @click="onLogin"
          :class="logining ? 'disabled' : ''"
        >
          {{ login_text }}
        </button>
      </div>
      <div class="item proto" v-if="protos && protos.length > 0">
        <label>
          <i class="fa fa-square-o" aria-hidden="true" v-if="!selected"></i>
          <i
            class="fa fa-check-square-o"
            aria-hidden="true"
            v-if="selected"
          ></i>
          <input
            type="checkbox"
            style="display: none"
            v-model="selected"
            @change="prerr = !selected"
          /><span class="proto_label" :class="prerr ? 'err' : ''"
            >我已阅读并同意<a v-for="k in protos" :key="k.name" :href="k.url">{{
              k.name
            }}</a></span
          ></label
        >
      </div>
      <div class="te-other-login">
        <span class="title"
          ><hr />
          使用第三方账号登录
          <hr
        /></span>
        <i class="fa fa-weixin disabled" aria-hidden="true"></i>
        <i class="fa fa-qq disabled" aria-hidden="true"></i>
        <i class="fa fa-weibo disabled" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TeLogin",
  props: {
    system: {
      type: Object,
    },
    mode: {
      type: String,
      default: "up",
    },
    protos: {
      type: Array,
      default: function () {
        return [];
      },
    },
    login_text: {
      type: String,
      default: "登 录",
    },
  },
  created() {
    this.setBG();
  },
  mounted() {
    document.title = this.system.name;
    this.setBG();
  },
  computed: {
    show_error() {
      return this.errmsg && (this.uerr || this.perr);
    },
  },

  data() {
    return {
      show_pwd: false,
      pwd_tp: "password",
      sending: false,
      selected: false,
      send_msg_origin_text: "获取验证码",
      send_msg_text: this.send_msg_origin_text,
      uname: "",
      pwd: "",
      uerr: false,
      perr: false,
      prerr: false,
      errmsg: "",
      logining: false,
    };
  },
  methods: {
    error(v) {
      this.logining = false;
      this.uerr = true;
      this.perr = true;
      this.errmsg = v;
    },
    onLogin() {
      if (!this.uname) {
        this.uerr = true;
        return;
      }
      if (!this.pwd) {
        this.perr = true;
        return;
      }
      if (this.protos.length > 0 && !this.selected) {
        this.prerr = true;
        return;
      }
      this.logining = true;
      this.uerr = false;
      this.perr = false;
      this.$emit("login", this.uname, this.pwd);
    },
    setBG() {
      let bg = this.system.bg_url || "bg.jpg";
      document.documentElement.style.setProperty("--bgurl", "url(" + bg + ")");
    },
    sendMsg() {
      if (!this.uname) {
        this.uerr = true;
        return;
      }
      this.uerr = false;

      this.sending = true;
      let count = 60;
      let that = this;
      that.send_msg_text = count + " 秒";
      let clock = setInterval(function () {
        count--;
        if (count > 0) {
          that.send_msg_text = count + " 秒";
        } else {
          clearInterval(clock);
          that.send_msg_text = that.send_msg_origin_text;
          that.sending = false;
        }
      }, 1000);
    },
  },
};
</script>

<style>
:root {
  --bgurl: "";
}
body {
  background: var(--bgurl);
  background-position: center;
}
.te-login {
  width: 100vw;
  height: 100vh;

  text-align: center;
  color: white;
}
.te-login .logo {
  margin-top: 60px;
  font-size: 3rem;
}
.te-login .logo .title {
  display: block;
  font-size: 1.4rem;
}
.te-login .te-login-panel {
  font-size: 1rem;
  margin: 20px auto;
  width: 30%;
  border-radius: 4px;
  min-height: 300px;
  min-width: 200px;
}
.te-login .te-login-panel.left {
  margin-left: 100px;
  margin-right: auto;
}
.te-login .te-login-panel.right {
  margin-right: 100px;
  margin-left: auto;
}
.te-login .te-login-panel .item {
  margin: 40px auto;
  width: 100%;
  position: relative;
}
.te-login .te-login-panel .item .left {
  position: absolute;
  left: 0;
  bottom: 10px;
}
.te-login .te-login-panel .item .right {
  position: absolute;
  right: 0;
  bottom: 10px;
}

.te-login .te-login-panel .item.small {
  height: 10px;
  margin: 0;
}
.te-login .te-login-panel .item .error {
  margin: 1px;
  text-align: right;
  color: var(--banner-bg-color);
  font-weight: 600;
  font-size: 0.9rem;
}
.hide {
  display: none;
}

.te-login .te-login-panel .item.proto {
  font-size: 0.9rem;
}
.te-login .te-login-panel .item.proto i {
  margin-right: 10px;
}
.te-login .te-login-panel .item.proto a {
  color: var(--button-bg-color);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.te-login .te-login-panel .item input[type="password"],
.te-login .te-login-panel .item input[type="text"] {
  -webkit-appearance: none;
  background-color: transparent;
  width: 100%;
  border: none;
  border-bottom: 1px solid white;
  color: white;
  font-size: 1rem;
  height: 36px;
  line-height: 36px;
  outline: 0;
  padding: 0 30px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.te-login .te-login-panel .item input[type="password"].err,
.proto_label.err,
.te-login .te-login-panel .item input[type="text"].err {
  border-bottom: 1px solid var(--banner-bg-color);
}
.te-login .te-login-panel .item input[type="password"]:hover,
.te-login .te-login-panel .item input[type="text"]:hover {
  border-color: var(--button-bg-color);
}
.te-login .te-login-panel .item button.sendMsg,
.te-login .te-login-panel .item button.login {
  background-color: var(--button-bg-color); /* Green */
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  opacity: 1;
  font-size: 1rem;
  border-radius: 3rem;
  width: 60%;
  border: 1px solid transparent;
}
.te-login .te-login-panel .item button.sendMsg {
  padding: 4px 8px;
  width: 120px;
  font-size: 0.8rem;
}
.te-login .te-login-panel .item button.sendMsg:not(.disabled):hover,
.te-login .te-login-panel .item button.login:not(.disabled):hover {
  border: 1px solid white;
}
.te-login .te-login-panel .item button.sendMsg.disabled,
.te-login .te-login-panel .item button.login.disabled {
  background-color: #999;
}
.te-other-login {
  margin-top: 80px;
  font-size: 1.5rem;
  text-align: center;
}
.te-other-login .title {
  display: block;
  font-size: 0.9rem;
  margin: 20px;
}
.te-other-login .title hr {
  display: inline-block;
  width: 40px;
  height: 1px;
  border: none;
  border-bottom: 1px solid white;

  filter: alpha(opacity=100, finishopacity=0, style=3);
}
.te-other-login i {
  background-color: var(--button-bg-color);
  border-radius: 3rem;
  padding: 6px;
  margin: 10px 10px;
}
.te-other-login i.disabled {
  background-color: #999;
}
.none {
  display: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: white;
}

@media screen and (max-width: 1200px) {
  .te-login .te-login-panel {
    width: 80%;
  }
  .te-login .te-login-panel.left {
    margin-left: auto;
    margin-right: auto;
  }
  .te-login .te-login-panel.right {
    margin-right: auto;
    margin-left: auto;
  }
}
</style>
