<script setup>
import { reactive, ref } from 'vue';
import {ElMessage} from 'element-plus'
import { useRouter } from 'vue-router';
import {psdModify} from '@/api/auth.js'
import md5 from 'md5';
// passwordDigitValidator-密码6位
import { passwordDigitValidator } from './utils/validators';
import { isMobile } from '../../utils/common';

  const router = useRouter()

  const psdChangeRef = ref(null)
  const psdChangeMobileRef = ref(null)
  const psdChange=reactive({
    form:{
      passwordOrigin:'',
      password:'',
      passwordConfirm:'',
    },
    rules:{
      passwordOrigin:{required: true, message:'Original password cannot be null', trigger: 'blur'},
      password:[{required: true, message:'New password cannot be null', trigger: 'blur'},
      {
        validator:passwordDigitValidator,trigger:'blur'
      }],
      passwordConfirm:[{required: true, message:'New Password cannot be null', trigger: 'blur'},
      {validator:(rule,value,callback)=>{
        if(psdChange.form.passwordConfirm!==psdChange.form.password){
          callback(new Error('Passwords do not match'))
        }else{
          callback()
        }
      }, trigger: 'blur'}],
    }
  })


// ----------------------------------------------------方法

  const psdMissingPageGo=()=>{
    let {href} = router.resolve("/passwordMissing");
    window.open(href,'_blank');
  }
  const submit=()=>{
    let refTemp = ''
    if(isMobile()){
      refTemp=psdChangeMobileRef.value
    }else{
      refTemp=psdChangeRef.value
    }
    refTemp.validate(valid=>{
      if(valid){
        let params={
          OldPwd:md5(psdChange.form.passwordOrigin),
          NewPwd:md5(psdChange.form.password)
        }
        psdModify(params).then(res=>{
          if(res.code == 200){
            ElMessage({
              message: 'Modify successfully, please log in again',
              type: 'success',
              duration:1000
            })
            setTimeout(()=>{
              localStorage.removeItem('yben_token')
              localStorage.removeItem('user_info')
              router.replace('/login')
            },1000)
          }
        })
      }
    })
  }

</script>

<template>
    <div class="psdChange-container">
      <div class="fixed-header">
        <span @click="$router.replace('/')" style="cursor: pointer;">
          HORIZON INSIGHTS
        </span>
      </div>
      <div class="page-title">
        Update password
      </div>
      <div class="regitser-form-box" id="regitser-form-box">
        <!-- PC端表单 -->
        <el-form :model="psdChange.form" class="regitser-form" :rules="psdChange.rules" ref="psdChangeRef">
          <el-form-item prop="passwordOrigin">
            <el-input v-model.trim="psdChange.form.passwordOrigin" size="large" type="password" placeholder="Please enter the original password">
              <template #suffix>
                <span style=" color:#1856A7;cursor: pointer;white-space: nowrap;" 
                @click="psdMissingPageGo">Forgot your password?</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model.trim="psdChange.form.password" size="large" type="password" placeholder="At least 6 digits"></el-input>
          </el-form-item>
          <el-form-item prop="passwordConfirm" style="margin-bottom: 0;">
            <el-input v-model.trim="psdChange.form.passwordConfirm" size="large" type="password" placeholder="Please enter the new password again"></el-input>
          </el-form-item>
        </el-form>
        <!-- 移动端表单 -->
        <el-form :model="psdChange.form" class="mobile-regitser-form" id="mobile-form-field"
        :rules="psdChange.rules" ref="psdChangeMobileRef" hide-required-asterisk label-position="top">
          <el-form-item prop="passwordOrigin" label="Original Password" size="large">
            <el-input v-model.trim="psdChange.form.passwordOrigin" size="large" type="password" placeholder="Please enter the original password">
              <template #suffix>
                <span style=" color:#1856A7;cursor: pointer;white-space: nowrap;" 
                @click="psdMissingPageGo">Forgot your password?</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" size="large" label="Password">
            <el-input v-model.trim="psdChange.form.password" size="large" type="password" placeholder="At least 6 digits"></el-input>
          </el-form-item>
          <el-form-item prop="passwordConfirm" style="margin-bottom: 0;" size="large" label="Password">
            <el-input v-model.trim="psdChange.form.passwordConfirm" size="large" type="password" placeholder="Please enter the new password again"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="submit" class="psdChange-button" size="large">Submit</el-button>
      </div>
    </div>
</template>
  
<style lang="scss" scoped> 
  .psdChange-container{
    padding-top: 68px;
    .page-title{
      text-align: center;
      font-weight: 600;
      font-size: 20px;
      line-height: 28px;
      color: #1856A7;
      padding: 56px 0 48px;
    }
    .regitser-form-box{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .regitser-form{
        width: 360px;
      }
      .mobile-regitser-form{
        display: none;
      }
      .psdChange-button{
        margin-top: 40px;
        width: 360px;
        background-color: #1856A7;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .psdChange-container{
      padding: 50px 30px 30px;
      .page-title{
        text-align: left;
        padding: 50px 0 30px;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        color: #333333;
      }
      .regitser-form-box{
        .regitser-form{
          display: none;
        }
        .mobile-regitser-form{
          display: block;
          width: 100%;
        }
        .psdChange-button{
          margin-top: 40px;
          width: 100%;
          background-color: #1856A7;
        }
      }
    }
  }
</style>