<template>
  <el-row type="flex" justify="center">
    <el-col :span="8">
      <el-input v-model="userEmail" :disabled="true">
        <template v-slot:prepend>当前邮箱</template>
      </el-input>
    </el-col>
  </el-row>
  <el-row type="flex" justify="center" class="mt-1">
    <el-col :span="8">
      <el-input v-model="newEmail" :disabled="second>0">
        <template v-slot:prepend>新邮箱</template>
      </el-input>
    </el-col>
  </el-row>
  <el-row type="flex" justify="center" class="mt-1">
    <el-col :span="6">
      <el-input v-model="code">
        <template v-slot:prepend>验证码</template>
      </el-input>
    </el-col>
    <el-col :span="2">
      <el-button type="primary" :disabled="!allowSendCode" @click="sendCode">{{ sendCodeTip }}</el-button>
    </el-col>
  </el-row>
  <el-row type="flex" justify="center" class="mt-1">
    <el-col :span="2">
      <el-button type="primary" class="btn-block" :disabled="!checkCode">更换邮箱</el-button>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="2">
      <el-button type="info" class="btn-block">返回</el-button>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import {computed, defineComponent, ref} from "vue";

import {changeEmail as _changeEmail, sendCode as _sendCode} from "../request";
import {useStore} from "vuex";
import {Message} from 'element3/src/components/Message'

export default defineComponent<{ userEmail: { require: boolean, type: StringConstructor }, second: { require: boolean, type: NumberConstructor } }>({
  name: 'Email',
  setup(props) {
    const newEmail = ref<string>('')
    const code = ref<string>('')

    const second = ref<number>(0)

    const store=useStore()

    const sendCode = () => {
      second.value=10
      _sendCode(store.state.user.email).then(res=>res.json()).then(res=>{
        if(res.result==='OK'){
          console.info('发送验证码成功')
          new Message({
            showClose: true,
            message: '发送验证码成功',
            type: 'success'
          })

          const t=setInterval(function (){
            if(second.value===0){
              clearInterval(t)
            }else {
              second.value--
            }
          },1000)
        }else{
          second.value=0
          new Message({
            showClose: true,
            message: '发送验证码失败',
            type: 'error'
          })
        }
      })
    }

    const changeEmail=()=> _changeEmail(store.state.user.email,newEmail.value,code.value)

    const allowSendCode = computed<boolean>(() => second.value === 0 && props.userEmail !== newEmail.value && /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(newEmail.value))

    const sendCodeTip = computed<string>(() => second.value > 0 ? second.value + '秒后重发' : '发送验证码')

    const checkCode = computed<boolean>(() => /^\d{6}$/.test(code.value))

    const userEmail= computed(() => store.state.user.email)

    return {
      newEmail,
      code,
      allowSendCode,
      sendCodeTip,
      checkCode,
      second,
      sendCode,
      userEmail,
      changeEmail
    }
  }
})
</script>

<style scoped>

</style>