<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" 
                    :departmentIntroductionContent="currentContent"
                    :dutyContent="currentDutyContent"
                    @clickOverview="clickOverview"
                    @backHome="backHome"
                    :backBtn="true"
                    >
                </component>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    import departmentIntroduction from '@/components/departmentIntroduction/index';
    import keyDisciplines from "@/components/departmentIntroduction/index";
    import keySpecialty from "@/components/departmentIntroduction/index";
    import featureEducation from "@/components/departmentIntroduction/index";
    import overview from '@/components/overview/index';
    import advertisementAPI from "@/api/advertisement";
    import {getUploadFilePath} from '@/config/index';
    import departmentAPI from "@/api/department";
    export default {
        name: "hospital-overview",
        components: {
            departmentIntroduction,
            keyDisciplines,
            keySpecialty,
            featureEducation,
            overview
        },
        data() {
            return {
                imgSrc: '',
                currentTabs:"0",
                currentTabsLabel:"科室介绍",
                originCurrentTabsLabel:"科室介绍",
                currentContent:[],
                currentDutyContent: "",
                leftTabs: [
                    {
                        label:"科室介绍",
                        value:"0",
                        componentName: "departmentIntroduction"
                    },
                    {
                        label:"重点学科",
                        value:"1",
                        componentName: "keyDisciplines"
                    },
                    {
                        label:"重点专科",
                        value:"2",
                        componentName: "keySpecialty"
                    },
                    {
                        label:"特色专科",
                        value:"3",
                        componentName: "featureEducation"
                    },
                ],
                componentName: "departmentIntroduction",
                currentComponentName: "departmentIntroduction",
                departmentIntroductionContent: [],
                keyDisciplinesContent: [],
                keySpecialtyContent: [],
            }
        },
        methods: {
            selectTabs(value,label,componentName) {
                this.currentContent = []
                this.currentDutyContent = ''
                this.currentTabs = value
                this.componentName = componentName
                this.currentComponentName = componentName
                this.currentTabsLabel = label
                this.originCurrentTabsLabel = label
                if(value === '0') {
                    this.getDepartmentAndChildrenOne()
                }else if(value === '1') {
                    this.getDepartmentAndChildrenTwo()
                }else if(value === '2') {
                    this.getDepartmentAndChildrenThree()
                }else if(value === '3') {
                    this.getDepartmentAndChildrenFour()
                }
            },
            clickOverview(value,name) {
                this.componentName = 'overview'
                if(value) {
                    this.getDepartmentManagementById(value)
                }
                this.currentTabsLabel = name
            },
            backHome() {
                this.componentName = this.currentComponentName
                this.currentTabsLabel = this.originCurrentTabsLabel
            },
            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) => {});
            },
            getDepartmentAndChildrenOne() {
                let param = {}
                departmentAPI.getDepartmentAndChildren(param).then(res => {
                    if (res.code === 1000) {
                        let tableData = res.data
                        this.currentContent = JSON.parse(JSON.stringify(tableData))
                    } else {
                        this.$message.error("获取数据失败，请重试")
                    }
                }).catch(err => {
                    this.$message.error("网络异常，请重试")
                })   
            },
            getDepartmentAndChildrenTwo() {
                let param = {isKeynoteSubject: "1"}
                departmentAPI.getDepartmentAndChildren(param).then(res => {
                    if (res.code === 1000) {
                        let tableData = res.data
                        this.currentContent = JSON.parse(JSON.stringify(tableData))
                    } else {
                        this.$message.error("获取数据失败，请重试")
                    }
                }).catch(err => {
                    this.$message.error("网络异常，请重试")
                })   
            },
            getDepartmentAndChildrenThree() {
                let param = {isKeynoteEducation: "1"}
                departmentAPI.getDepartmentAndChildren(param).then(res => {
                    if (res.code === 1000) {
                        let tableData = res.data
                        this.currentContent = JSON.parse(JSON.stringify(tableData))
                    } else {
                        this.$message.error("获取数据失败，请重试")
                    }
                }).catch(err => {
                    this.$message.error("网络异常，请重试")
                })   
            },
            getDepartmentAndChildrenFour() {
                let param = {isFeatureEducation: "1"}
                departmentAPI.getDepartmentAndChildren(param).then(res => {
                    if (res.code === 1000) {
                        let tableData = res.data
                        this.currentContent = JSON.parse(JSON.stringify(tableData))
                    } else {
                        this.$message.error("获取数据失败，请重试")
                    }
                }).catch(err => {
                    this.$message.error("网络异常，请重试")
                })   
            },
            getDepartmentManagementById(id) {
                let param = {id}
                departmentAPI.getDepartmentManagementById(param).then(res => {
                    if (res.code === 1000) {
                        if(res.data.departmentText) {
                            this.currentDutyContent =  res.data.departmentText
                        }
                    } else {
                        this.$message.error("获取数据失败，请重试")
                    }
                }).catch(err => {
                    this.$message.error("网络异常，请重试")
                })   
            },            
        },
        mounted(){
            if(this.$route.query && this.$route.query.type) {
                let type = this.$route.query.type
                this.currentDutyContent = ''
                this.currentTabs = this.leftTabs[type].value
                this.componentName = this.leftTabs[type].componentName
                this.currentComponentName = this.leftTabs[type].componentName
                this.currentTabsLabel = this.leftTabs[type].label
                this.originCurrentTabsLabel = this.leftTabs[type].label
                this.currentContent = []
                if(type === '0') {
                    this.getDepartmentAndChildrenOne()
                }else if(type === '1') {
                    this.getDepartmentAndChildrenTwo()
                }else if(type === '2') {
                    this.getDepartmentAndChildrenThree()
                }else if(type === '3') {
                    this.getDepartmentAndChildrenFour()
                }
                if(this.$route.query.id) {
                    this.componentName = 'overview'
                    this.getDepartmentManagementById(this.$route.query.id)
                    this.currentTabsLabel = this.$route.query.name                    
                }                
            }else {
                this.getDepartmentAndChildrenOne()
            }
            this.getFileList()
        }
    }
</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;
            padding-bottom: 40px;
            .hospital-overview-content {
                width: 1168px;
                display: flex;
                justify-content: space-between;
                .content-left {
                    width: 150px;
                    height: 600px;
                    margin-right: 30px;
                }
                .content-right {
                    width: 1186px;
                    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>