<!--
 * @Author: zuolingling zuolingling@jsnangao.com
 * @Date: 2023-08-10 17:03:11
 * @LastEditors: zuolingling zuolingling@jsnangao.com
 * @LastEditTime: 2023-08-16 16:21:16
 * @FilePath: \vue3portal\src\pages\layouts\components\elsheader.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class="headerbox">
        <systemTitleA2 :config="titleconfig">南高数字化云平台</systemTitleA2>
        <div class="rowflex headerright">
            <el-icon color="#19e5e6" size="24">
                <i-ep-user />
            </el-icon>
            <el-dropdown @command="handleCommand">
                <div class="el-dropdown-link">
                    {{ currentUser?.fullName }}
                    <el-icon class="el-icon--right" color="#fff">
                        <i-ep-arrow-down />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="pwd" :icon="Lock">
                            修改密码
                        </el-dropdown-item>
                        <el-dropdown-item command="logout" :icon="SwitchButton">
                            退出登录
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <el-dialog v-model="dialogVisible" title="修改密码" width="30%" :before-close="handleClose">
            <el-form label-position="top" ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules"
                label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" disabled />
                </el-form-item>
                <el-form-item label="原始密码" prop="oldPassword" show-password>
                    <el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off" show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password />
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmPassword">
                    <el-input v-model="ruleForm.confirmPassword" type="password" autocomplete="off" show-password />
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%;" type="primary" @click="submitForm(ruleFormRef)"
                        :loading="loading">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { Lock, SwitchButton } from "@element-plus/icons-vue";
import { getFetch, postFetch } from "@/api/doFetch";
const validatePass = (rule, value, callback) => {
    if (value && value !== ruleForm.value.password) {
        callback(new Error("2次密码不一致！"))
    } else {
        callback()
    }
};
const store = useStore();
const currentUser = computed(() => {
    return store.state.currentUser;
});
let state = reactive({
    titleconfig: {
        width: 1920,
        scale: .75
    },
    rules: {
        oldPassword: [{ required: true, trigger: 'submit', }],
        password: [{ required: true, trigger: 'submit', }],
        confirmPassword: [{ validator: validatePass, trigger: 'blur', required: true }]
    },
    ruleForm: {
        username: '',
        oldPassword: '',
        password: '',
        confirmPassword: ''
    }
}),
    dialogVisible = ref(false),
    ruleFormRef = ref({}),
    loading = ref(false),
    { titleconfig, ruleForm, rules } = toRefs(state);
const loginOut = () => {
    getFetch({ url: "/logout", params: {} }).then(res => {
        window.location.href = res?.logoutRedirectUrl;
        localStorage.clear();
    })
};
const handleCommand = (command) => {
    if (command == "pwd") {
        dialogVisible.value = true;
        ruleFormRef?.value?.resetFields && ruleFormRef?.value?.resetFields();
    } else {
        store.commit('CHANGE_USER', {
            currentUser: {}
        });
        loginOut();
    }
};
const handleClose = () => {
    dialogVisible.value = false;
};
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true;
            let newfields = JSON.parse(JSON.stringify(ruleForm.value));
            delete newfields.username;
            postFetch({ url: "/user/updatePassword", params: { ...newfields } }).then(res => {
                if (res?.code == "0000") {
                    ElMessage.success('密码修改成功,请重新登录');
                    store.commit('CHANGE_USER', {
                        currentUser: {}
                    });
                    loginOut();
                }
                loading.value = false;
                dialogVisible.value = false;
            })

        } else {
            return false
        }
    })
};
watch(() => currentUser?.value?.username, (newValue, oldValue) => {
    ruleForm.value.username = newValue;
})


</script>

<style lang="less" scoped>
.headerbox {
    display: flex;
    align-items: center;
    padding: 0 18px;
    height: 100%;
    justify-content: flex-end;

    .headerright {
        height: 100%;
        gap: 15px;
        position: relative;
        right: 0;
        z-index: 9999;
        
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #19e5e6;
        display: flex;
        align-items: center;
    }
}
</style>