<template>
    <div class="hospital-overview-warp">
        <div class="hospital-overview-content-warp">
            <div class="hospital-overview-content">
              <div class="content-left">
                <div :class="['content-left-item',currentTabs === item.value ? 'content-left-item-checked':'']" v-for="(item,index) in leftTabs" :key="index" @click="selectTabs(item.value,item.label,item.componentName)">
                    <span>{{item.label}}</span>
                </div>
              </div>
              <div class="content-right">
                <component 
                    :is="componentName" 
                    >
                </component>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    import introductionOne from './components/hospitalOverview/index';
    import introductionTwo from './components/currentLeader/index';
    import introductionThree from './components/historicalEvolution/index';
    import introductionFour from './components/campusNavigation/index';
    import contentManagementAPI from "@/api/contentManagement";
    export default {
        name: "hospital-overview",
        components: {
            introductionOne,
            introductionTwo,
            introductionThree,
            introductionFour,
        },
        data() {
            return {
                currentTabs:"0",
                leftTabs: [
                    {
                        label:"医院概况",
                        value:"0",
                        componentName: "introductionOne"
                    },
                    {
                        label:"现任领导",
                        value:"1",
                        componentName: "introductionTwo"
                    },
                    {
                        label:"历史沿革",
                        value:"2",
                        componentName: "introductionThree"
                    },
                    {
                        label:"院区导航",
                        value:"3",
                        componentName: "introductionFour"
                    },
                ],
                componentName: "introductionOne",
            }
        },
        methods: {
            selectTabs(value,label,componentName) {
                this.currentTabs = value
                this.componentName = componentName
            }
        },
        mounted(){}
    }
</script>

<style scoped lang="scss">
    .hospital-overview-warp {
        width: 100%;
        height: 100%;
        cursor: default;
        .hospital-overview-content-warp {
            width: 100%;
            height: 100%;
            padding: 20px;
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            .hospital-overview-content {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                .content-left {
                    width: 150px;
                    height: 100%;
                    margin-right: 30px;
                    border-right: 1px solid $color-border-second;
                }
                .content-right {
                    width: calc(100% - 170px);
                    min-height: 500px;
                    margin-right: 30px;
                }                
            }
            .content-left {
                .content-left-item {
                    width: 100%;
                    padding: 10px 20px;
                    box-sizing: border-box;
                    background-color: $background-color-white;
                    font-size: $font-normal-size;
                    text-align: left;
                    &:hover {
                        color: $blue-color-light;
                    }
                }
                .content-left-item:first-child {
                    margin-top: 0; /* 第一个元素左边距留白 */
                }
                
                .content-left-item:last-child {
                    margin-bottom: 0; /* 最后一个元素右边距留白 */
                }

                .content-left-item-checked {
                    color: $blue-color !important;
                    background-color: #e7ebf7;
                    border-right: 4px solid $blue-color;
                }
            }
        }
    }

</style>