<template>
    <div class="departmentIntroduction">
        <div class="departmentIntroduction-title">
            <span>{{title}}</span>
        </div>
        <div class="departmentIntroduction-content">
            <div class="center-content-item" v-for="(item,index) in departmentIntroductionContent" :key="index">
                <div v-if="item.departmentLevel && (item.departmentLevel === '1')">
                    <div class="center-content-item-first">
                        <div class="center-content-item-first-item" @click="toDetail(item.id,item.departmentName)">
                            <span>{{item.departmentName}}</span>
                        </div>
                    </div>
                    <div class="center-content-item-second">
                        <div class="center-content-item-second-item"  v-for="(it,id) in item.children" :key="id" @click="toDetail(it.id,it.departmentName)">
                            <span>{{it.departmentName}}</span>
                        </div> 
                    </div>  
                </div>
                <div v-else>
                    <div class="center-content-item-first">
                        <div class="center-content-item-first-item" @click="toDetail(item.id,item.departmentName)">
                            <span>{{item.departmentName}}</span>
                        </div> 
                    </div>                      
                </div>
            </div>                    
        </div>        
    </div>
</template>

<script>
    export default {
        name: 'departmentIntroduction',
        props: {
            title: {
                type: String,
                default: '标题栏'
            },
            departmentIntroductionContent: {
                type: Array,
                default: () => [
                ],
            },
        },
        methods: {
            toDetail(id,name) {
                this.$emit('clickOverview',id,name);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .departmentIntroduction {
        width: 100%;
        text-align: left;
        cursor: default;
       .departmentIntroduction-title {
         width: 100%;
         padding: 10px;
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: $font-common-second-size;
         color: $blue-color;
         border-bottom: 2px dashed $color-border-first;
         .more {
            font-size: 20px;
         }
       }
       .departmentIntroduction-content {
          width: 100%;
          .center-content-item {
                width: 100%;;
                .center-content-item-first {
                    width: 100%; 
                    display: flex;
                    flex-wrap: wrap;
                    .center-content-item-first-item {
                        font-weight: bold;
                        text-decoration: underline;
                        margin-top: 40px;
                    }                    
                }
                .center-content-item-second {
                    width: 100%; 
                    display: flex;
                    flex-wrap: wrap;
                    .center-content-item-second-item {
                        margin-top: 20px;
                        margin-right: 20px;
                        width: 150px;
                        padding: 10px;
                        text-align: center;
                        background-color: $background-color-grey;
                        box-sizing: border-box;
                        font-size: $font-normal-size;
                        border-radius: 2px;
                        &:hover {
                            background-color: $background-color-blue-two;
                        }
                    }
                }
           }
       }
    }
</style>