<template>
    <div class="news-item">
        <el-space direction="vertical" class="flex-fill" alignment='flex-start'>
            <common-text :lineLimit="1" class="text-bold" color="var(--text-primary-80-color)">{{
                props.title
                }}</common-text>
            <common-text class="text-tip-2" color="var(--text-primary-65-color)">
                {{ props.from }}
            </common-text>
            <el-space v-if="props.aeraTags">
                <area-tag v-for="(tag, index) in props.aeraTags" :key="index" :tagName="tag" />
            </el-space>
        </el-space>
        <img style="width: 122px; height: 82px" :src="props.img">
        <!-- <img v-else style="width: 122px; height: 82px" :src="DefaultIconNews"> -->
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElSpace } from 'element-plus'
import AreaTag from '@/components/base/AreaTag/index.vue'
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
import CommonText from '../texts/CommonText.vue';

const props = defineProps({

    img: {
        type: String,
        default: 'img'
    },
    title: {
        type: String,
        default: "title"
    },
    from: {
        type: String,
        default: "from"
    },
    aeraTags: {
        type: Array,
        default: []
    },
    content: {
        type: String,
        default: "content"
    },

});
const emit = defineEmits(['item-click', 'more-click']);
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';

.news-item {
    display: flex;
    margin-top: 10px;
}
</style>