<template>
    <el-card class="box-card" style="width: 15vw;height: auto;border: none">
        <div slot="header" class="clearfix" style="display: flex;flex-direction: row;justify-content: space-between">
            <span style="font-size: 14px;color: #4b5563">推荐项目</span>
            <el-button class="randomProjectBtn" @click="getRandomProject" style="font-size: 12px;float: right; padding: 3px 0;color: #9ca3af" type="text"><i class="el-icon-refresh"></i>换一换</el-button>
        </div>
        <div class="text item" v-for="(item,index) in randomProjectList" :key="index" style=";cursor:pointer;margin-top: 10px;display: flex;flex-direction: row;flex-wrap: nowrap" @click="toProjectDetail(item.projectId)">
            <div style="width: 40px;height: 40px;">
                <el-avatar :size="40" :src="item.projectIco"></el-avatar>
            </div>
            <div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: left">
                <span style="margin-left: 10px;font-size: 14px;font-weight: bold;display: flex;flex-direction: row;justify-content: flex-start">{{brief(item.projectName)}}</span>
                <div style=";margin-left:10px;margin-top: 5px;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: nowrap">
                    <div style="align-items: center;font-size: 12px;color: #9ca3af">
                        <i class="el-icon-star-off"></i> <span>{{formatNumber(item.lookCount)}}</span>
                    </div>
                    <div style="margin-left: 10px;justify-content: space-between;display: flex;flex-direction:row;flex-wrap: nowrap;align-items: center;font-size: 12px;color: #9ca3af">
                        <div :style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)]}"  style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
                        <span style="margin-left: 5px">{{item.categoryName}}</span>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>

<script>
import axios from "axios";

export default {
    name: "RandomProjects",
    data(){
        return{
             randomProjectList:[],
            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'
            ]
        }
    },
    mounted() {
        this.getRandomProject();
    },

    methods:{
        getRandomProject(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/randomSelectPro',
                // URL 中的查询参数
                params: {
                }
            }).then(function (res) {
                that.randomProjectList=res.data;
            });
        },
        formatNumber(num) {
            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
        },
        toProjectDetail(id){
            this.$router.push({
                path:'/ProjectDetail',
                query: {
                    id: id,
                    refresh: true
                }})
            // console.log(this.$route.query.id)
        },
        brief(content) {
            return content.substr(0, 16) + '...';
        },
    }
}
</script>

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