<template>
  <div>
    <h2>登录</h2>
    <p class="register" @click="$emit('setState',true)">
      您还没有账号？点击创建
    </p>
    <el-form ref="forms" :rules="registerRules" :model="form" label-width="0px">
      <el-form-item style="margin-bottom: 0px" class="app-form-center" label="手机号码" label-width="80px">
        <el-input
            v-model="form.phone"
            placeholder=""
            type="text"
            size="large"
        />
      </el-form-item>
      <el-form-item label="验证码" style="margin-bottom: 0px" class="app-form-center" label-width="80px" >
        <div class="verify">
          <div>
            <el-input v-model="form.code" placeholder="" size="large" />
          </div>
          <div>
            <p class="sendCode" v-if="!isSend.state" @click="sendRequest">获取验证码</p>
            <p v-if="isSend.state">{{ isSend.num }}秒后继续获取验证码</p>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="">
        <div class="" style="width:100%">
          <!-- <el-button type="primary" @click="onSubmit">登录</el-button> -->
          <div v-show="!islogin">
            <el-checkbox v-model="form.agreement" />
            我已阅读并同意“铜壶协议和隐私条款”
          </div>
          <div class="form-center">
            <div v-if="islogin" class="submit-btn" @click="onSubmit">
              注册
            </div>
            <div v-else class="submit-btn" @click="onSubmit">
              登录
            </div>
          </div>

          <div class="form-left">
            <SvgIcon name="vx" height="36px" width="36px" />
          </div>
          <div class="Short-flex">
            <span @click="$emit('setMssages',false)">账号和密码注册</span>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>

</template>

<script lang="ts">
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref} from 'vue'
import verify from './verify.png'
import {types} from "sass";
import {register, sendCode} from "@/api/work";
import {ElForm, ElMessage} from "element-plus";
import {registerUserApi} from "@/api/user";
let time:number = -9999
export default defineComponent({
  props:{
    islogin:{
      type:Boolean,
      default:()=>false
    }
  },
  setup() {
    const registerRuleFormRef = ref<InstanceType<typeof ElForm>>()
    const lastSend =  ref<number>()
    const formSubmit: any = reactive({
      form: {
        phone: '',
        verify: verify,
        code: '',
        agreement: false
      }
    })
    // 注册验证
    const registerRules = reactive({
      phone: [
        {
          required: true,
          validator: (rule: any, value: any, callback: any) => {
            if (!value) {
              return callback(new Error('手机号不能为空'))
            }
            callback()
          },
          trigger: 'blur'
        }
      ],
      code: [
        {
          // required: true,
          validator: (rule: any, value: any, callback: any) => {
            if (!value||value.length<4) {
              return callback(new Error('验证码不能为空'))
            }
            callback()
          },
          trigger: 'blur'
        }
      ],
      agreement: [
        {
          // required: true,
          validator: (rule: any, value: any, callback: any) => {
            if (value !== true) {
              return callback(new Error('请先勾选协议'))
            }
            callback()
          },
          trigger: 'blur'
        }
      ]
    })
    const isSend: any = reactive({
      isSend: {
        state: false,
        num: 60
      }
    })
    const onSubmit = () => {
      const formWrap = unref<any>(registerRuleFormRef)
      if (!formWrap) return
      formWrap.validate((valid: boolean) => {
        console.log(valid)
        if (valid) {
          // register({}).then(res=>{
          //
          // }))
          console.log(11111111)
        }
      })

    }
    onBeforeMount(()=>{
      const date:number = new Date().getTime()/1000
      const storage:string = localStorage.getItem("lastSend")||""
      lastSend.value = isNaN(parseInt(storage))?0:parseInt(storage)
      isSend.isSend.num = lastSend.value-date
      if(time>0){
        clearInterval(time)
      }
      time = setInterval(() => {
        isSend.isSend.num -= 1
        if (isSend.isSend.num <= 0) {
          isSend.isSend.state = false
        }
      }, 1000)
      // lastSend.value = isNaN(parseInt(storage))?0:parseInt(storage)
    })
    onUnmounted(()=>{
      clearInterval(time)
    })
    // 发送验证码
    const sendRequest = () => {
      // 手机号校验
      if(formSubmit.form.phone.length<13){
        ElMessage({
          showClose: true,
          message: '手机号不能为空',
          type: 'error',
          duration:3000
        })
        return;
      }
      sendCode({
        phone:formSubmit.form.phone
      }).then(res=>{
        isSend.isSend.state = true
        const date:number = new Date().getTime()/1000
        clearInterval(time)
        isSend.isSend.num = 60
        time = setInterval(() => {
          isSend.isSend.num -= 1
          if (isSend.isSend.num <= 0) {
            isSend.isSend.state = false
          }
        }, 1000)
        // 下次验证码发送时间
        localStorage.setItem('lastSend', String(Math.floor(date+60)))
        ElMessage({
          showClose: true,
          message: '短信成功发送,请注意查收',
          type: 'success',
          duration:3000
        })
      })
    }
    return {
      ...toRefs(formSubmit),
      ...toRefs(isSend),
      registerRules,
      onSubmit,
      sendRequest
    }
  },
  mounted() {
    clearInterval(time)
  },
  onBeforeUnmount() {
    clearInterval(time)
  }
})
</script>

<style lang="scss" scoped>
.forms-sumit {
  width: 360px;
  transition: all 1s;
}
.submit-btn {
  outline: none;
  margin: 0 auto;
  padding: 12px 30px;
  line-height: 1;
  font-size: 16px;
  border-radius: 60px;
  color: #fff;
  background-color: var(--system-primary-color);
  border: none;
  &:hover {
    background-color: var(--system-primary-text-color);
  }
}
.form-center {
  text-align: center;
}
.verify {
  width: 100%;
  text-align: left;
  // display: flex;
  > div {
    display: inline-block;
  }
  > div:first-child {
    width: 80px;
  }
  > div:nth-child(2) {
    margin-left: 10px;
    vertical-align: middle;
  }
  > div:nth-child(3) {
    margin-left: 5px;
  }
}
img {
  width: 100%;
  display: block;
  transition: transform 0.9s ease-in-out;

}
.Short-flex {
  display: flex;
  justify-content: space-between;
  > span {
    color: #19abdb;
    cursor: pointer;
  }
}
.el-form-item{
  align-items: center;
}
.register {
  text-align: center;
  color: #19abdb;
  cursor: pointer;
  font-size: 12px;
}
.sendCode{
  text-align: center;
  color: #19abdb;
  cursor: pointer;
  font-size: 12px;
}
</style>
