<template>
    <div class="header">
        <div class="header_log">
            <div class="header_log_img"></div>
            <div class="header_log_text">
                <span>铭和官网</span>
            </div>
        </div>
        <div class="header-content">
            <div class="header_breadcrumb">
                <div class="bread-crumb">
                    <div class="text"><i class="el-icon-s-operation"></i></div>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="(item, idx) in items" :key="idx"
                        >{{ item.meta.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </div>
            <div class="head-setting">
                <FullScreen></FullScreen>
                <div>
                    <Avatar width="38px" :path="avatar" :sex="this.sex"/>
                </div>
                <el-dropdown trigger="click" @command="handleCommand">
          <span class="user-text">
            {{ user ? user.name : '' }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>


    </div>
</template>

<script>
    import Avatar from "@/components/avatar/index";
    import FullScreen from "@/components/FullScreen/index";
    import {getStorage} from "@/utils/storageUtil";

    export default {
        name: "sHeader",
        data() {
            return {
                sex: "",
            };
        },
        mounted() {
            // 初始化
            if (
                getStorage("mh_userInfo") &&
                JSON.parse(getStorage("mh_userInfo")).sex === "0"
            ) {
                this.sex = "0";
            } else {
                this.sex = "1";
            }
        },
        components: {
            Avatar,
            FullScreen,
        },
        computed: {
            items() {
                console.log(this.$route.matched)
                return this.$route.matched.filter((item) => item.name);
            },

            avatar() {
                return getStorage("mh_userInfo")
                    ? JSON.parse(getStorage("mh_userInfo")).portrait
                    : "";
            },
            user() {
                return getStorage("mh_userInfo")
                    ? JSON.parse(getStorage("mh_userInfo")) : null;
            }
        },
        methods: {
            handleCommand(command) {
                if(command == "modifyPw") {
                    this.modifyPwDialog = true;

                } else {
                    localStorage.setItem("mh_islogin", 0);
                    localStorage.removeItem("mh_userInfo");

                    setTimeout(() => {
                        this.$router.push({
                            path: "/login",
                        });
                        // location.reload();
                    }, 1000);
                }

            }
        }
    };
</script>

<style lang="scss" scoped>
    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header_log {
            height: 50px;
            width: 195px;
            display: flex;
            align-items: center;
            background-color: #000;
        }
        .header_log_img {
            background-image: url("../../../../assets/images/header/logo.png");
            height: 40px;
            width: 40px;
            background-size: 100% 100%;
            border-radius: 50%;
            margin-right: 10px;
            margin-left: 22px;
        }
        .header_log_text {
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 28px;
            color: #ffffff;
        }
        .header-content {
            width: calc(100% - 195px);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .header_breadcrumb {
                margin-left: 14px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .bread-crumb {
                    display: flex;
                    align-items: center;
                    margin-bottom: 4px;

                    .text {
                        color: #666;
                        font-size: 20px;
                        line-height: 20px;
                        margin-left: 20px;
                        margin-right: 10px;
                    }

                    .el-breadcrumb {
                        font-size: 14px;
                        line-height: 20px;
                    }

                    ::v-deep .el-breadcrumb__separator {
                        font-size: 14px;
                        margin: 0 8px 0 5px;
                    }
                }

                .carousel-list {
                    display: flex;

                    .position {
                        font-size: 12px;
                        color: #666666;
                        font-weight: bold;
                    }

                    .notice {
                        width: 20rem;
                        height: 20px;
                        overflow: hidden;
                        margin: auto;
                        position: relative;
                        padding-left: 0.2rem;
                        font-size: 12px;
                        font-weight: bold;
                        color: #666;
                    }
                }
            }

            .head-setting {
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding-right: 1rem;
                cursor: pointer;
                .my-message {
                    margin-right: 20px;
                    display: flex;
                    align-items: center;
                    .my-message-icon {
                        font-size: 26px;
                        color: #9cb2cd;
                    }
                    .my-message-text {
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 25px;
                        color: #606266;
                        margin-left: 8px;
                    }
                }

                .user-text {
                    padding-left: 0.5rem;
                }
            }
        }

        .intensity {
            .psd-text {
                font-size: 14px;
                margin-right: 10px;
            }
            .line {
                display: inline-block;
                width: 48px;
                height: 4px;
                background: #d8d8d8;
                border-radius: 3px;
                margin-right: 8px;
            }
            .low {
                color: #f4664a;
                background: #f4664a;
            }
            .middle {
                color: #ffb700;
                background: #ffb700;
            }
            .high {
                color: #2cbb79;
                background: #2cbb79;
            }
            .level {
                margin: 0 16px 0 8px;
            }
            .warning-text {
                color: #5a5a5a;
                font-size: 12px;
            }
        }
    }

    ::v-deep .el-notification:hover {
        cursor: pointer;
    }
</style>
