<template>
  <div class="login">
    <div class="box">
      <div :class="stepnow != 2 ? 'left' : 'left left1'">
        <div class="title">
         <span class="orgname">{{lan.$t('beelink')}}</span>{{lan.$t('chongzhimima')}}
        </div>

        <div v-if="stepnow == 1">
          <div class="nosign">
            {{lan.$t('xiangqimima')}}
            <span class="tosign"><router-link to="/"> {{lan.$t('qudenglu')}} </router-link></span>
          </div>

          <a-form :layout="formLayout">
            <a-form-item :label="lan.$t('zhanghuming')" class="form-item">
                <a-input class="shuru" :placeholder="lan.$t('shuruzhanghao')"  v-model:value="uinfo.phone"/>
            </a-form-item>
            <div class="submit" @click="next(2)">{{lan.$t('xiayibu')}}</div>
        
          </a-form>
        </div>

        <div v-if="stepnow == 2">
          <div class="nosign">
            {{lan.$t('yiyouzhanghao')}}
            <span class="tosign"><router-link to="/"> {{lan.$t('qudenglu')}} </router-link></span>
          </div>
          <a-form :layout="formLayout">
            <div class="signform">
              <div style="display:flex">
          <a-form-item :label="lan.$t('shoujihao')" class="shuru">
              <div>{{uinfo.phone}}</div>
          </a-form-item>
            <a-form-item :label="lan.$t('yanzhengma')" class="form-item yzm">

               <a-input-group compact>
                   <div class="getcode" @click="getcode">
                  {{lan.$t('dianjihuoquyzm')}} {{ time == 60 ? "" : "(" + time + ")" }}
                </div>
      
                <div class="line"></div>
                <a-input style="width: 50%" :placeholder="lan.$t('shuruyzm')" v-model:value="uinfo.code"/>
              </a-input-group>
            </a-form-item>
 
              </div>
         
            <div style="display:flex">
                    <a-form-item :label="lan.$t('chongzhimima')" class="form-item">
                <a-input class="shuru" :placeholder="lan.$t('chongzhishurumima')" type="password" v-model:value="uinfo.password"/>
              </a-form-item>
                    <a-form-item :label="lan.$t('querenmima')" class="form-item">
                <a-input class="shuru" :placeholder="lan.$t('shurumimatwo')" type="password" v-model:value="uinfo.repassword"/>
              </a-form-item>
            </div>

            </div>

            <div class="submit" @click="next(3)">{{lan.$t('querenchongzhi')}}</div>
            <div class="orginfo">{{lan.$t('banquan')}}</div>
          </a-form>
        </div>

        <div v-if="stepnow == 3">
          <div class="nosign">{{lan.$t('wanchengchongzhi')}}</div>
          <img src="@/static/images/success.png" alt="" class="success">
          <div class="ale" @click="tologin">{{lan.$t('chongzhichenggong')}}</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' : ''">{{lan.$t('shibiezhanghao')}}</div>
          </div>
          <div class="stepline"></div>
          <div class="step">
            <div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
            <div :class="stepnow == 2 ? 'stepnow' : ''">{{lan.$t('yanzhengxinxi')}}</div>
            <div class="back" @click="next(1)" v-if="stepnow==2">
              {{lan.$t('fanhuishangyibu')}}
            </div>
          </div>
          <div class="stepline"></div>
          <div class="step">
            <div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
            <div :class="stepnow == 3 ? 'stepnow' : ''">{{lan.$t('chongzhiwancheng')}}</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 { checksmscode, checkuser, editpassword, sendsms } from '@/api';
import router from '@/router';
import { useI18n } from '@/utils/i18n';
import { message } from 'ant-design-vue';
import { defineComponent, ref, toRaw } from "vue";
export default defineComponent({
  name: "Sign",
  components: {},
  setup() {
    const lan: any = useI18n();
    const formLayout = {
      labelCol: 4,
      wrapperCol: 14,
    };
    const uinfo=ref({
      phone:"",
      code:"",
      quhao:"",
      password:"",
      repassword:"",
      checkcodequhao:"",
      memberid:0
    })
    const time = ref(60);  //倒计时初始值
    /**
     * 点击获取验证码 触发60S倒计时
     */
    let lock=false
    const getcode: () => void = () => {
      console.log(11111);
      if (lock) {
        console.log("lock")
          return;
      }
      if (uinfo.value.phone == "") {
          message.error(lan.$t('shoujihaoweikong'));
          return;
      }
      lock = true;
      sendsms(uinfo.value.quhao, uinfo.value.phone);
      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); //是否同意用户协议

    /**
     * 用户协议前面 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 = async (e: number) => {
      if(e==2){
        console.log(uinfo)
        const res: any = await checkuser(toRaw(uinfo.value))
        // console.log(res.data)
        if(res.data){
          // stepnow.value = e;
          uinfo.value.quhao = res.data.code.toString() 
          uinfo.value.memberid=res.data.memberid
          console.log(uinfo)
          stepnow.value=e
        }else{
          message.error(lan.$t('yonghubucunzai'))
        }

 
      }else if(e==3){
        if(uinfo.value.phone==""|| uinfo.value.code==""|| uinfo.value.password==""|| uinfo.value.repassword==""){
          message.error(lan.$t('wanshanxinxi'))
          return
        }else if(uinfo.value.password!=uinfo.value.repassword){
          message.error(lan.$t('mimabuyizhi'))
          return 
        } 

      const checkcode=await checksmscode(uinfo.value.quhao+uinfo.value.phone,uinfo.value.code)
      console.log(checkcode,"checked")
      if(checkcode){
        console.log(uinfo.value)
        const res= await editpassword(toRaw(uinfo.value))
        if(res.code==0){
          stepnow.value=e
          router.push("/")
        }
      }else{
         message.error(lan.$t("yanzhengmayouwu"))
      }

      }
      
    };

    function tologin (){
      router.push("/")
    }
    return {
      formLayout,
      getcode,
      time,
      agree,
      ifagree,
      stepnow,
      next,
      uinfo,
      tologin,
      lan
    };
  },
});
</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:none !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: 100%;
  height: 100vh;
  background: url("../../static/images/loginbg.png");
  background-size: 100% 130%;
  background-repeat: no-repeat;
  padding-top: 145px;
  .box {
    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;
        a{
          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: 140px;
        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;
          }
        }
      }
    }
    .yzm{
      left:40px;
    }
    .right1 {
      width: 260px !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;
      margin-right:40px
    }
  }
  .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>