<template>
    <el-card style="border-radius: 15px;margin-top: 10px">
        <div @click="toProjectDetail" class="userProjects"  style="cursor: pointer;display: flex;flex-direction: row;flex-wrap: nowrap">
            <div style="width: 80px;height: 80px;display: flex;align-items: center">
                <el-avatar :size="80" v-if="project.projectIco" :src="project.projectIco" shape="square"></el-avatar>
            </div>
            <div  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 v-if="project.projectName" 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 v-if="project.categoryName" 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 v-if="project.lookCount" 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 v-if="project.submitTime" style="margin-left: 5px;font-size: 14px;color: #9ca3af">{{project.submitTime}}
                    </span><span style="margin-left: 5px;font-size: 14px;color: #9ca3af">●</span>
                    <span v-show="project.isValid===0" style="margin-left: 5px;font-size: 14px;color: #ffca00">待审核</span>
                    <span v-show="project.isValid===1" style="margin-left: 5px;font-size: 14px;color: #48d04e">已通过</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(){
            if(this.project.projectDescription){
                return  this.project.projectDescription.substr(0, 38) + '...';

            }else{
                return false;
            }
        },
    },
    methods:{
        formatNumber(num) {
            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
        },
        toProjectDetail(){
            if(this.project.projectId){
                this.$router.push({
                    path:'/ProjectDetail',
                    query: {
                        id: this.project.projectId, refresh: true
                    }})
            }else  {
                return false;
            }

        }

    }
}
</script>

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