<template>
    <div class="personnelDisplay">
        <div class="personnelDisplay-title">
            <span>{{title}}</span>
            <div class="more" v-if="moreFlag" @click="toMore(morePath)"><i class="el-icon-more"></i></div>
        </div>
        <div class="personnelDisplay-content">
            <div class="center-content-item" v-for="(item,index) in personnelDisplayContent" :key="index" @click="toRouter(personnelPath,item.query)">
                <div class="center-content-item-image">
                    <el-image
                        class="center-image"
                        fit="fill"
                        :src="item.imageSrc"
                    ></el-image>     
                </div>
                <div class="center-content-item-title">
                    <span>{{item.department}}</span><span>{{item.position}}</span>&nbsp;&nbsp;<span>{{item.name}}</span>
                </div>                                        
            </div>              
        </div>        
    </div>
</template>

<script>
    export default {
        name: 'personnelDisplay',
        props: {
            moreFlag: {
                type: Boolean,
                default: false
            },            
            title: {
                type: String,
                default: '标题栏'
            },
            personnelPath: {
                type: String,
                default: ''
            },
            personnelDisplayContent: {
                type: Array,
                default: () => [
                    // {
                    //     imageSrc:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
                    //     name:"李卫华",
                    //     position:"院长",
                    //     department: "沭阳铭和医院"
                    // },    
                ],
            },
        },
        methods: {
            toRouter(path,query){
                this.$router.push({
                    name: path,
                    query: {query},
                });
            },
        }
    }
</script>

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