<template>
    <div class="MonItems">
        <div style="text-align: left">
            <a class="Title" :href="Items.projectUrl"><i class="el-icon-s-promotion"></i>{{briefTitle}}</a>
        </div>
        <div class="State">
            <div style="margin-top:10px">
                <i class="el-icon-star-off"></i>&nbsp;Star:{{Items.startNum}}&nbsp;&nbsp;&nbsp;&nbsp;
                <i class="el-icon-time"></i>&nbsp;提交时间:&nbsp;{{Items.submitTime}}&nbsp;&nbsp;&nbsp;&nbsp;
                <i class="el-icon-view"></i>&nbsp;浏览量:{{Items.lookCount}}
            </div>
            <div>
                <el-button size="medium" type="primary" plain @click="changePage(Items.projectId)">详&nbsp;&nbsp;&nbsp;情</el-button>
            </div>
        </div>
        <div class="ItemsContent">
            {{briefDescribe}}
        </div>
    </div>
</template>

<script>
export default {
    name: "MonthlyItems",
    data(){
        return{
            content:'随着《数据安全法》和《个人信息保护法》的相继颁布，隐私计算技术在近' +
                '两年迎来了前所未有的热度。该项目是由密码学专家团队打造的隐私计算平台，它开箱即用、安全可靠，支持隐匿查询、' +
                '隐私求交、联合统计、数据资源管理等功能，实现了“数据可用不可见”，为数据安全流通保驾护航。',
        }

    },
    props:{
        Items:{
            type: Object,
            default () {
                return {}
            }
        }
    },
    computed:{
        briefTitle: function(){
            if(this.Items.projectTitle.length>=14){
                return this.Items.projectTitle.substr(0, 13) + '...';
            }else{
                return this.Items.projectTitle;
            }
        },
        briefDescribe: function(){
            if(this.Items.projectDescription.length >= 151){
                return this.Items.projectDescription.substr(0, 150) + '...';
            }else {
                return this.Items.projectDescription;
            }
        }
    },
    methods:{
        //项目详情
        changePage(id){
            let pathInfo = this.$router.resolve({
                path: '/ProjectDetail',
                query:{
                    id:id,
                    refresh:true
                }
            })
            window.open(pathInfo.href, '_self');
            this.$router.go(0);
        }
        }
}

</script>

<style scoped>
.MonItems{
    width:52vw;
    margin-top:30px
}
.Title{
    width:fit-content;
    color: #7bb6ff;
    font-size:25px;
    font-weight:550;
}
.Title:hover{
    text-decoration-line:underline ;
    color: #2b93ff;
    cursor: pointer;
}
.State{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top:10px;
    margin-left:0px;
    width:48vw;
    /*width:fit-content;*/
    font-size:16px;
    font-family: '华文细黑';
    font-weight:700;
    color: #6b6b6b;
}
.ItemsContent{
    font-weight:550;
    margin-top:8px;
    margin-left:0px;
    width:700px;
    font-size:18px;
    /*background-color: #ff4949;*/
    line-height: 35px;
    text-align: left;
}
</style>