<template>
  <div class="bg">
    <div class="logo-box">
      <img src="@/assets/images/logo.png" alt="" />
      <span class="title">智慧小区后台管理系统</span>
    </div>
    <div class="login-box">
      <a-row>
        <!-- 登录 -->
        <a-col class="box-b" v-if="loginStatus === 1">
          <a-tabs>
            <a-tab-pane key="1" tab="密码登录">
              <div class="login-input">
                <a-input v-model="form.username" placeholder="请输入手机号码"></a-input>
                <a-input type="password" v-model="form.password" placeholder="请输入密码"></a-input>
                <a-row>
                  <a-col :span="12" style="margin-left: 23px"
                    ><a-checkbox></a-checkbox>&nbsp;&nbsp;三天之内免登陆</a-col
                  >
                </a-row>
                <a-button
                  type="primary"
                  @click="loginPWD"
                  style="width: 90%; margin: 30px"
                >
                  登录
                </a-button>
                <a-row style="margin-top: 20px; margin-left: 23px">
                  <a-col :span="14">
                    <a-checkbox></a-checkbox>&nbsp;&nbsp;我已同意用户协议
                  </a-col>
                  <a-col :span="10">
                    <span class="logintext" @click="loginStatus = 3">忘记密码</span
                    >&nbsp;&nbsp;&nbsp;&nbsp;<span
                      class="logintext"
                      @click="loginStatus = 2"
                      >免费注册</span
                    >
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="验证码登录">
              <div class="login-input">
                <a-input
                  placeholder="请输入手机号码"
                  v-model="form.tel"
                ></a-input>
                <a-input
                  placeholder="请输入验证码"
                  v-model="form.code"
                  style="width: 60%"
                ></a-input>
                <a-button type="primary" @click="getCode">获取验证码</a-button>
                <a-row>
                  <a-col :span="12" style="margin-left: 23px"
                    ><a-checkbox></a-checkbox>&nbsp;&nbsp;三天之内免登陆</a-col
                  >
                </a-row>
                <a-button
                  type="primary"
                  @click="login"
                  style="width: 90%; margin: 30px"
                >
                  登录
                </a-button>
                <a-row style="margin-top: 20px; margin-left: 23px">
                  <a-col :span="14">
                    <a-checkbox></a-checkbox>&nbsp;&nbsp;我已同意用户协议
                  </a-col>
                  <a-col :span="10">
                    <span class="logintext" @click="loginStatus = 3">忘记密码</span
                    >&nbsp;&nbsp;&nbsp;&nbsp;<span
                      class="logintext"
                      @click="loginStatus = 2"
                      >免费注册</span
                    >
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <!-- 注册 -->
        <a-col class="box-b" v-if="loginStatus === 2">
          <div class="cardTitle">新建账号</div>
          <a-form-model
            ref="register"
            :model="registerForm"
            :rules="registerRules"
            layout="vertical"
          >
            <a-form-model-item ref="tel" label="手机号码" prop="tel">
              <a-input
                v-model="registerForm.tel"
                style="width: 100%"
                placeholder="请输入手机号"
                @blur="
                  () => {
                    $refs.tel.onFieldBlur();
                  }
                "
              />
              
            </a-form-model-item>
            <a-form-model-item  prop="code">
             <a-col :span="16" style="margin-right: 10px">
                  <a-input
                    style="width: 100%"
                    v-model="registerForm.code"
                    placeholder="请输入验证码"
                  />
                </a-col>
                <a-col :span="6">
                  <a-button type="primary" @click="registerCode"
                    >获取验证码</a-button
                  >
                </a-col>
            </a-form-model-item>
            <a-form-model-item label="设置密码" prop="password">
              <a-input placeholder="请输入密码" v-model="registerForm.password"/>
            </a-form-model-item>
            <a-form-model-item label="确认密码" prop="confirmPsw">
              <a-input placeholder="请再次输入密码" v-model="registerForm.confirmPsw"/>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click='registerSubmit' style="width: 100%"> 确定 </a-button>
            </a-form-model-item>
            <a-form-model-item>
              <span>已有账号？</span
              ><span class="logintext" @click="loginStatus = 1">登录</span>
            </a-form-model-item>
          </a-form-model>
        </a-col>
        <!-- 找回密码 -->
        <a-col class="box-b" v-if="loginStatus === 3">
          <div class="cardTitle">找回密码</div>
          <a-form-model
            ref="ruleForm"
            :model="registerForm"
            :rules="registerRules"
            layout="vertical"
          >
            <a-form-model-item ref="tel" label="手机号码" prop="tel">
              <a-input
                v-model="form.tel"
                style="width: 100%"
                placeholder="请输入手机号"
                @blur="
                  () => {
                    $refs.tel.onFieldBlur();
                  }
                "
              />
              <a-row style="margin-top: 20px">
                <a-col :span="16" style="margin-right: 10px">
                  <a-input
                    style="width: 100%"
                    v-model="form.verificationCode"
                    placeholder="请输入验证码"
                  />
                </a-col>
                <a-col :span="6">
                  <a-button type="primary" @click="getCode"
                    >获取验证码</a-button
                  >
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item label="设置密码" prop="psw">
              <a-input placeholder="请输入密码" />
            </a-form-model-item>
            <a-form-model-item label="确认密码" prop="confirmPsw">
              <a-input placeholder="请再次输入密码" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" style="width: 100%"> 确定 </a-button>
            </a-form-model-item>
            <a-form-model-item>
              <span>已有账号？</span
              ><span class="logintext" @click="loginStatus = 1">登录</span>
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {
	register,
	sendTelCode,
	loginPWD,
	loginTelCode,
	sendRegisterCode,
	userInfo
} from "@/api/public/login";
import { allCity } from "@/api/public"
import { form, registerForm, registerRules } from './depend/config'
export default {
	name: "Login",
	data() {
		return {
			loginStatus: 1,
			form,registerForm,registerRules
		};
	},
	created() {
		this.keyupEnter();
	},
	methods: {
		// 绑定enter事件
		keyupEnter() {
			document.onkeydown = (e) => {
				if (e.keyCode === 13 && e.target.baseURI.match(/loginTel/)) {
					//回车后执行搜索方法
					this.login();
				}
			};
		},
		login() {
			loginTelCode(this.form).then((res) => {
				if (res.code === 200) {
					this.$message.success(res.msg);
					// 存储token
					this.setToken(res.data);
					this.gettheCity()
					userInfo().then(res =>{
						console.log(res.data);
						sessionStorage.setItem('info',JSON.stringify(res.data))
					})
					this.$router.push("/");
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		loginPWD() {
			loginPWD(this.form).then((res) => {
				if (res.code === 200) {
					this.$message.success(res.msg);
					// 存储token
					this.setToken(res.data);
					this.gettheCity()
					userInfo().then(res =>{
						sessionStorage.setItem('info',JSON.stringify(res.data))
					})
					this.$router.push("/");
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		// 获取验证码
		getCode() {
			sendTelCode({ tel: this.form.tel }).then((res) => {
				if (res) {
					// this.$message.success("取消成功");
					this.$message.success(res.msg + "   " + res.data);
				}
			});
		},
		// 注册验证码
		async registerCode(){
			let res = await sendRegisterCode({tel: this.registerForm.tel})
			this.$message.success(res.msg + " " + res.data);
		},
		// 注册
		 registerSubmit() {
			this.$refs.register.validate(async valid => {
				if (valid) {
					if(this.registerForm.password !== this.registerForm.confirmPsw){
						this.$message.error('两次输入密码不一致')
						return
					}
					let res = await register(this.registerForm)
					if(res.code===200){
						this.$message.success(res.msg)
						this.$refs.register.resetFields();
						this.loginStatus = 1
					}else{
						this.$message.error(res.msg)
					}
				}
			})
		},
		// 重置
		resetForm() {
			this.$refs.ruleForm.resetFields();
		},
		// 存城市
		gettheCity(){
			allCity().then(res => {
				this.setCity(res.data);
			})
		}
	},
};
</script>

<style lang="less" scoped>
.bg {
  background-image: url(../../assets/images/loginBg.png);
  height: 100vh;
  background-size: cover;
}
.logo-box {
  text-align: left;
  background: #ffffff;
  width: 100%;
  height: 93px;
  line-height: 93px;
  margin-bottom: 93px;
  img {
    width: 51px;
    height: 51px;
    background: #ffffff;
    margin-left: 42px;
    margin-bottom: 13px;
  }
  .title {
    font-size: 28px;
    color: #333333;
    font-weight: 500;
    margin-left: 20px;
    line-height: 93px;
  }
}
.login-box {
  background: #ffffff;
  height: 500px;
  width: 489px;
  margin: auto;
}
.box-a {
  height: 500px;
  padding: 10px;
}
.box-cen {
  background: #e5e5e5;
  height: 500px;
}
.box-b {
  height: 500px;
  text-align: left;
  padding: 30px;
}
.cardTitle {
  margin-left: -10px;
  font-size: 18px;
  color: #000000;
  font-weight: 500;
  margin-bottom: 40px;
}
.logintext {
  color: #205fbd;
  cursor: pointer;
}
/deep/.ant-form-item {
  margin-top: -10px;
}
.login-input {
  text-align: left;
  margin-top: 20px;
  /deep/.ant-input {
    border: 0px;
    border-bottom: 1px solid #f4eded;
    border-radius: 0;
    width: 90%;
    margin: 25px;
  }
}
</style>
