<template>
    <div class="experts">
        <div class="experts-title">
            <span>{{title}}</span>
        </div>
        <div class="experts-content">
            <div class="center-content-item" v-for="(item,index) in expertsIntroductionContent" :key="index">
                <div class="center-content-item-first">
                    <div class="center-content-item-first-item">
                        <span>{{item.departmentName}}</span>
                    </div>
                </div>
                <div class="center-content-item-second">
                    <div class="center-content-item-second-item" v-for="(it,idx) in item.userList" :key="idx" @click="toDetail(routerPath,it.id)">
                        <div class="center-content-item-second-item-image">
                            <el-image
                                class="center-image"
                                fit="fill"
                                :src="getUploadFilePath(it.certificate)"
                            ></el-image>     
                        </div>
                        <div class="center-content-item-second-item-title">
                            <span>{{it.name}}</span>&nbsp;&nbsp;<span>{{it.position}}</span>
                        </div>                                        
                    </div>  
                </div>
                <div  v-for="(it,idx) in item.children" :key="idx">
                    <div class="center-content-item-first">
                        <div class="center-content-item-first-item">
                            <span>{{it.departmentName}}</span>
                        </div>
                    </div>
                    <div class="center-content-item-second">
                        <div class="center-content-item-second-item" v-for="(i,index) in it.userList" :key="index" @click="toDetail(routerPath,i.id)">
                            <div class="center-content-item-second-item-image">
                                <el-image
                                    class="center-image"
                                    fit="fill"
                                    :src="getUploadFilePath(i.certificate)"
                                ></el-image>     
                            </div>
                            <div class="center-content-item-second-item-title">
                                <span>{{i.name}}</span>&nbsp;&nbsp;<span>{{i.position}}</span>
                            </div>                                        
                        </div>  
                    </div>
                </div>                   
            </div>                    
        </div>        
    </div>
</template>

<script>
import {getUploadFilePath} from '@/config/index';
    export default {
        name: 'experts',
        props: {
            title: {
                type: String,
                default: '标题栏'
            },
            overviewFlag: {
                type: Boolean,
                default: false
            },
            routerPath: {
                type: String,
                default: ''
            },
            expertsIntroductionContent: {
                type: Array,
                default: () => [],
            },
        },
        methods: {
            getUploadFilePath,
            toDetail(path,id) {
                if(this.overviewFlag) {
                    this.$emit('clickOverview',id);
                }else {
                    this.$router.push({
                        name: path,
                        query: {id:id},
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .experts {
        width: 100%;
        text-align: left;
        cursor: default;
       .experts-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;
         }
       }
       .experts-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;
                        margin-top: 40px;
                    }                    
                }
                .center-content-item-second {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    .center-content-item-second-item {
                            width: 190px;
                            margin-top: 20px;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            .center-content-item-second-item-image {
                                width: 150px;
                                height: 210px;
                                .center-image {
                                    width: 150px;
                                    height: 210px;                                    
                                }
                            }
                            .center-content-item-second-item-title {
                                width: 150px;
                                margin-top: 10px;
                                font-size: $font-normal-size;
                                text-align: center;
                            }
                    }
                }
           }
       }
    }
</style>