<template>
    <div class="main-container">
        <div class="header-container">
            <div class="header-container-top">
                <div class="header-container-top-left">
                    <div class="header-container-top-icon">
                        <el-image
                            class="top-icon-image"
                            alt="沭阳铭和医院"
                            src="https://symhyy.com/minghe/home/logo.png"
                        ></el-image>                    
                    </div>
                    <div class="header-container-top-title">
                        <span class="header-container-top-title-cn">沭阳铭和医院</span>
                        <span class="header-container-top-title-us">Shuyang Minghe Hospital</span>
                    </div>
                </div>
                <div class="header-container-top-right">
                    <div class="search-box">
                        <el-input
                            v-model="searchKeyword"
                            placeholder="请输入关键字"
                            class="search-input"
                            clearable>
                            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="header-container-nav-warp">
                <div class="header-container-nav">
                    <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#1d78dd"
                    text-color="#fff"
                    active-text-color="#333333">
                        <el-menu-item index="home">首页</el-menu-item>
                        <el-menu-item index="hospitalOverview">医院概况</el-menu-item>
                        <el-submenu index="3">
                            <template slot="title">医疗护理</template>
                            <el-menu-item index="departmentIntroduction">科室介绍</el-menu-item>
                            <el-menu-item index="experts">专家介绍</el-menu-item>
                            <el-menu-item index="medicalInsuranceWindow">医保之窗</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">医务动态</template>
                            <el-menu-item index="hospitalNews">医院动态</el-menu-item>
                            <el-menu-item index="noticeAnnouncement">通知公告</el-menu-item>
                            <el-menu-item index="healthGarden">健康园地</el-menu-item>
                            <el-menu-item index="famousDoctor">名医有约</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="talentRecruitment">人才招聘</el-menu-item>
                    </el-menu>
                </div>
            </div>
        </div>
        <div class="content-container-warp">
            <div class="content-container">
                <router-view/>
            </div>
          <el-backtop target=".content-container-warp" :bottom="100"></el-backtop>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                activeIndex2: '',
                searchKeyword: '',
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push({
                    name: key,
                });
            },
            handleSearch() {
                if(this.searchKeyword) {
                    // 使用 replace 而不是 push 来避免导航历史堆积
                    this.$router.replace({
                        name: "searchContent",
                        query: {contentTitle : this.searchKeyword}
                    }).catch(err => {
                        // 忽略所有导航错误
                        console.log('Navigation error handled:', err.message);
                    });
                }else {
                    this.$message.error("搜索内容不能为空！");
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .main-container {
        width: 100%;
        // height: 100%;
        text-align: center;
        .header-container {
            width: 100%;
            height: 144px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .header-container-top {
                width: 1168px;
                height: 104px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .header-container-top-left {
                    display: flex;
                    align-items: center;
                    
                    .header-container-top-icon {
                        width: 85px;
                        height: 85px;
                        border-radius: 50%;
                        background-color: aquamarine;
                        margin: 0 10px 0 20px;
                        .top-icon-image {
                            width: 85px;
                            height: 85px;
                            border-radius: 50%;                        
                        }
                    }
                    .header-container-top-title {
                        display: flex;
                        flex-direction: column;
                        .header-container-top-title-cn {
                            font-family: LiSu;
                            font-weight: 400;
                            font-size: 29px;
                            color: #333333;
                            line-height: 44px;
                        }
                        .header-container-top-title-us {
                            font-family: PingFang SC;
                            font-weight: 400;
                            font-size: 14px;
                            color: #999999;
                            line-height: 20px;
                        }

                    }
                }

                .header-container-top-right {
                    margin-right: 20px;
                    
                    .search-box {
                        .search-input {
                            width: 300px;
                            
                            ::v-deep .el-input__inner {
                                height: 36px;
                                line-height: 36px;
                                border-radius: 4px;
                                border: 1px solid #dcdfe6;
                                
                                &:focus {
                                    border-color: $theme-color-blue;
                                }
                            }
                            
                            ::v-deep .el-input-group__append {
                                background-color: $theme-color-blue;
                                border-color: $theme-color-blue;
                                padding: 0 15px;
                                
                                .el-icon-search {
                                    font-size: 18px;
                                    color: #fff;
                                }
                                
                                &:hover {
                                    background-color: darken($theme-color-blue, 10%);
                                }
                            }
                        }
                    }
                }
            }
            .header-container-nav-warp {
                width: 100%;
                height: 46px;
                background-color: $theme-color-blue;
                display: flex;
                justify-content: center;
                .header-container-nav {
                    width: 1168px;
                    height: 46px;
                    background-color: aquamarine;
                    .el-menu-item {
                        width: 225px;
                    }
                    .el-submenu {
                        width: 225px;
                    }  
                    .el-menu--horizontal {
                        height: 46px;
                        line-height: 46px;                        
                    }
                    .el-menu--horizontal > .el-menu-item {
                        height: 46px;
                        line-height: 46px;
                    }
                    ::v-deep  .el-menu--horizontal > .el-submenu .el-submenu__title {
                        height: 46px;
                        line-height: 46px;                        
                    }
                }
            }
        }

        .content-container-warp {
            width: 100%;
            height: calc(100% - 120px);
            overflow: auto;
            display: flex;
            justify-content: center;
            .content-container {
                width: 100%;
            }
        }

    }
    .el-menu--horizontal .el-menu-item{
        width: 225px !important;
        text-align: center;
    }    
    .el-menu-item.is-active {
        color: $white-color !important;
        border-bottom-color: $white-color !important;
    }
    ::v-deep .el-submenu.is-active .el-submenu__title {
        color: $white-color !important;
        border-bottom-color: $white-color !important;
    }
</style>