<template>
    <div class="hospital-overview-warp">
        <div class="hospital-overview-header">
            <el-image
                v-if="imgSrc"
                class="header-image"
                fit="fill"
                :src="imgSrc"
            ></el-image>
            <el-image
                v-else
                class="header-image"
                fit="fill"
                :src="require('@/assets/images/home/otherHeader.png')"
            ></el-image>     
        </div>
        <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" 
                    :title="currentTabsLabel" 
                    :dutyContent="currentDutyContent" 
                    :personnelDisplayContent="personnelDisplayContent"
                    :navigationPhotoContent="navigationPhotoContent">
                </component>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    import hospitalOverview from '@/components/overview/index';
    import currentLeader from "@/components/leaderDisplay/index";
    import historicalEvolution from "@/components/overview/index";
    import campusNavigation from "@/components/navigationPhoto/index";
    import advertisementAPI from "@/api/advertisement";
    import {getUploadFilePath} from '@/config/index';
    import hospitalOverviewAPI from "@/api/hospitalOverview";
    import hospitalAPI from "@/api/hospital";
    import { uuid } from '@/utils/index';
    export default {
        name: "hospital-overview",
        components: {
            hospitalOverview,
            currentLeader,
            historicalEvolution,
            campusNavigation,
        },
        data() {
            return {
                imgSrc: '',
                currentTabs:"0",
                currentTabsLabel:"医院概况",
                currentDutyContent:"",
                leftTabs: [
                    {
                        label:"医院概况",
                        value:"0",
                        componentName: "hospitalOverview"
                    },
                    {
                        label:"现任领导",
                        value:"1",
                        componentName: "currentLeader"
                    },
                    {
                        label:"历史沿革",
                        value:"2",
                        componentName: "historicalEvolution"
                    },
                    {
                        label:"院区导航",
                        value:"3",
                        componentName: "campusNavigation"
                    },
                ],
                componentName: "hospitalOverview",
                hospitalOverviewContent:"",
                personnelDisplayContent: [
                    // {
                    //     photo:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
                    //     title:"沭阳铭和医院院长 李卫华",
                    // },    
                ],
                historicalEvolutionContent: "",
                navigationPhotoContent: [
                    // {
                    //     photo:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
                    //     title:"一楼",
                    // },  
                ],
                originFlag: false
            }
        },
        methods: {
            selectTabs(value,label,componentName) {
                this.currentTabs = value
                this.componentName = componentName
                this.currentTabsLabel = label
                if(value === '0') {
                    this.currentDutyContent = this.hospitalOverviewContent
                }else if(value === '2') {
                    this.currentDutyContent = this.historicalEvolutionContent
                }
            },
            getFileList() {
                advertisementAPI
                    .getAdvertisementList({imageType:"1"})
                    .then((res) => {
                        if (res.code === 1000 && res.data.length > 0) {
                            let arrUp = [];
                            res.data.forEach((item) => {
                               arrUp.push(getUploadFilePath(item.imageFile));
                            });
                            this.imgSrc = arrUp[0]
                        }
                    })
                    .catch((err) => {});
            },
            getLeaderList() {
                hospitalOverviewAPI.getLeaderList({}).then(res => {
                    if (res.code === 1000) {
                        let data = res.data
                        if(data && data.length) {
                            data.forEach(item => {
                                item.photo = getUploadFilePath(item.photo)
                                item.key = uuid()
                            });
                        }
                        this.personnelDisplayContent = data
                        this.personnelDisplayContent.sort(function (a, b) {
                            return a.sortIndex - b.sortIndex;
                        });
                    } else {
                        this.personnelDisplayContent = []
                    }
                }).catch(err => {
                    this.$message.error("获取数据失败，请重试")
                })
            },
            getHospitalNavigationList() {
                hospitalOverviewAPI.getHospitalNavigationList({}).then(res => {
                    if (res.code === 1000) {
                        let data = res.data
                        if(data && data.length) {
                            data.forEach(item => {
                                item.photo = getUploadFilePath(item.photo)
                                item.key = uuid()
                            });
                        }
                        this.navigationPhotoContent = data
                        this.navigationPhotoContent.sort(function (a, b) {
                            return a.sortIndex - b.sortIndex;
                        });
                    } else {
                        this.navigationPhotoContent = []
                    }
                }).catch(err => {
                    this.$message.error("获取数据失败，请重试")
                })
            },
            getHospitalList() {
                hospitalAPI.getHospitalList({}).then(res => {
                    if (res.code === 1000) {
                        if(res.data && res.data.length) {
                            let data = res.data[0]
                            if(data.hospitalMessage) {
                               this.hospitalOverviewContent = data.hospitalMessage
                            }
                            if(data.history) {
                               this.historicalEvolutionContent = data.history
                            }
                            if(!this.originFlag) {
                                this.originFlag = true
                                this.currentDutyContent = this.hospitalOverviewContent
                            }
                        }
                    } else {
                        this.form = []
                    }
                }).catch(err => {
                    this.form = []
                    this.$message.error("获取数据失败，请重试")
                })
            },
        },
        mounted(){
            this.getFileList()
            this.getLeaderList()
            this.getHospitalNavigationList()
            this.getHospitalList()
        }
    }
</script>

<style scoped lang="scss">
    .hospital-overview-warp {
        width: 100%;
        cursor: default;
        .hospital-overview-header {
            width: 100%;
            height: 150px;
            .header-image {
                width: 100%;
                height: 150px;
            }
        }
        .hospital-overview-content-warp {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
            .hospital-overview-content {
                width: 1168px;
                display: flex;
                justify-content: space-between;
                .content-left {
                    width: 124px;
                    height: 600px;
                    margin-right: 30px;
                }
                .content-right {
                    width: 984px;
                    min-height: 500px;
                    margin-right: 30px;
                }                
            }
            .content-left {
                .content-left-item {
                    width: 100%;
                    padding: 10px;
                    box-sizing: border-box;
                    background-color: $background-color-white;
                    font-size: $font-normal-size;
                    border: 1px solid $color-border-second;
                    margin: -1px 0; /* 向上、向下、向左、向右各减去1px，以去掉相邻边框 */
                    &: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 {
                    background-color: $blue-color;
                    color: $white-color !important;
                }
            }
        }
    }

</style>