<template>
    <el-card style="border-radius: 15px;margin-top: 10px">
        <div  style="cursor: pointer;display: flex;flex-direction: row;flex-wrap: nowrap">
<!--            <div style="display: flex;align-items: center">-->
<!--                <span style="font-size: 16px;font-weight: bold">●</span>-->
<!--            </div>-->
            <div @click="toProjectDetail" class="userProjects" style=";margin-left:10px;display: flex;flex-direction: column;flex-wrap: nowrap">
                <div style="margin-left: 10px;display: flex;flex-direction: row;justify-content: flex-start">
                    <span style="font-size: 16px;font-weight: bold">{{project.projectName}}</span>
                </div>
                <div style="margin-top: 10px;margin-left: 10px;">
                    <span style="display: flex;flex-direction: row;justify-content:flex-start;text-align: left;font-size: 16px;color: #9ca3af">{{brief}}</span>
                </div>
                <div style=" margin-left: 10px;;margin-top: 10px;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
                    <div :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}" style="width: 10px;height: 10px;background-color: #42b983;border-radius: 50px"></div>
                    <el-tag size="mini" style="margin-left: 5px;border-radius: 10px">
                        {{project.categoryName}}
                    </el-tag>
                    <span style="margin-left: 5px;font-size: 14px;color: #9ca3af">●</span>
                    <span style="margin-left: 5px;font-size: 14px;color: #9ca3af">{{ formatNumber(project.lookCount) }}</span>
                    <span style="margin-left: 5px;font-size: 14px;color: #9ca3af">●</span>
                    <span style="margin-left: 5px;font-size: 14px;color: #9ca3af">{{project.submitTime}}</span>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script>
export default {
    name: "UserProjects",
    props:{
        project:Object,
        index:Number,
    },


    data(){
        return{
            colorlists: [
                'hsl(62,90%,49%)',
                'hsl(138,63%,59%)',
                'rgb(245,145,135)',
                'rgb(111,235,245)',
                'rgb(162,239,120)',
                'rgb(43,255,255)',
                'hsl(0,89%,63%)',
                'rgb(241,125,191)',
                'hsl(282,85%,64%)',
                'rgb(255,202,0)',
                'blueviolet'
            ]
        }
    },
    computed:{
        brief:function(){
            return  this.project.projectDescription.substr(0, 43) + '...';
        },
    },
    methods:{
        formatNumber(num) {
            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
        },
        toProjectDetail(){
            this.$router.push({
                path:'/ProjectDetail',
                query: {
                    id: this.project.projectId, refresh: true
                }})
        }

    }
}
</script>

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