<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 @click.native="handleSetAccountDialogShow">
                个人设置
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="handleSignout">
                退出登录
            </el-dropdown-item>
        </el-dropdown-menu>

        <el-dialog
            title="个人设置"
            v-if="setAccount.visible"
            :visible.sync="setAccount.visible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            width="60%"
            append-to-body
            center
        >
            <el-tabs v-model="setAccount.activeTab" stretch>
                <el-tab-pane label="基础信息" name="baseinfo">
                    <account-edit-info
                        @cancel="handleSetAccountDialogClose"
                    ></account-edit-info>
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="password">
                    <account-modify-password
                        @cancel="handleSetAccountDialogClose"
                    ></account-modify-password>
                </el-tab-pane>
                <el-tab-pane label="修改手机号码" name="mobile">
                    <account-modify-mobile
                        @cancel="handleSetAccountDialogClose"
                    ></account-modify-mobile>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </el-dropdown>
</template>

<script>
import { mapState } from "vuex";
import { AxiosRequestData } from "../../../data/axios_request";
import cache from "@/utils/cache";
import headImg from "../../../assets/img/headImg.png";
import { networkUrl } from "../../../data/global_configuration";

import AccountEditInfo from "./account-edit-info";
import AccountModifyMobile from "./account-modify-mobile";
import AccountModifyPassword from "./account-modify-password";

import USER_MANAGEMENT from "@/api/user-management";

export default {
    components: {
        "account-edit-info": AccountEditInfo,
        "account-modify-mobile": AccountModifyMobile,
        "account-modify-password": AccountModifyPassword,
    },
    data() {
        return {
            headImg: "",
            account: "",
            token: "",
            avatar: "", // 头像地址
            setAccount: {
                visible: false,
                activeTab: "baseinfo",
            },
        };
    },
    created() {
        let user = JSON.parse(cache.getSession("user"));
        this.account = user.account;
        this.token = cache.getToken();
        this.headImg = networkUrl();

        this.getUserHeadImg();
    },
    computed: {
        ...mapState("login", {
            user: (state) => state.user,
        }),
    },
    methods: {
        // 获取头像信息
        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;
                            }
                        }
                    }
                }
            }
        },
        handleSetAccountDialogShow() {
            this.setAccount.activeTab = "baseinfo";
            this.setAccount.visible = true;
        },
        handleSetAccountDialogClose() {
            this.setAccount.visible = false;
        },
        // 退出登录
        handleSignout() {
            cache.removeSession("user");
            cache.removeSession("company");
            cache.removeToken();
            // this.$store.dispatch("login/logout");

            // 为何刷新页面：
            // 1.解决退出登陆后客服访客信息不更新问题;
            // 2.主页使用客服后，不关闭客服会话窗口，导致访客信息设置无效；
            // 3.退出登陆成功后会自动加载登陆页面
            location.reload();
        },
    },
};
</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>
