<script lang="tsx">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'SkyUser',
    emits: ['signout'],
    props: {
        loading: { type: Boolean, default: false },
        avatar: { type: String },
        nickname: { type: String }
    },
    setup(props, { emit }) {
        function handleCommand(key: Parameters<typeof emit>['0']) {
            return emit(key)
        }

        return () => (
            <el-skeleton loading={props.loading} animated style={{ width: 'auto' }}>
                {{
                    template: () => (
                        <div class="skyline-skeleton">
                            <el-skeleton-item class="skyline-skeleton__image" variant="image" />
                            <el-skeleton-item variant="text" style="width: 85px; height: 16px" />
                        </div>
                    ),
                    default: () => (
                        <el-dropdown trigger="click" size="large" onCommand={handleCommand}>
                            {{
                                dropdown: () => (
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="signout">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                ),
                                default: () => (
                                    <div class="skyline-user">
                                        <el-image class="skyline-user__avatar" fit="cover" src={props.avatar}>
                                            {{
                                                placeholder: () => (
                                                    <el-icon size={32}>
                                                        <local-skyline-avatar />
                                                    </el-icon>
                                                ),
                                                error: () => (
                                                    <el-icon size={32}>
                                                        <local-skyline-avatar />
                                                    </el-icon>
                                                )
                                            }}
                                        </el-image>
                                        {props.nickname && <el-text>{props.nickname}</el-text>}
                                    </div>
                                )
                            }}
                        </el-dropdown>
                    )
                }}
            </el-skeleton>
        )
    }
})
</script>

<style lang="scss" scoped>
.skyline-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    &__image {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        :deep(svg) {
            width: 50%;
            height: 50%;
        }
    }
}

.skyline-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    &__avatar {
        width: 32px;
        height: 32px;
        display: block;
        border-radius: 50%;
        overflow: hidden;
    }
}
</style>
