<template>
    <span class="i-layout-header-trigger i-layout-header-trigger-min">
        <Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-user" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
            <!-- <Avatar size="small" :src="info.avatar" icon="ios-person" /> -->
            <span class="i-layout-header-user-name" v-if="!isMobile">{{ info.username }}</span>
            <DropdownMenu slot="list">
                <i-link to="/system/user/index">
                    <DropdownItem>
                        <Icon type="ios-contact-outline" />
                        <span>个人中心</span>
                    </DropdownItem>
                </i-link>

                    <DropdownItem name="password">
                        <Icon type="ios-contact-outline" />
                        <span>修改密码</span>
                    </DropdownItem>

                <DropdownItem divided name="logout">
                    <Icon type="ios-log-out" />
                    <span>我要退出</span>
                </DropdownItem>
            </DropdownMenu>
        </Dropdown>

      <Modal
        v-model="editVisible"
        title="修改密码吗?"
        width="30%"
        @on-ok="editPassword"
        @on-cancel="editClose">

        <el-form ref="passForm" :model="passForm" label-width="80px">
          <el-form-item label="旧密码"
                        prop="oldPasswod"
                        :rules="[{ required: true, message: '旧密码不能为空'}]"
          >
            <el-input placeholder="请输入旧密码" autocomplete="off" v-model="passForm.oldPasswod"></el-input>
          </el-form-item>

          <el-form-item label="新密码"
                        prop="newPassword"
                        :rules="[{ required: true, message: '新密码不能为空'}]"
          >
            <el-input type="password" placeholder="请输入修改密码" v-model="passForm.newPassword"></el-input>
          </el-form-item>

          <el-form-item label="确认密码"
                        prop="okPassword"
                        :rules="[{ validator: validatePass,  trigger: 'blur'}]"
          >
            <el-input type="password" placeholder="请输入确认密码"  v-model="passForm.okPassword"></el-input>
          </el-form-item>
        </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="editPassword">确 定</el-button>
        </span>
    </Modal>
    </span>
</template>
<script>
    import { mapState, mapActions } from 'vuex';
    import {AccountPass} from "../../../api/system/account";

    export default {
        name: 'iHeaderUser',
        data () {
            return {
                infor:{
                    avatar:"",
                    username:""
                },
                editVisible : false,
                validatePass : null,
                passForm:{
                    oldPasswod : "",
                    newPassword : "",
                    okPassword  : ""
                }
            }
        },
        computed: {
            ...mapState('system/layout', [
                'isMobile',
                'logoutConfirm'
            ]),
            ...mapState('system/user',[
                'info'
            ]),
        },
        created(){
            var  validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.passForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            this.validatePass = validatePass;
        },
        methods: {
            ...mapActions('system/account', [
                'logout'
            ]),
            /**
             * 关闭弹出框
             */
            editClose:function(){
                this.editVisible = false;
            },
            editPassword:function(){

                this.$refs['passForm'].validate((valid) => {
                    if (valid) {
                        this.$utils.loading(this,"修改密码中..");
                        AccountPass({oldPass : this.passForm.oldPasswod,newPass : this.passForm.okPassword})
                            .then(res=>{
                                this.$utils.loadingClose();
                                if(res.code == 200) {
                                    this.editVisible = false;
                                    this.$message({
                                        message: '恭喜你，密码修改成功,返回重新登录。',
                                        type: 'success',
                                        onClose :()=>{
                                            localStorage.clear();
                                            this.$utils.util.cookies.remove('system_token')
                                            this.$utils.util.cookies.remove('system_expires_time')
                                            this.$utils.util.cookies.remove('system_uuid')
                                            // 删除localStorage
                                            this.$store.dispatch('pub/db/databaseClear', {
                                                user: true
                                            });
                                            this.$store.dispatch('system/user/set', {}, {root: true});
                                            // 跳转路由
                                            router.push({ name: 'system_login'});
                                        }
                                    });
                                } else {
                                    this.$alert(res.msg,"系统提示");
                                }
                            })
                            .catch(err=>{
                                this.$utils.loadingClose();
                            });
                    } else {
                        return false;
                    }
                });
            },
            handleClick (name) {

                if (name === 'logout') {
                    this.logout({
                        confirm: this.logoutConfirm,
                        vm: this
                    });
                }

                if(name == 'password') {
                    this.editVisible = true;
                }
            }
        }
    }
</script>
