<template>
  <div class="form">
    <div class="container " :class="{'sign-up-mode':isLogin}" >
      <div class="form-warp">
        <div class="relative form-flex">
          <div
            class="forms-sumit"
            :class="{ 'register-left': isLogin, 'register-rigth': !isLogin }"
          >
            <h2>注册</h2>
            <p class="register" @click="setState(false)">
              我有账号，点击登录
            </p>
            <el-form
              v-if="!isMssages"
              ref="registerRuleFormRef"
              :model="register"
              :rules="registerRules"
              label-width="0px"
            >
              <el-form-item
                style="margin-bottom: 0px"
                prop="email"
                class="app-form-center"
              >
                <div class="form-left">
                  邮箱
                </div>
                <el-input
                  v-model="register.email"
                  size="large"
                  type="text"
                  maxlength="50"
                  placeholder="请输入您的邮箱"
                />
              </el-form-item>
              <el-form-item
                style="margin-bottom: 0px"
                prop="password"
                class="app-form-center"
              >
                <div class="form-left">
                  密码
                </div>
                <el-input
                  v-model="register.password"
                  placeholder="请输入您的密码"
                  type="password"
                  autocomplete="off"
                  size="large"
                />
              </el-form-item>
              <el-form-item
                style="margin-bottom: 0px"
                prop="entryPassword"
                class="app-form-center"
              >
                <div class="form-left">
                  确认密码
                </div>
                <el-input
                  v-model="register.entryPassword"
                  placeholder="请输入二次确认密码"
                  type="password"
                  autocomplete="off"
                  size="large"
                />
              </el-form-item>
              <el-form-item
                label=""
                style="margin-bottom: 0px"
                class="app-form-center"
                prop="verify"
              >
                <div class="form-left">
                  验证码
                </div>
                <div class="verify">
                  <div>
                    <el-input
                      v-model="register.verify"
                      placeholder="请输入您的验证码"
                      size="large"
                      autocomplete="off"
                    />
                  </div>
                  <div>
                    <img src="/api/get/imgCode" alt="">
                  </div>
                  <div>换一张</div>
                </div>
              </el-form-item>
              <el-form-item label="" prop="agreement">
                <div class="">
                  <!-- <el-button type="primary" @click="onSubmit">登录</el-button> -->
                  <div>
                    <el-checkbox v-model="register.agreement" />
                    我已阅读并同意“铜壶协议和隐私条款”
                  </div>
                  <div class="submit-btn" @click="onRegister">
                    注册
                  </div>
                  <div class="form-left">
                    <SvgIcon name="vx" height="36px" width="36px" />
                  </div>
                  <div class="Short-flex">
                    <span @click="setMssages(true)">短信快捷登录</span>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <MessageLogin v-if="isMssages" @account="setMssages(false)" />
          </div>
          <div
            class="Propaganda forms-sumit"
            :class="{
              'bor-left Propaganda-right': isLogin,
              'bor-right': !isLogin,
            }"
          >
            <h2 title="Woody Quality">
              Woody Quality
            </h2>
            <p>一站式测试平台</p>
            <div class="form-img-svg">
              <img v-show="isLogin" :src="loginSvg" class="image" alt="" />
              <img v-show="!isLogin" :src="registerSvg" class="image" alt="" />
            </div>

          </div>
          <!-- 登录 -->
          <div
            class="forms-sumit"
            :class="{ 'login-right': isLogin, 'login-index': !isLogin }"
          >
            <h2>登录</h2>
            <p class="register" @click="setState(true)">
              您还没有账号？点击创建
            </p>
            <el-form
              v-if="!isMssages"
              ref="loginRuleFormRef"
              :rules="loginRules"
              :model="form"
              label-width="0px"
            >
              <el-form-item style="margin-bottom: 0px" class="app-form-center">
                <div class="form-left">
                  账号
                </div>
                <el-input
                  v-model="form.name"
                  size="large"
                  type="text"
                  maxlength="50"
                  placeholder="请输入您的邮箱"
                />
              </el-form-item>
              <el-form-item style="margin-bottom: 0px" class="app-form-center">
                <div class="form-left">
                  密码
                </div>
                <el-input
                  v-model="form.password"
                  placeholder="请输入您的密码"
                  autocomplete="off"
                  type="password"
                  size="large"
                />
              </el-form-item>
              <el-form-item
                label=""
                style="margin-bottom: 0px"
                class="app-form-center"
              >
                <div class="form-left">
                  验证码
                </div>
                <div class="verify">
                  <div>
                    <el-input
                      v-model="form.verify"
                      placeholder="请输入您的验证码"
                      size="large"
                    />
                  </div>
                  <div>
                    <img src="/api/get/imgCode" alt="">
                  </div>
                  <div>看不清</div>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div class="">
                  <div class="submit-btn" @click="onSubmit">
                    登录
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="">
                <div class="form-left">
                  <SvgIcon name="vx" height="36px" width="36px" />
                </div>
                <div class="Short-flex">
                  <span @click="setMssages(true)">短信快捷登录</span><span>忘记密码？</span>
                </div>
              </el-form-item>
            </el-form>
            <MessageLogin v-if="isMssages" @account="setMssages(false)" />
          </div>
        </div>
      </div>
      <div class="form-banner">
        <img :src="banner" alt="">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  defineComponent,
  ref,
  toRefs,
  unref,
  getCurrentInstance
} from 'vue'
import { registerUserApi, ImageCodeApi } from '@/api/user'
import type { ElForm } from 'element-plus'
import MessageLogin from './message-Login.vue'
import registerSvg from "@/assets/svg/register.svg";
import loginSvg from "@/assets/svg/log.svg";
import banner from "@/assets/images/banner.png";
import {login} from "@/api/user";
import router, {addRoutes} from "@/router";
import {RouteLocationRaw, useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import store from "@/store";
// import verify from './verify.png'
export default defineComponent({
  components: {
    MessageLogin
  },
  setup() {
    const route = useRoute();
    const { proxy }: any = getCurrentInstance()
    const registerRuleFormRef = ref<InstanceType<typeof ElForm>>()
    const loginRuleFormRef = ref<InstanceType<typeof ElForm>>()
    const formSubmit: any = reactive({
      form: {
        name: 'julimeng',
        password: '123456789',
        verify: '',
        imgVerify: null
      },
      register: {
        email: '',
        password: '',
        entryPassword: '',
        agreement: false,
        verify: '',
        imgVerify: null
      }
    })
    // 注册验证
    const registerRules = reactive({
      email: [
        // { required: true, message: '邮箱不能为空', trigger: 'blur' },
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {
            console.log(rule, value, callback)

            if (!value) {
              return callback(new Error('请填写您的email'))
            }
            callback()
          }
        }
      ],
      password: [
        {
          required: true,
          validator: (rule: any, value: any, callback: any) => {
            if (!value) {
              return callback(new Error('请填写您的密码'))
            }
            callback()
          },
          trigger: 'blur'
        }
      ],
      entryPassword: [
        {
          // required: true,
          validator: (rule: any, value: any, callback: any) => {
            if (value !== formSubmit.register.password) {
              return callback(new Error('两次密码不一致'))
            }
            callback()
          },
          trigger: 'blur'
        }
      ],
      verify: [
        {
          required: true,
          trigger: 'blur',
          message: '请填写验证码'
        }
      ]
    })
    // 登录验证
    const loginRules = reactive({
      name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        {
          trigger: 'blur',
          validator: (rule: any, value: any, callback: any) => {
            console.log(rule, value, callback)

            if (!value) {
              return callback(new Error('请填写您的用户名'))
            }
            callback()
          }
        }
      ],
      password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        {
          required: true,
          validator: (rule: any, value: string, callback: any) => {
            if (!value) {
              return callback(new Error('请填写您的密码！'))
            }
            if(value.length<=6){
              return callback(new Error('密码不符合规则！'))
            }
            callback()
          },
          trigger: 'blur'
        }
      ],
      // verify: [
      //   {
      //     required: true,
      //     trigger: 'blur',
      //     message: '请填写验证码'
      //   }
      // ]
    })
    const isLogin: any = ref(true)
    const isMssages: any = ref(false)
    const setState = (state: Boolean) => {
      isLogin.value = state
    }
    const setMssages = (state: Boolean) => {
      isMssages.value = state
    }
    const onSubmit = () => {
      const formWrap = unref<any>(loginRuleFormRef)
      if (!formWrap) return
      // 验证成功
      formWrap.validate((valid: boolean) => {
        console.log(valid)
        if (valid) {
          store
              .dispatch("user/login", {
                type: "user",
                password: formSubmit.form.password,
                name: formSubmit.form.name,
                // code: formSubmit.register.code
              })
              .then(async () => {
                ElMessage.success({
                  message: "登录成功",
                  type: "success",
                  showClose: true,
                  duration: 1000,
                });
                await addRoutes();
                await router.push(
                    (route.query.redirect as RouteLocationRaw) || "/"
                );
              })
        }
      })
    }
    const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
    const onRegister = () => {
      if (!formSubmit.register.agreement) {
        proxy.$message.error('请先勾选协议', 2000)
        return
      }
      const formWrap = unref<any>(registerRuleFormRef)
      if (!formWrap) return
      // 验证成功
      formWrap.validate((valid: boolean) => {
        console.log(valid)
        if (valid) {
          registerUserApi({
            password_1: formSubmit.register.password,
            password_2: formSubmit.register.entryPassword,
            email: formSubmit.register.email,
            agree: formSubmit.register.agreement
          }).then((res: any) => {
            console.log(res)
          })
        }
      })
    }
    console.log(formSubmit.form.verify)

    return {
      onSubmit,
      onRegister,
      isLogin,
      setState,
      isMssages,
      setMssages,
      registerRuleFormRef,
      loginRuleFormRef,
      registerRules,
      loginRules,
      registerSvg,
      loginSvg,
      banner,
      ...toRefs(formSubmit)
    }
  }
})
</script>

<style lang="scss" scoped>
.form {
  // width: 460px;
  &-left {
    text-align: left;
    width: 309px;
    // margin: 10px 0;
  }
}
.register {
  text-align: left;
  color: #19abdb;
  cursor: pointer;
  font-size: 12px;
  padding-left: 75px;
}

.app-form-center {
  // margin-left: -100px;
}
.container {
  position: relative;
  min-height: 100vh;
  //width: 100%;
  overflow: hidden;
  margin: 0 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: center;
}
.form-banner{
  z-index: 9;
  display: inline-block;
  img{
    width: 100%;
    vertical-align: middle;
  }
}
.container:before {
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 1;
}
.sign-up-mode::before {
  transform: translate(100%, -50%);
}
.forms-sumit {
  width: 360px;
  transition: transform 1s;
  background: #fff;
}
.login-right {
  // transition: all 1s;
  transform: translate(-100%, 0%);
  visibility: hidden;
}
.register-rigth {
  visibility: hidden;
  transform: translate(100%, 0%);
}
.register-left {
  z-index: 9999;
  transform: translate(0%, 0%);
  // transition: all 1s;
}
.verify {
  width: 100%;
  // display: flex;
  > div {
    display: inline-block;
  }
  > div:first-child {
    width: 150px;
  }
  > div:nth-child(2) {
    width: 100px;
    margin-left: 10px;
    vertical-align: middle;
    border: 1px solid #333;
  }
  > div:nth-child(3) {
    margin-left: 5px;
  }
}
.bor-right {
  border-right: 1px solid #adbae1;
}
.bor-left {
  border-left: 1px solid #adbae1;
}
.login-index {
  z-index: 99;
  transform: translate(0%, 0%);
  background: #fff;
}
.form-flex {
  display: flex;
}
.Short-flex {
  display: flex;
  justify-content: space-between;
  > span {
    color: #19abdb;
    cursor: pointer;
  }
}
.relative {
  position: relative;
}
.Propaganda-right {
  left: 50% !important;
}
.Propaganda {
  width: 360px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #fff;
  z-index: 999999;
  transition: all 1s;
}
.form-warp {
  width: 720px;
  //position: absolute;
  z-index: 5;
  padding: 20px;
  //left: 10%;
  //top: 50%;
  //transform: translate(00%, -50%);
  // display: grid;
  box-shadow: -10px 10px 10px rgb(218 221 231 / 70%);
  border-right: 0.5px solid #adbae1;
  border-top: 0.5px solid #adbae1;
  max-height: 600px;
  background: #fff;
  border-radius: 25px;
  grid-template-columns: 1fr;
  transition: 1s 0.7s ease-in-out;
  display: flex;
}
.form-warp form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  /* 将两个 form 布局在 grid 同一位置 */
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  transition: all 0.2s 0.7s;
  opacity: 1;
  z-index: 4;
}
.form-title {
  color: #6266f5;
}
.form-warp .sign-up-form {
  opacity: 0;
  z-index: 3;
}

.sign-up-mode .sign-in-form {
  opacity: 0;
  z-index: 3;
}
.sign-up-mode .sign-up-form {
  opacity: 1;
  z-index: 4;
}
input,
.submit-btn {
  min-width: 50px;
  width: 50px;
  outline: none;
  padding: 12px 30px;
  line-height: 1;
  font-size: 16px;
  border-radius: 60px;
  color: #333;
  background-color: #6267f5;
  border: none;
  &:hover {
    background-color: #999cf8;
  }
}
input::placeholder {
  color: #cccc;
}
.submit-btn {
  margin: 0 auto;
  background-color: #6266f5;
  color: #fff;
  text-align: center;
  min-width: 150px;
  font-size: initial;
  font-weight: bold;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    background-color: #999cf8;
  }
}

.desc-warp {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.desc-warp-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  padding: 3rem 17% 2rem 12%;
  z-index: 6;
}
/* 事件穿透 BEGIN */
.sign-in-desc {
  pointer-events: none;
}
.sign-up-mode .sign-in-desc {
  pointer-events: all;
}
.sign-up-mode .sign-up-desc {
  pointer-events: none;
}
/* 事件穿透 END */
.content {
  width: 100%;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}
.sign-in-desc img,
.sign-in-desc .content {
  transform: translateX(800px);
}
.sign-up-mode .sign-in-desc img,
.sign-up-mode .sign-in-desc .content {
  transform: translateX(0);
}

.sign-up-mode .sign-up-desc img,
.sign-up-mode .sign-up-desc .content {
  transform: translateX(-800px);
}

button {
  outline: none;
  padding: 6px 8px;
  min-width: 100px;
  text-align: center;
  border-radius: 30px;
  border: 2px solid #fff;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
button:active {
  background: rgba(255, 255, 255, 0.1);
}
img {
  width: 100%;
  display: block;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.5s;
}

/* 响应式 */
@media screen and (max-width: 870px) {
  .container {
    min-height: 800px;
    height: 100vh;
  }
  .container::before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 68%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }
  .signin-signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }
  .signin-signup,
  .container.sign-up-mode .signin-signup {
    left: 50%;
  }

  .sign-up-mode::before {
    transform: translate(-50%, 100%);
    bottom: 32%;
    right: initial;
  }
  .form-warp {
    // width: 100%;
    top: 75%;
    left: 50%;
    transition: 1s 0.8s ease-in-out;
  }
  .sign-up-mode .left-panel .image,
  .sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .sign-up-mode .right-panel .image,
  .sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .right-panel .image,
  .right-panel .content {
    transform: translateY(300px);
  }

  .sign-up-mode .signin-signup {
    top: 5%;
    transform: translate(-50%, 0);
  }
  .sign-up-mode .form-warp {
    top: 25%;
    left: 50%;
    transform: translate(00%, 0);
  }
  img {
    width: 200px;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.7s;
  }
  .desc-warp {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }
  .desc-warp-item {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 8%;
    grid-column: 1 / 2;
  }

}

@media screen and (max-width: 1630px){
  .form-banner{
    display: none;
  }
}
/* 手机端*/
@media screen and (max-width: 1000px){
  .Propaganda{
    display: none;
  }
  .form-warp{
    width: 360px;
  }
  .register-rigth{
    display: none;
  }
  .login-index,.register-rigth{
    transform: translate(0%, 0%) !important;
  }
}
@media screen and (max-width: 570px) {
  .container::before {
    bottom: 72%;
    left: 50%;
  }
  img {
    display: none;
  }
}
.form-img-svg{
  padding: 0 15px;
  margin-top: 90px;
  img{
    width: 100%;
  }
}
</style>
