<template>
  <div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
    <!-- <el-tabs v-model="activeName" class="demo-tabs"> -->
      <!-- <el-tab-pane label="修改密码" name="修改密码"> -->
        <el-form ref="formRef" :model="form" label-width="120px" class="profile-form" autocomplete="off">
          <el-form-item
            label="手机号"
            prop="phone"
            class="mt-15px!"
            :rules="[
              { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
              {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的手机号',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input v-model="form.phone" type="text" placeholder="请输入手机号" class="h-37px" />
          </el-form-item>
          <el-form-item label="验证码" prop="code" class="mt-15px!" :rules="{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }">
            <div class="flex items-center gap-10px">
              <el-input v-model="form.code" type="text" placeholder="请输入验证码" class="h-37px" />
              <el-button
                type="primary"
                class="w-110px rd-4px bg-[#1A65FF] px-6px text-center color-#fff line-height-37px h-37px!"
                :disabled="counting > 0"
                @click="handleCode"
              >
                {{ counting > 0 ? `${counting}s后重新获取` : '获取验证码' }}</el-button
              >
            </div>
          </el-form-item>
          <el-form-item label="新密码" prop="password" class="mt-20px!" :rules="{ required: true, message: '请输入新密码', trigger: ['blur', 'change'] }">
            <el-input v-model="form.password" autocomplete="new-password" type="password" placeholder="请输入新密码" class="h-37px" />
          </el-form-item>
          <el-form-item
            label="确认密码"
            prop="passwordV2"
            class="mt-20px!"
            :rules="{ required: true, message: '请再次输入新密码', trigger: ['blur', 'change'] }"
          >
            <el-input v-model="form.passwordV2" autocomplete="new-password" type="passwordV2" placeholder="请再次输入新密码" class="h-37px" />
          </el-form-item>
          <el-form-item class="mt-20px!">
            <el-button type="primary" class="h-37px w-121px line-height-37px" @click="handleSave">保存</el-button>
          </el-form-item>
        </el-form>
      <!-- </el-tab-pane> -->
      <!-- <el-tab-pane label="登录设备管理" name="登录设备管理"> </el-tab-pane> -->
    <!-- </el-tabs> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { resetPassword } from '~/api/login/index'
  import { sendSms } from '~/api/common/index'
  import useUserStore from '~/stores/user'
  const userStore = useUserStore()

  const activeName = ref('修改密码')

  /** 请求入参 */
  const form = reactive({
    phone: '',
    password: '',
    passwordV2: '',
    code: '',
  })

  /** 提交 */
  const formRef = ref()
  const handleSave = async () => {
    await formRef.value.validate()
    if (form.password !== form.passwordV2) return ElMessage.error('两次密码不一致')
    try {
      const res = await resetPassword(form)
      const { code } = res
      if (code === 0) {
        ElMessage.success(`修改密码成功，请重新登录`)
        setTimeout(() => {
          userStore.logout()
          userStore.$reset()
        }, 500)
      }
    } catch (error) {
      console.log(error)
    }
  }

  /** 获取验证码 */
  const counting = ref(0)
  const handleCode = async () => {
    await formRef.value.validateField('phone')
    try {
      const res = await sendSms({ mobile: form.phone, scene: 3 })
      const { code } = res
      if (code === 0) {
        ElMessage.success('验证码已发送')
        counting.value = 60
        const timer = setInterval(() => {
          counting.value--
          if (counting.value === 0) {
            clearInterval(timer)
          }
        }, 1000)
      }
    } catch (error) {
      counting.value = 0
      console.log(error)
    }
  }
</script>
