<template>
    <div class="page-header">
        <div class="headerTitle">
            个人信息
            <router-link to="/user/profile">
                <div class="rightBtn">查看详情></div>
            </router-link>
            
        </div>
        <div class="infoEle">
            <div class="infoVia">
                <!-- <el-image class="headImage" :src="userStore.avatar" fit="fill" /> -->
                <el-avatar :size="80" :src="doctorVia" @error="errorHandler">
                    <img
                        :src="userStore.avatar"
                    />
                </el-avatar>
            </div>
            <div class="infoContent">
                <div class="infoLine1">
                    <div>{{ userStore.name ?? '-' }}</div>
                    <div style="margin-left: 8px;"><el-tag type="primary" effect="dark" round>{{ (userStore.roles && userStore.roles.length > 0) ? userStore.roles[0]  : '-'}}</el-tag></div>
                </div>
                <div v-if="userStore.dept">
                    <!-- 内科/主治医生 -->
                     {{ userStore.dept.deptName ?? '' }}
                </div>
            </div>
        </div>
    </div>
  </template>
  <script setup>
    import useUserStore from '@/store/modules/user'
    import doctorVia from '@/assets/images/doctorVia.png'
    const userStore = useUserStore()
  </script>
  
  <style scoped lang="scss">
    .page-header {
        background-color: #ffffff;
        margin: 15px;
        padding: 15px;
        border-radius: 10px;
        margin-left: 0px;
        .headerTitle{
            font-size: 22px;
            line-height: 30px;
            margin-bottom: 15px;
            position: relative;
            .rightBtn{
                position: absolute;
                font-size: 16px;
                right: 15px;
                top: 0px;
            }
        }
        .infoEle{
            display: flex;
            margin-left: 15px;
            .infoVia{
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color:#1A87FF ;
                .headImage{
                    margin: 8px;
                }
            }
            .infoContent{
                margin-left: 30px;
                line-height: 40px;
                font-size: 18px;
                .infoLine1{
                    display: flex;
                }
            }
        }
    }

  </style>