<template>
  <div class="SearchResult" @click="goToProjectDeatil" style=";align-items:center;cursor: pointer;margin-top: 5px;display: flex;flex-direction: row;flex-wrap: nowrap">
     <div style="width: 50px;height: 50px;">
         <el-avatar  :size="50" :src="searchResult.projectIco"></el-avatar>
     </div>
      <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
          <div style="margin-left:10px;display: flex;flex-direction: row;flex-wrap: nowrap">
              <span style="font-size: 14px;font-weight: bold">{{briefTitle}}</span>
          </div>
          <div style="margin-left:10px;">
              <span style="font-size: 12px">{{briefContent}}</span>
          </div>
          <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">
                  <span>{{formatTime}}</span>
              </div>
              <div style="align-items: center;font-size: 12px;color: #9ca3af">
                  <i class="el-icon-view"></i> <span>{{formatNumber(searchResult.lookCount)}}</span>
              </div>
              <div style="align-items: center;font-size: 12px;color: #9ca3af">
                  <i class="el-icon-star-on"></i> <span>{{formatNumber(searchResult.startNum)}}</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">{{searchResult.categoryName}}</span>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: "SearchResultsList",
    props:{
      searchResult:Object
    },
    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'
            ]
        }
    },
    methods:{
        formatNumber(num) {
            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
        },
        goToProjectDeatil(){
            this.$router.push({
                path:'/ProjectDetail',
                query: {
                    id: this.searchResult.projectId,
                    refresh: true
                }})
            // console.log(this.$route.query.id)
        },
    },
    computed: {
        // 对时间进行格式化
        formatTime: function() {
            if (this.searchResult) {
                const dt = new Date(this.searchResult.submitTime)
                const year=dt.getFullYear()
                const month = dt.getMonth()
                const date = dt.getDate()
                return `${year}-${month}-${date}`
            }
            return '';
        },
        // 截取文章内容的前 35 个字，并加上省略号
        briefContent: function() {
            return this.searchResult.projectDescription.substr(0, 17) + '...';
        },
        briefTitle: function() {
            return this.searchResult.projectTitle.substr(0, 10) + '...';
        },

    },
}
</script>

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