<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 :span="12" class="box-a">
          <img src="@/assets/images/logo.png" alt="" />
        </a-col> -->
        <!-- <a-col :span="1" class="box-cen"></a-col> -->
        <!-- 登录 -->
        <a-col  class="box-b" v-if="status === 1">
           <a-tabs v-model="activeName" @change="tabsSwitch">
                <a-tab-pane key="1" tab="密码登录">
                </a-tab-pane>
                <a-tab-pane key="2" tab="验证码登录">
                </a-tab-pane>
            </a-tabs>
            <div class="login-input">
                <a-input placeholder="请输入手机号码"></a-input>
                <a-input type="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='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="status=3">忘记密码</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="logintext" @click="status=2">免费注册</span>
                  </a-col>
                </a-row>
            </div>
        </a-col>
        <!-- 注册 -->
        <a-col  class="box-b" v-if="status === 2">
          <div class="cardTitle">新建账号</div>
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="inline"
            layout="vertical"
            :wrapper-col="wrapperCol"
          >
            <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="status=1">登录</span>
            </a-form-model-item>
          </a-form-model>
        </a-col>
        <!-- 找回密码 -->
        <a-col  class="box-b" v-if="status === 3">
          <div class="cardTitle">找回密码</div>
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="inline"
            layout="vertical"
            :wrapper-col="wrapperCol"
          >
            <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="status=1">登录</span>
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {loginTel} from "../../api/login"
export default {
  name: "Login",
  data() {
    return {
      status: 1,
      activeName:'1',
      form:{
          tel:''
      },
      rules: {
        tel: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "姓名长度必须为 11 位",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "姓名长度必须为 3 至 5位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
   async login() {
      let res = await loginTel({
        tel:'11',
        code:'111111'
      })
      console.log(res);
    },
    // 获取验证码
    getCode(){},
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    tabsSwitch(){
        console.log(this.activeName);
    }
  },
};
</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>
