<template>
  <div v-loading="loading"  class="box">
    <el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large">
      <div class="title" style="font-size:25px" margin-left="0px">重置密码</div>
      <el-row type="flex" justify="center" align="middle">
        <el-col>
          <el-form-item label="旧密码" prop="oldPassword" align="center">
            <el-input v-model="loginData.oldPassword" placeholder="请输入旧密码" :type="isShowPassword?'text':'password'"/>
            <el-icon style="position: absolute; right: 10px;cursor: pointer;" color="#a5a5a5" size="20" @click="isShowPassword = !isShowPassword">
              <View v-if="!isShowPassword"/>
              <Hide v-if="isShowPassword"/>
            </el-icon>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="新密码" prop="password" align="center">
            <el-input v-model="loginData.password" placeholder="请输入新密码" :type="isShowPassword?'text':'password'"/>
            <el-icon style="position: absolute; right: 10px;cursor: pointer;" color="#a5a5a5" size="20" @click="isShowPassword = !isShowPassword">
              <View v-if="!isShowPassword"/>
              <Hide v-if="isShowPassword"/>
            </el-icon>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="确认新密码" prop="againPassword">
            <el-input v-model="loginData.againPassword" placeholder="请再次新密码"  :type="isShowAgainPassword?'text':'password'"/>
            <el-icon style="position: absolute; right: 10px;cursor: pointer;" color="#a5a5a5" size="20" @click="isShowAgainPassword = !isShowAgainPassword">
              <View v-if="!isShowAgainPassword"/>
              <Hide v-if="isShowAgainPassword"/>
            </el-icon>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
<!--    <div class="tips">温馨提示：<span>密码长度通常需要在6-20个字符之间。</span></div>-->
    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm" style="width: 100%;height: 40px;line-height: 40px;">确 定</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup name="bb">
  import type { RouteLocationNormalizedLoaded } from 'vue-router'
  import router from "@/router";
  import { useIcon } from '@/hooks/web/useIcon'
  import { setTenantId, setToken } from '@/utils/auth'
  import { usePermissionStore } from '@/store/modules/permission'
  import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
  import * as UserApi from '@/api/system/user'
  import { View,Hide } from '@element-plus/icons-vue'
  const { t } = useI18n()
  const message = useMessage()
  const permissionStore = usePermissionStore()
  const formSmsLogin = ref()
  const loginLoading = ref(false)
  const iconHouse = useIcon({ icon: 'ep:house' })
  const iconCellphone = useIcon({ icon: 'ep:cellphone' })
  const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
  const route = useRoute() //路由信息
  const rules = {
    password: [required],
    againPassword: [required]
  }
  const loginData = reactive({
    oldPassword: '',
    password: '',
    againPassword: '',
    mailKey: '',
    userName: route.query.username,
  })
  const isShowPassword = ref(false)
  const isShowAgainPassword = ref(false)
  
  const loading = ref(false);
  const submitForm = async () => {
    try {
      loginData.mailKey = route.query.mailKey;
      if (loginData.password != loginData.againPassword) {
        message.error('两次输入的密码不一致，请重新输入!')
      } else {
        const data = loginData as unknown as UserApi.UserVO
        await UserApi.updatePassword(data)
        // 发送操作成功的事件
        message.success(t('common.updateSuccess'))
        router.go(-1)
      }
    } finally {
      // formLoading.value = false
    }
  }
</script>

<style lang="scss" scoped>
  :deep(.anticon) {
    &:hover {
      color: var(--el-color-primary) !important;
    }
  }

  .smsbtn {
    margin-top: 33px;
  }
  .box{
    border: 1px solid #dedede;
    width: 500px;
    margin: 100px auto 0px;
    padding: 20px;
    box-shadow: 0px 0px 20px rgba($color: #000000, $alpha: 0.1);
  }
  .title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
  }
  ::v-deep(.el-input--large .el-input__inner){
    padding-right: 30px;
  }
  .tips{
    padding-bottom: 20px;
    font-size:14px;
    color:#717171;
    span{
    color:#717171;

    }
  }
</style>
