<template>
  <el-dialog
    v-model="show"
    :show-close="false"
    title="绑定手机号"
    width="30%"
    align-center
    :close-on-press-escape="false"
  >
    <el-form ref="pwdRef" :model="user" :rules="rules" label-width="40px" style="padding-right: 40px">
      <el-form-item label="" prop="phone">
        <el-input
          v-model.trim="user.phone" prefix-icon="user" style="height: 38px;" placeholder="请输入手机号" @keyup.enter="handelSubmit"
        />
      </el-form-item>
      <el-form-item prop="captcha">
        <captcha ref="codeRef" v-model.trim="user.captcha" v-model:uuid="user.uuid" />
      </el-form-item>
      <el-form-item label="" prop="code">
        <captchaSms
          ref="codeRef" v-model="user.code" v-model:uuid="user.uuid" style="height: 38px;" :verify="checkCaptchaSms"
          @keyup.enter="handelSubmit" @error="getCode"
        />
      </el-form-item>

      <br>
      <el-row justify="center">
        <el-button type="primary" @click="submit">确定</el-button>
        <!--        <el-button @click="show=!show">取消</el-button>-->
      </el-row>

    </el-form>
  </el-dialog>
</template>

<script setup>
import { editPhone } from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import { ref, getCurrentInstance } from 'vue'
import captchaSms from '@/views/login/components/captchaSms.vue'
import { ElMessage } from 'element-plus'
import Captcha from '/@/views/login/components/captcha.vue'
const show = ref(false)
const { proxy } = getCurrentInstance()

const user = ref({
  phone: '',
  captcha: '',
  code: '',
  uuid: ''
})

const rules = ref({
  phone: [
    { required: true, message: '手机号码不能为空', trigger: 'blur' },
    { required: true, message: '手机号码不能为空', trigger: 'blur' }],
  captcha: [{ required: true, message: '图形验证码不能为空', trigger: 'blur' }],
  code: [{ required: true, message: '手机验证码不能为空', trigger: 'blur' }]
})

/** 提交按钮 */
async function submit() {
  await proxy.$refs['pwdRef'].validate()
  await editPhone(user.value)
  await proxy.$modal.msgSuccess('修改成功')
  setTimeout(() => {
    window.location.reload()
  }, 1000)
}

function open() {
  show.value = true
}

function handelSubmit() {
  
}

function checkCaptchaSms() {
  // 判断手机号正确
  if (!user.value.phone) {
    ElMessage({
      showClose: true,
      message: '请输入手机号',
      type: 'error'
    })
    return Promise.reject()
  }
  // 判断验证码填了没
  if (!user.value.captcha) {
    ElMessage({
      showClose: true,
      message: '请输入图形验证码',
      type: 'error'
    })
    return Promise.reject()
  }

  const strTemp = /^1[2|3|4|5|6|7|8|9][0-9]{9}$/
  if (!strTemp.test(user.value.phone)) {
    ElMessage({
      showClose: true,
      message: '请输入正确的手机号',
      type: 'error'
    })
    return Promise.reject()
  }

  return Promise.resolve({
    uuid: user.value.uuid,
    telNo: user.value.phone,
    captcha: user.value.captcha
  })
}

function getCode() {
  proxy.$refs['codeRef'].getCode()
}
defineExpose({
  open
})
</script>