<template>
  <div class="login">
     <NavTop :type="0" style="flex-shrink:0"></NavTop>
    <div class="box">
      <div :class="stepnow != 2 ? 'left' : 'left left1'">
        <div class="title">
          您好，欢迎来到 <span class="orgname">Beelink</span>
        </div>

        <div v-if="stepnow == 1">
          <div class="nosign">
            已有账号？
            <span class="tosign"> 去登录 </span>
          </div>

          <a-form :layout="formLayout">
            <a-form-item label="手机号" class="form-item">
              <a-input-group compact>
                <a-select
                  default-value="Zhejiang"
                  class="getcode"
                  style="width: 50%"
                >
                  <a-select-option value="Zhejiang">
                    中国+0086
                  </a-select-option>
                  <a-select-option value="Jiangsu"> Jiangsu </a-select-option>
                </a-select>
                <div class="line"></div>
                <a-input style="width: 50%" placeholder="请输入您的手机号" />
              </a-input-group>
            </a-form-item>
            <a-form-item label="验证码" class="form-item">
              <a-input-group compact>
                <div class="getcode" @click="getcode">
                  点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
                </div>
                <div class="line"></div>
                <a-input style="width: 50%" placeholder="请输入您的验证码" />
              </a-input-group>
            </a-form-item>
            <div class="submit" @click="next(2)">下一步</div>
            <div class="agreement" @click="agree">
              <div class="ifagree">
                <img
                  src="@/static/images/agree.png"
                  alt=""
                  class="agree"
                  v-if="ifagree"
                />
              </div>
              勾选表示同意 《用户注册协议和隐私政策》
            </div>
          </a-form>
        </div>

        <div v-if="stepnow == 2">
          <div class="nosign">
            已有账号？
            <span class="tosign"> 去登录 </span>
          </div>
          <a-form :layout="formLayout">
            <div class="signform">
              <a-form-item label="设置密码" class="form-item">
                <a-input class="shuru" placeholder="请输入您的密码" type="password"/>
              </a-form-item>
              <a-form-item label="设置密码" class="form-item">
                <a-input class="shuru" placeholder="请再次输入您的密码" type="password"/>
              </a-form-item>
              <a-form-item label="姓名" class="form-item">
                <a-input class="shuru" placeholder="请输入您的姓名" />
              </a-form-item>
              <a-form-item label="邮箱" class="form-item">
                <a-input class="shuru" placeholder="请输入您的邮箱" />
              </a-form-item>
              <a-form-item label="母语" class="form-item">
                <a-input class="shuru" placeholder="请输入您的母语" />
              </a-form-item>
              <a-form-item label="授课语言" class="form-item">
                <a-select class="getcode" placeholder="请选择您的授课语言">
                  <a-select-option value="Zhejiang">
                    中国+0086
                  </a-select-option>
                  <a-select-option value="Jiangsu"> Jiangsu </a-select-option>
                </a-select>
              </a-form-item>
            </div>

            <div class="submit" @click="next(3)">立刻注册</div>
            <div class="orginfo">Beelink公司版权所有 2019—2022</div>
          </a-form>
        </div>

        <div v-if="stepnow == 3">
          <div class="nosign">您已完成注册</div>
          <img src="@/static/images/success.png" alt="" class="success">
          <div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div>
        </div>
      </div>
      <div :class="stepnow != 2 ? 'right' : 'right right1'">
        <div class="steps">
          <div class="step">
            <div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
            <div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
          </div>
          <div class="stepline"></div>
          <div class="step">
            <div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
            <div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
            <div class="back" @click="next(1)" v-if="stepnow==2">
              返回上一步
            </div>
          </div>
          <div class="stepline"></div>
          <div class="step">
            <div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
            <div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
          </div>
        </div>
        <div class="icons" v-if="stepnow == 2">
          <img src="@/static/images/weixin.png" alt="" class="icon" />
          <img src="@/static/images/weibo.png" alt="" class="icon" />
          <img src="@/static/images/facebook.png" alt="" class="icon" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import NavTop from "@/components/NavTop.vue"

export default defineComponent({
  name: "Sign",
  components: {NavTop},
  setup() {
    const formLayout = {
      labelCol: 4,
      wrapperCol: 14,
    };
    const time = ref(60); //倒计时初始化

    /**
     * @param
     * 点击获取验证码  触发60S倒计时
     */
    const getcode: () => void = () => {
      console.log(11111);
      const timestep = setInterval(() => {
        console.log(11112);
        time.value = time.value - 1;
        if (time.value > 0) {
          console.log();
        } else {
          time.value = 60;
          clearInterval(timestep);
        }
      }, 1000);
    };
    const ifagree = ref(true); //是否同意用户协议

    /**
     *@param
     * 用户协议前面radio 的点击效果 
     */
    const agree: () => void = () => {
      ifagree.value = ifagree.value == true ? false : true;
      console.log(ifagree.value, 600);
    };

    const stepnow = ref(1); // 步骤条初始

    /**
     *@param  e 跳到哪一步
     * 步骤条跳到某一步 
     */
    const next: (e: number) => void = (e: number) => {
      stepnow.value = e;
    };
    return {
      formLayout,
      getcode,
      time,
      agree,
      ifagree,
      stepnow,
      next,
    };
  },
});
</script>
<style lang="scss" scoped>
.login ::v-deep(.ant-select-selection) {
  border: none;
}
.login ::v-deep(.ant-input) {
  border: none;
}
.ant-input:focus {
  border: none;
  border-bottom: 1px solid white !important;
  box-shadow: none;
}
.login ::v-deep(.ant-form-item-label) {
  line-height: 14px;
}
.login ::v-deep(.ant-form-item) ::v-deep(label) {
  color: #0dbba4;
  font-size: 11px;
  left: 1px;
}
.login {
  min-width: 100vw;
  height: 100vh;
  background: url("../../static/images/loginbg.png");
  background-size: 100% 130%;
  background-repeat: no-repeat;
  .box {
    padding-top: 145px;

    display: flex;
    justify-content: space-around;
    .left1 {
      width: 710px !important;
    }
    .left {
      width: 314px;
      .title {
        font-size: 17px;
        font-weight: bold;
      }
      .orgname {
        font-size: 29px;
        color: #0dbba4;
        cursor: pointer;
      }
      .nosign {
        font-size: 12px;
        color: #666666;
        margin-top: 17px;
        margin-bottom: 35px;
      }
      .tosign {
        color: #0dbba4;
        cursor: pointer;
      }
      .tab {
        margin-bottom: 30px;
      }

      .form-item {
        border-bottom: 1px solid #e5e5e5;
        font-size: 15px;
        margin-right: 40px;
      }
      .line {
        width: 1px;
        height: 14px;
        background: #e5e5e5;
        margin-top: 10px;
        position: relative;
        z-index: 999;
      }
      .getcode {
        font-size: 15px;
        color: #08ae98;
        width: 313px;
        line-height: 30px;
        cursor: pointer;
      }
      .orginfo {
        margin-top: 178px;
      }
      .submit {
        width: 143px;
        height: 35px;
        background: linear-gradient(
          90deg,
          #00dac2,
          #42de9e,
          #88e062,
          #d0eb3e,
          #fffa18
        );
        border-radius: 18px;
        font-size: 15px;
        color: white;
        font-weight: 800;
        text-align: center;
        line-height: 35px;
        margin-top: 45px;
      }
      .agreement {
        font-size: 12px;
        display: flex;
        margin-top: 23px;
        cursor: default;
        .ifagree {
          width: 12px;
          height: 12px;
          border-radius: 3px;
          border: 1px solid #0ebca4;
          margin: auto 0;
          margin-right: 7px;
          .agree {
            width: 8px;
            height: 6px;
            position: relative;
            top: -4px;
            left: 2.5px;
          }
        }
      }
    }
    .right1 {
      width: 230px !important;
    }
    .right {
      width: 690px;
      .steps {
        padding-top: 112px;
        .stepline {
          width: 1px;
          height: 50px;
          border: 1px dashed #eeeeee;
          position: relative;
          left: 13px;
        }
        .step {
          display: flex;
          color: #999999;
          font-size: 11px;
          line-height: 28px;
          font-weight: bold;
          .back {
            color: #0dbba4;
            margin-left: 23px;
          }
          .circle {
            width: 29px;
            height: 29px;
            border-radius: 15px;
            background: #eeeeee;
            font-size: 12px;
            color: #999999;
            text-align: center;
            line-height: 29px;
            font-weight: 800;
            margin-right: 17px;
          }
        }
        .step1 {
          background: #08ae98 !important;
          color: white !important;
        }
        .stepnow {
          color: #111111;
        }
      }
    }
  }
  .signform {
    display: flex;
    flex-wrap: wrap;
    .shuru {
      width: 313px;
    }
  }
  .icons {
    margin-right: 41px;
    margin-top: 227px;
    .icon {
      width: 28px;
      height: 28px;
      margin-right: 18px;
      float: right;
    }
  }
  .success{
    width: 250px;
    height: 233px;
  }
  .ale{
    color:#08AE98;
    font-size: 14px;
    font-weight: 800;
    margin-top: 34px;
    cursor: pointer;
  }
}
</style>