<template>
    <el-space @click="onClick(person)">
        <el-avatar :size="48" :src="person[img]" alignment="center" />
        <el-space :size="0" direction="vertical" alignment="flex-start">
            <div class="text-header">{{ person[name] }}</div>
            <div class="person-position">{{ person[position] }}</div>
        </el-space>
    </el-space>
</template>

<script setup>
import '@/styles/common.scss'
import { ElSpace, ElAvatar } from 'element-plus';
const props = defineProps({

    // 新闻列表数据
    person: {
        type: Object,
        default: () => { }
    },

    img: {
        type: String,
        default: 'avatarUrl'
    },
    name: {
        type: String,
        default: "name"
    },
    position: {
        type: String,
        default: "position"
    },
    introduction: {
        type: String,
        default: "introduction"
    },

});
const emit = defineEmits(['item-click', 'more-click']);

const onClick = (item) => {
    emit('item-click', item)
    console.log(item)
};
</script>
<style lang="scss" scoped>
.person-position {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary-65-color);
}
</style>