<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"
                v-if="info.avatar" />
            <Icon type="md-person"
                v-if="!info.avatar" />
            <span class="i-layout-header-user-name"
                v-if="!isMobile">{{ info.name }}</span>
            <DropdownMenu slot="list">
                <DropdownItem>
                    <label @click="resetPwdOpen">
                        <Icon type="ios-lock" />
                        <span>修改密码</span>
                    </label>
                </DropdownItem>
                <DropdownItem>
                    <label @click="$refs.form.open(info)">
                        <Icon type="ios-contact" />
                        <span>个人信息</span>
                    </label>
                </DropdownItem>
                <!-- <i-link to="/setting/user">
                    <DropdownItem>
                        <Icon type="ios-contact-outline" />
                        <span>{{ $t('basicLayout.user.center') }}</span>
                    </DropdownItem>
                </i-link>
                <i-link to="/setting/account">
                    <DropdownItem>
                        <Icon type="ios-settings-outline" />
                        <span>{{ $t('basicLayout.user.setting') }}</span>
                    </DropdownItem>
                </i-link> -->
                <DropdownItem divided
                    name="logout">
                    <Icon type="ios-log-out" />
                    <span>{{ $t('basicLayout.user.logOut') }}</span>
                </DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <template>
            <Modal v-model="resetPwdOpened">
                <div slot="header">
                    <span class="title">修改密码</span>
                    <span class="description">Change Password</span>
                </div>
                <div class="ivu-ml-8 ivu-mr-8">
                    <Form ref="resetPwdForm"
                        :model="resetPwdData"
                        :rules="resetPwdRule"
                        label-position="top"
                        label-colon="："
                        class="ivu-mt"
                        @submit.native.prevent>
                        <Row :gutter="24"
                            type="flex">
                            <Col v-bind="grid24">
                            <FormItem label="旧密码"
                                key="oldPwd"
                                prop="oldPwd">
                                <Input type="password"
                                    v-model="resetPwdData.oldPwd" />
                            </FormItem>
                            </Col>
                            <Col v-bind="grid24">
                            <FormItem label="新密码"
                                key="newPwd"
                                prop="newPwd">
                                <Input type="password"
                                    v-model="resetPwdData.newPwd" />
                            </FormItem>
                            </Col>
                            <Col v-bind="grid24">
                            <FormItem label="确认新密码"
                                key="checkPwd"
                                prop="checkPwd">
                                <Input type="password"
                                    v-model="resetPwdData.checkPwd" />
                            </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </div>
                <template slot="footer">
                    <Button type="primary"
                        custom-icon="fa fa-check"
                        @click="submitChangePwd">
                        保存
                    </Button>
                </template>
            </Modal>
        </template>
        <modal-form ref="form"
            view-code="UserInfoEdit">
            <template slot="footer">
                <Button type="primary"
                    custom-icon="fa fa-save"
                    @click="submitUserInfo">保存</Button>
            </template>
        </modal-form>
    </span>
</template>
<script>
    import { mapState, mapActions } from 'vuex';
    import userlApi from '../../../api/user';
    import mixinPage from '../../../mixins/page';

    export default {
        components: {},
        mixins: [mixinPage],
        name: 'iHeaderUser',
        data() {
            return {
                resetPwdOpened: false,
                resetPwdData: {},
                resetPwdRule: {
                    oldPwd: {
                        type: 'string',
                        required: true,
                        message: '请输入旧密码',
                        trigger: 'blur,change'
                    },
                    newPwd: {
                        type: 'string',
                        required: true,
                        message: '请输入新密码',
                        trigger: 'blur,change'
                    },
                    checkPwd: {
                        type: 'string',
                        required: true,
                        message: '请重复新密码',
                        trigger: 'blur,change'
                    }
                }
            };
        },
        computed: {
            ...mapState('admin/user', ['info']),
            ...mapState('admin/layout', ['isMobile', 'logoutConfirm'])
        },
        methods: {
            ...mapActions('admin/account', ['logout']),
            ...mapActions('admin/user', ['set']),
            handleClick(name) {
                if (name === 'logout') {
                    this.logout({
                        confirm: this.logoutConfirm,
                        vm: this
                    });
                }
            },
            // 打开密码修改对话框
            resetPwdOpen() {
                this.resetPwdData = {
                    oldPwd: null,
                    newPwd: null,
                    checkPwd: null
                };
                this.$refs.resetPwdForm.resetFields();
                this.resetPwdOpened = true;
            },
            // 修改密码提交保存
            async submitChangePwd() {
                let isOK = await this.$refs.resetPwdForm.validate();

                if (!isOK) {
                    this.error('有内容不符合要求，请正确填写！');
                } else {
                    if (this.resetPwdData.newPwd != this.resetPwdData.checkPwd) {
                        this.error('两次新密码输入不一致！');
                    } else {
                        await userlApi.updatePassword({
                            oldPassword: this.resetPwdData.oldPwd,
                            newPassword: this.resetPwdData.newPwd
                        });

                        this.success('修改成功!', () => {
                            this.resetPwdOpened = false;
                        });
                    }
                }
            },
            // 保存用户信息
            submitUserInfo() {
                this.confirm('确定要保存吗？', async () => {
                    await userlApi.updateUser(this.$refs.form.data);

                    this.success('修改成功!', () => {
                        this.set(this.$refs.form.data);
                        this.$refs.form.opened = false;
                    });
                });
            }
        }
    };
</script>
