<template>
    <el-dropdown class="head-icon" :size="state.size.size" :teleported="false">
        <el-button :size="state.size.size" icon="Avatar" circle></el-button>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-if="center" @click="router.push(center)">
                    {{ t('head.center') }}
                </el-dropdown-item>
                <el-dropdown-item @click="updatePass">{{ t('pwd.changePwd') }}</el-dropdown-item>
                <el-dropdown-item @click="dispatch('logout'); emit('logout')">{{ t('head.logout')
                    }}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>

    <el-dialog :title="t('pwd.changePwd')" v-model="flag.update" :size="state.size.size" :close-on-click-modal="false"
        top="10vh" width="40%">
        <ModifyForm :width="150" :param="password" @cancel="flag.update = false"
            @confirm="emit('updatePwd', password); flag.update = false" :rules="rules" :items="items">
        </ModifyForm>
    </el-dialog>

</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { Element, ModifyForm } from "noob-mengyxu";
import { useRouter } from "vue-router";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

const { state, commit, dispatch } = useStore();
const { SimpleRequired, SimplePassword } = Element;
const router = useRouter();
const flag = reactive({
    update: false
})
const password = ref({
    new: '',
    reNew: '',
    old: ''
})
const emit = defineEmits(["updatePwd", "logout"]);

const props = defineProps({
    center: {
        type: String,
        default: null,
    },
})

const rules = {
    old: [new SimpleRequired('pwd.oldPwd')],
    new: [new SimpleRequired('pwd.newPwd'), new SimplePassword()],
    reNew: [{
        required: true,
        trigger: 'blur',
        validator: (rule: any, value: any, callback: any) => {
            if (value == null || value === '') {
                callback(new Error(t('pwd.plsRePwd')));
            } else if (value != password.value.new) {
                callback(new Error(t('pwd.rePwdError')));
            }
            callback();
        }
    }]
}

const items = [
    { i18n: 'pwd.oldPwd', code: 'old', type: "password" },
    { i18n: 'pwd.newPwd', code: 'new', type: "password" },
    { i18n: 'pwd.rePwd', code: 'reNew', type: "password" },
]

const updatePass = () => {
    password.value = {
        new: '',
        reNew: '',
        old: ''
    };
    flag.update = true;
}

onMounted(() => { });
</script>
<style lang="scss" scoped></style>