<template>
  <div
    class="system-layer"
    :style="{ backgroundImage: `url('/image/Frame 208@2x.png')` }"
  >
    <div class="l-content">
      <div class="login-layer">
        <div class="content">
          <div class="info">
            <div class="top">
              <img src="/image/logo@2x.png" />
            </div>
            <div class="center">
              <h1>不可移动文物管理平台</h1>
              <p>
                <img src="/image/logo.png" />
              </p>
            </div>
            <div class="bottom">
              <div class="abr-info">
                <p>Android版</p>
                <div class="e-code">
                  <span v-html="qrUrl"></span>
                  <div class="e-logo">
                    <img src="/image/e-code.png" />
                  </div>
                </div>
                <p class="desc">扫描安装文保1号App</p>
              </div>
              <img class="code" src="/image/pic_camera@2x.png" />
            </div>
          </div>
          <div class="right-panel">
            <!-- login right panel -->
            <template v-if="currentStatus(0)">
              <el-form class="panel login" :model="form" @submit.stop>
                <h2>欢迎登录</h2>
                <el-form-item class="panel-form-item">
                  <p class="err-info">{{ verification.phone }}</p>
                  <el-input
                    :maxlength="11"
                    v-model.trim="form.phone"
                    placeholder="手机号"
                    @keydown.enter="submitClick"
                  ></el-input>
                </el-form-item>
                <el-form-item class="panel-form-item">
                  <p class="err-info">{{ verification.psw }}</p>
                  <el-input
                    v-model="form.psw"
                    :maxlength="16"
                    placeholder="密码"
                    :type="flag ? 'text' : 'password'"
                    @keydown.enter="submitClick"
                  >
                    <template v-slot:suffix>
                      <el-icon
                        :size="20"
                        @click="flag = !flag"
                        class="icon-style"
                      >
                        <View v-if="flag" />
                        <Hide v-else />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item class="panel-form-item" style="user-select: none">
                  <DragVerify
                    ref="verify"
                    :class="{ passing: isPassing2 }"
                    :isPassing="isPassing2"
                    @passcallback="isPassing2 = true"
                    handlerIcon="el-icon-d-arrow-right"
                    background="#D9D9D9"
                    textColor="#333333"
                    successIcon="el-icon-circle-check"
                    :text="isPassing2 ? '已通过验证' : '登录需要拖拽验证'"
                    successText="验证通过"
                    :width="400"
                  >
                    <template v-slot:handlerIcon>
                      <el-icon
                        :size="20"
                        style="
                          width: 20px;
                          display: inline-block;
                          line-height: 20px;
                          margin-top: 8px;
                        "
                      >
                        <DArrowRight v-if="!isPassing2" />
                        <SuccessFilled v-else />
                      </el-icon>
                    </template>
                  </DragVerify>
                </el-form-item>

                <el-form-item class="panel-form-item">
                  <el-button
                    type="primary"
                    class="fill submit"
                    @click="submitClick"
                    >登录</el-button
                  >
                </el-form-item>

                <div class="register">
                  <span @click="handleForgetPassword"> 忘记密码</span> |
                  <span @click="handleRegister"> 单位注册</span>
                </div>
              </el-form>
            </template>

            <template v-if="currentStatus(1)">
              <register @done="goTologin"></register>
            </template>
            <template v-if="currentStatus(2)">
              <reset @done="goTologin"></reset>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch, ref, computed } from "vue";
import {
  View,
  Hide,
  DArrowRight,
  SuccessFilled,
} from "@element-plus/icons-vue";
import { login } from "@/store/user";
import { ElMessage } from "element-plus";
import { router } from "@/router";
import qrCode from "qrcode";
import DragVerify from "@/components/drag-verify.vue";
import register from "@/view/register/register.vue";
import reset from "@/view/register/reset.vue";
const PHONE = {
  REG: /^1(3|4|5|6|7|8|9)\d{9}$/,
  // REG: /^((13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8})|(8){11}$/,
  tip: "手机号格式不正确！",
};
// 是否显示明文密码
const flag = ref(false);
const verify = ref<any>();
const isPassing2 = ref(false);

const registerStatus = ref(0);
const currentStatus = computed(
  () => (status: number) => status === registerStatus.value
);
// 表单
const form = reactive({
  phone: import.meta.env.DEV ? "13800000001" : "",
  psw: import.meta.env.DEV ? "88888888Sw" : "",
});
const verification = reactive({ phone: "", psw: "" });

const fromVerification = (verification: { phone: string; psw: string }) => {
  if (!form.phone) {
    verification.phone = "请输入手机号";
  } else if (["88888888888", "99999999999"].includes(form.phone)) {
    verification.phone = "";
  } else {
    verification.phone = PHONE.REG.test(form.phone) ? "" : PHONE.tip;
  }
  if (!form.psw) {
    verification.psw = "请输入密码";
  } else {
    verification.psw = "";
  }
};

watch(
  form,
  () => {
    const currentVerification = { phone: "", psw: "" };
    fromVerification(currentVerification);

    if (!currentVerification.phone) {
      verification.phone = "";
    }
    if (!currentVerification.psw) {
      verification.psw = "";
    }
  },
  { immediate: true }
);

const qrUrl = ref<string>();
qrCode.toString(
  `${location.origin}/android-download/app-download.html`,
  { type: "svg", width: 128, margin: 0, errorCorrectionLevel: "L" },
  (_, url) => {
    qrUrl.value = url;
  }
);

// 表单提交
const submitClick = async () => {
  fromVerification(verification);
  if (verification.phone && verification.phone !== "88888888888") {
    return ElMessage.error(verification.phone);
  }
  if (verification.psw) return ElMessage.error(verification.psw);

  if (!isPassing2.value) {
    return ElMessage.error("登录需要拖拽验证");
  }
  try {
    await login({ phoneNum: form.phone, password: form.psw });
    router.replace("scene");
  } catch (e) {
    console.error(e);
  }
  verify.value.reset();
  isPassing2.value = false;
};

// 忘记密码
const handleForgetPassword = () => {
  registerStatus.value = 2;
};
// 注册
const handleRegister = () => {
  registerStatus.value = 1;
};
// 业务回到login
const goTologin = () => {
  registerStatus.value = 0;
};
</script>

<style lang="scss" scoped>
.login-layer {
  width: 100%;
  height: 100%;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  max-width: 1620px;
  height: 100vh;
  margin: 0 auto;
  padding: 0 50px 0 50px;
}

.info {
  color: #000;
  flex: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 800px;
  height: 100vh;
  flex: 1;
  margin-right: 10%;

  .top {
    margin-top: 50px;

    img {
      width: 142px;
    }
  }

  .bottom {
    height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;

    .code {
      height: 100%;
      flex: none;
    }

    .abr-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      p:first-child {
        font-size: 20px;
        line-height: 32px;
        color: #93795d;
        padding-left: 32px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 32px;
          height: 32px;
          background: url("/image/Android@2x.png") no-repeat center center;
          background-size: 100% 100%;
        }
      }

      .e-code {
        width: 128px;
        margin-top: 13px;
        position: relative;

        > img {
          width: 100%;
        }

        .e-logo {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 40px;
          height: 40px;
          transform: translate(-50%, -50%);
          padding: 7px;
          border-radius: 4px;
          text-align: center;

          img {
            height: 100%;
            width: 100%;
            background-size: cover;
          }
        }
      }

      p:last-child {
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }

  .center {
    text-align: center;

    h1 {
      color: #781c0b;
      font-size: 48px;
      line-height: 3.7rem;
      margin-bottom: 0.7rem;
    }

    p {
      width: 100%;
      margin-top: 40px;

      img {
        width: 320px;
      }
    }
  }
}

.top-text {
  margin-bottom: 50px;
  pointer-events: none;
  height: 153px;
  min-width: 1200px;

  img {
    position: absolute;
    right: 0;
  }
}

.fill {
  width: 100%;
}

.login {
  width: 400px;
  // padding: 40px 40px 30px;
  position: relative;
  display: inline-block;
  flex: none;

  h2 {
    padding-left: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 24px;

    span {
      color: #646566;
      font-size: 1.33rem;
      margin-top: 0.71rem;
      display: block;
    }
  }

  .panel-form-item {
    padding-left: 0;
    padding-right: 0;

    .icon-style {
      margin-right: 14px;
      font-size: 20px;
      line-height: 50px;
    }
  }

  .more a:first-child::after {
    content: "";
    position: absolute;
    right: -5px;
    width: 1px;
    height: 8px;
    background: #dcdee0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.code-img {
  width: 100%;
  height: 100%;
  // object-fit: cover;
}

.system-layer {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: no-repeat left bottom;
  background-size: auto 100%;
}

.l-content {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
}

.register {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;

  span {
    padding: 0 10px;
  }
}
</style>

<style>
.login .code-form-item .el-input {
  display: flex;
}

.login .code-form-item .el-input-group__append {
  flex: none;
  margin-left: 10px;
  width: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.login .code-form-item .el-input__inner {
  flex: 1;
}

.login .code-form-item .el-input-group__append,
.login .code-form-item .el-input__inner {
  border-radius: 4px;
}

input[type="password"]::-ms-reveal {
  display: none;
}

.panel {
  /* background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 20px 0px rgba(5, 38, 38, 0.15);
  border-radius: 10px; */
  width: 400px;
  /* padding: 30px 0 40px; */
  text-align: initial;

  h2 {
    font-weight: bold;
    font-size: 30px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 2.14rem;
    padding-left: 60px;
    padding-bottom: 20px;
  }

  .panel-form-item {
    position: relative;
    padding-bottom: 24px;
    margin: 0;
    padding-left: 90px;
    padding-right: 90px;

    &.remember {
      padding: 0;
    }

    .err-info {
      position: absolute;
      top: 100%;
      left: 0;
      margin: 0;
      font-size: 0.8rem;
      line-height: 1.14rem;
      color: #fa5555;
    }
  }

  .more {
    text-align: center;

    a {
      color: #323233;
      line-height: 21px;
      font-size: 16px;
      margin: 0 5px;
      position: relative;
      text-decoration: none;
      cursor: pointer;
    }
  }
}

.panel-form-item .el-select {
  width: 100%;
}

.panel-form-item .el-button,
.panel-form-item .el-input__inner {
  height: 40px;
  font-size: 16px;
}

.panel-form-item .el-button {
  line-height: 26px;
  font-weight: bold;
  font-size: 16px;
}

.panel-form-item .el-form-item__label {
  line-height: 50px;
}

.e-code img {
  width: 100%;
}

.submit {
  --el-color-primary: #93795d;
  --el-button-hover-border-color: #93795d;
  --el-button-hover-bg-color: #93795d;
  --el-button-active-bg-color: #93795d;
  --el-button-active-border-color: #93795d;
}

.drag_verify {
  border: 1px solid #dcdfe6;
}

.register span {
  cursor: pointer;
}

</style>
