<template>
  <div class="mb20">
    <el-card :body-style="{'padding':'0'}">
      <div class="indexTitle"><h3 class="leftboderTT">{{ language==0?'修改密码':'Change Password' }}</h3></div>

      <div class="pd20">
        <div class="d-form-border" style="margin-top: 0">
          <el-form class="d-form" ref="pwdRef" :model="user" :rules="rules"
                   label-width="120px" :label-position="language==0?'left':'top'"
                   style="max-width: 500px;margin: auto">
            <el-form-item :label="language==0?'旧密码':'Old Password'" prop="oldPassword">
              <el-input v-model="user.oldPassword" :placeholder="language==0?'请输入旧密码':''" type="password" show-password/>
            </el-form-item>
            <el-form-item :label="language==0?'新密码':'New Password'" prop="newPassword">
              <el-input v-model="user.newPassword" :placeholder="language==0?'请设置8位以上大小写字母、数字、特殊符号':''" type="password"
                        show-password/>
            </el-form-item>
            <el-form-item :label="language==0?'确认密码':'Confirm Password'" prop="confirmPassword">
              <el-input v-model="user.confirmPassword" :placeholder="language==0?'请确认新密码':''" type="password" show-password/>
            </el-form-item>

          </el-form>
        </div>
        <el-row justify="center">
          <el-button type="primary" class="btn-lineG" round @click="submit">{{ language==0?'保存':'Save' }}</el-button>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {updateUserPwd} from '@/api/system/user'
import useUserStore from '@/store/modules/user'
import {reactive, ref, getCurrentInstance} from 'vue'
import {validPassword} from '@/utils/validate'
import {useStorage} from "@vueuse/core/index";
const language = useStorage('language', 0)

const show = ref(false)
const {proxy} = getCurrentInstance()
const userStore = useUserStore()

const user = reactive({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined
})

const equalToPassword = (rule, value, callback) => {
  if (user.newPassword !== value) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const validPwd = (rule, value, callback) => {
  if (import.meta.env.DEV) {
    callback()
  } else {
    if (!validPassword(value)) {
      callback(new Error('请设置8位以上大小写字母、数字、特殊符号组合的密码'))
    } else {
      callback()
    }
  }
}

const rules = ref({
  oldPassword: [{required: true, message: language.value==0?'旧密码不能为空':'required', trigger: 'blur'}],
  newPassword: [
    {required: true, message: language.value==0?'新密码不能为空':'required', trigger: 'blur'},
    {validator: validPwd, trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: language.value==0?'确认密码不能为空':'required', trigger: 'blur'},
    {required: true, validator: equalToPassword, trigger: 'blur'}
  ]
})

/** 提交按钮 */
function submit() {
  proxy.$refs['pwdRef'].validate(valid => {
    if (valid) {
      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
        proxy.$modal.msgSuccess(language.value==0?'修改成功':'password is changed!')

        userStore.logOut().then(() => {
          setTimeout(() => {
            location.reload()
          }, 1000)
        })
      })
    }
  })
}

</script>

<style scoped lang="scss">
.indexTitle {
  margin: 20px 0 12px;
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;

  h3 {
    font-size: 16px;
    color: var(--el-color-primary);
  }
}


</style>