<template>
    <el-card style="border-radius: 10px;margin-top: 10px">
        <div @click="goToArticleDetail" class="UserArticle" style="display: flex;flex-direction: row;flex-wrap: nowrap;cursor: pointer">
            <div style="width: 60px;height: 60px;display: flex;flex-direction: row;align-content: center">
                <el-avatar :src="article.articleico" style="display: flex;align-items: center;justify-content: center" shape="square" :size="60"></el-avatar>
            </div>
            <div style="margin-left: 10px;display: flex;flex-wrap: nowrap;flex-direction: column;">
                <span style="display: flex;flex-direction: row;justify-content: flex-start;font-size: 18px;font-weight: bold;">
                    {{article.ArticleTitle}}
                </span>
                <span style="font-size: 14px;color: #9ca3af;display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: nowrap">
                    {{brief}}
                </span>
                <div style="margin-top: 2.5px;display: flex;flex-direction: row;justify-content: space-between;align-content: center;align-items: center">
                    <div style="display: flex;flex-direction: row;align-content: center">
                        <span style="font-size: 13px;color: #9ca3af">
                        作者: {{article.username}}
                    </span>
                     <span  style="margin-left: 10px;text-align: center;font-size: 13px;color: #9ca3af">
                       发布于: {{article.publishtime}}
                    </span>
                    </div>
                    <div style="margin-left: 5px;align-items: center;font-size: 13px;color: #9ca3af">
                            <i class="el-icon-view"></i> <span>{{formatNumber(article.ReadCount)}}</span>
                    </div>

                </div>
            </div>

        </div>
    </el-card>

</template>

<script>
export default {
    name: "UserArticles",
    props:{
      article:Object
    },
    data(){
        return{
        }
    },
    computed:{
        brief: function() {
            return this.article.ArticleContent.substr(0, 48) + '...';
        },
    },
    methods:{
        formatNumber(num) {
            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
        },
        goToArticleDetail(){
            this.$router.push({
                path:'/ArticleDetail',
                query: {
                    id: this.article.ArticleId,
                    refresh: true
                }})
            // console.log(this.$route.query.id)
        },
    }
}
</script>

<style scoped>
.UserArticle:hover{
    background-color: #eeeeee;
    border-radius: 10px;
}
</style>