<template>
    <el-dropdown class="userSelect" placement="bottom" trigger="click">
        <div class="userSelect-container">
            <img :src ="headImg">
            <span>{{user.userName}}</span>
        </div>
        <el-dropdown-menu slot="dropdown">
<!--            <el-dropdown-item :disabled="true">{{version}}</el-dropdown-item>-->
            <el-dropdown-item divided @click.native="infoVisible = true">{{$t('header.userInfo')}}</el-dropdown-item>
            <el-dropdown-item @click.native="passwordVisible = true">{{$t('header.password')}}</el-dropdown-item>
            <el-dropdown-item @click.native="handleLogout">{{$t('header.logout')}}</el-dropdown-item>
        </el-dropdown-menu>
        <!-- dialog -->
        <info-dialog :title="$t('header.userInfo')" v-if="infoVisible" :visible.sync="infoVisible" @onSubmit="handleChangeUserInfo" disabled :json="user" />
        <password-dialog :title="$t('header.password')" v-if="passwordVisible" :visible.sync="passwordVisible" @onSubmit="handleChangeUserPassword" />
    </el-dropdown>
</template>
<script>

import { mapState } from 'vuex'
import infoDialog from './infoDialog'
import passwordDialog from './passwordDialog'
import {AxiosRequestData} from "../../../data/axios_request";
import cache from '@/utils/cache'
import headImg from '../../../assets/img/headImg.png';
import {networkUrl} from '../../../data/global_configuration'

export default {
    components: { infoDialog, passwordDialog },
    data() {
        return {
            infoVisible: false,
            passwordVisible: false,
            headImg: '',
            account: '',
            token: '',
        }
    },
    created() {
        let user = JSON.parse(cache.getLocal('user'));
        this.account = user.account;
        this.token = cache.getToken();
        this.headImg = networkUrl()
        this.getUserHeadImg();
    },
    computed: {
        ...mapState('login', {
            user: state => state.user
        }),
        version() {
            return 'v' + require('../../../../package.json').version
        }
    },
    methods: {
        handleLogout(val) {
            cache.removeLocal('user')
            cache.removeLocal('company')
            cache.removeToken()
            this.$store.dispatch('login/logout')
        },
        //修改用户昵称
        handleChangeUserInfo(form) {
            const user = { ...this.user, ...form }
            //企业人员
            if(user.usertype == 1) {

            }
            //服务商人员
            if(user.usertype == 2) {

            }
            // this.setUserName(user)
        },
        handleChangeUserPassword(form) {
            // 假修改
            this.passwordVisible = false
            this.$message.success('success')
        },
        //获取头像信息
        async getUserHeadImg() {
            if (this.account) {
                const url = '/auth/comm/user/personalInfo/find';
                let response = await AxiosRequestData(
                    url,
                    this.token,
                    {
                        mobile: this.account,
                    },
                    false,
                    2,
                );
                if (response) {
                    if (response.code == 0) {
                        if(response.data == null) {
                            this.headImg = headImg
                        } else {
                            if(response.data.avatar == '' || response.data.avatar == null) {
                                this.headImg = headImg
                            } else {
                                this.headImg = this.headImg + response.data.avatar;
                            }
                        }
                    }
                }
            }
        },
        //获取头像信息
        async setUserName(user) {
            if (this.account) {
                const url = '/auth/comm/user/personalInfo/save';
                let response = await AxiosRequestData(
                    url,
                    this.token,
                    {
                        mobile: this.account,
                        nickName: user.userName,
                        reqChannel: 4,
                    },
                    false,
                    1,
                );
                if (response) {
                    if (response.code == 0) {
                        this.$store.commit('login/SET_USER', user)
                        this.infoVisible = false
                        this.$message.success('用户名称修改成功！')
                    } else {
                        this.$message.error('用户名称修改失败！')
                    }
                }
            }
        },
    }
}
</script>
<style lang='stylus' scoped>
$avatarSize = 30px;
.userSelect {
    font-size: 14px !important;
    user-select: none;
    a {
        color: inherit;
    }
    .userSelect-container {
        flex-center();
        height: 100%;
        img {
            display: inline-block;
            width: $avatarSize;
            height: $avatarSize;
            margin-right: 5px;
            vertical-align: middle;
            border-radius: 100%;
        }
    }
}
</style>
