<template>
    <el-container class="full-page">
        <el-header height="50px">
            <h5 class="title">{{ $t('resetPSD.title') }}</h5>
        </el-header>
        <el-main>
            <el-form
                :model="pwdForm"
                :rules="pwdRules"
                ref="pwdForm"
                label-width="200px"
                status-icon
                class="pwdForm"
                label-position="top"
            >
                <el-form-item :label="$t('resetPSD.oldPsd') + ':'" prop="old">
                    <el-input
                        type="password"
                        show-password
                        :placeholder="$t('common.input')"
                        v-model="pwdForm.old"
                    ></el-input>
                </el-form-item>
                <el-form-item :label="$t('resetPSD.newPsd') + ':'" prop="new">
                    <el-input
                        type="password"
                        show-password
                        :placeholder="$t('common.input')"
                        v-model="pwdForm.new"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    :label="$t('resetPSD.repeat') + ':'"
                    prop="newRepeat"
                    label-width="120"
                >
                    <el-input
                        type="password"
                        show-password
                        :placeholder="$t('common.input')"
                        v-model="pwdForm.newRepeat"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="submitForm()"
                        :disabled="confirm"
                        >{{ $t('common.save') }}</el-button
                    >
                    <el-button @click="back()">{{
                        $t('common.cancel')
                    }}</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
import uc from '@/api/uc.js'

export default {
    name: 'reset-pwd-view',
    data() {
        var validateNew = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('common.input')))
            }
            let config = this.pwdStrategy
            if (config.enable) {
                let pwdRule = config.pwdRule
                let pwdLength = config.pwdLength
                if (pwdRule) {
                    if (value.length < pwdLength) {
                        callback(new Error('新密码长度至少为' + pwdLength))
                    }
                    if (pwdRule == 1) {
                        callback()
                    } else if (pwdRule == 2) {
                        var re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])')
                        if (!re.test(value)) {
                            callback(new Error('新密码必须包含数字、字母'))
                        } else {
                            callback()
                        }
                    } else if (pwdRule == 3) {
                        var re = new RegExp(
                            '(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])'
                        )
                        if (!re.test(value)) {
                            callback(
                                new Error('新密码必须包含数字、字母、特殊字符')
                            )
                        } else {
                            callback()
                        }
                    } else if (pwdRule == 4) {
                        var re = new RegExp(
                            '(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9])'
                        )
                        if (!re.test(value)) {
                            callback(
                                new Error(
                                    '新密码必须包含数字、大小写字母、特殊字符'
                                )
                            )
                        } else {
                            callback()
                        }
                    } else {
                        callback()
                    }
                }
            } else {
                if (value.length < 6) {
                    callback(new Error(this.$t('resetPSD.length')))
                } else {
                    callback()
                }
            }
        }
        var validateold = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('common.input')))
            } else {
                callback()
            }
        }
        var validateNewReapeat = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('common.input')))
            } else if (value !== this.pwdForm.new) {
                callback(new Error(this.$t('resetPSD.notSame')))
            } else {
                callback()
            }
        }
        return {
            pwdForm: {
                old: '',
                new: '',
                newRepeat: '',
            },
            pwdRules: {
                old: [{validator: validateold, trigger: 'blur'}],
                new: [{validator: validateNew, trigger: 'blur'}],
                newRepeat: [{validator: validateNewReapeat, trigger: 'blur'}],
            },
            pwdStrategy: {},
            account: '',
            confirm: false,
            type: 'settings', // settings 用户主动设置   login 首次登录强制设置
        }
    },
    mounted() {
        console.log(this.$route.params, this.$route.query)
        let account = JSON.parse(sessionStorage.getItem('currentUser')).account
        console.log(account)
        if (account) {
            this.account = account
        }
        uc.getDefaultPwdStrategy().then((data) => {
            if (data) {
                let form = data
                if (form.enable == 1) {
                    form.enable = true
                } else {
                    form.enable = false
                }
                this.pwdStrategy = form
            }
        })
    },
    methods: {
        submitForm() {
            this.$refs['pwdForm'].validate((valid) => {
                if (valid) {
                    if (this.account == '') {
                        this.$message.warning(this.$t('resetPSD.relogin'))
                        return
                    }
                    this.confirm = true
                    this.$http
                        .post('${uc}/api/user/v1/user/modifiUserPsd', {
                            account: this.account,
                            oldPwd: this.pwdForm.old,
                            newPwd: this.pwdForm.new,
                        })
                        .then((resp) => {
                            let data = resp.data
                            if (data && data.state) {
                                this.$message.success(
                                    this.$t('resetPSD.success')
                                )
                                this.confirm = false
                                this.$router.push({
                                    path: this.$route.query.redirect
                                        ? this.$route.query.redirect
                                        : '/login',
                                })
                            } else {
                                this.confirm = false
                            }
                        })
                } else {
                    this.$message.warning(this.$t('resetPSD.check'))
                }
            })
        },
        back() {
            if (this.$route.query.type == 'settings') {
                this.$router.go(-1)
                delete this.$route.query.type
            } else {
                this.$store.dispatch('login/logoutAndCleanUp').then(() => {
                    this.$router.push({
                        path: '/login',
                    })
                })
            }
        },
        warning() {
            this.$notify({
                title: '警告',
                message: '该密码不符合密码策略，请重置密码',
                type: 'warning',
            })
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.full-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.pwdForm{
  width: 600px;
  margin: auto;
}
.el-main .el-form {
  padding: 20px;
}
.el-container{
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-header {
    display: flex;
    align-items: center;
    border-bottom :1px solid #E7EAEC;
    // background: #314351;
    
}
.title{
    font-size:16px;
    color: $--color-text-primary;
}
</style>
