<template>
  <div class="search-result-item" @click="handleClick">
    <!-- 分类标签 -->
    <span class="category-tag" :style="categoryStyle">
      {{ result.category }}
    </span>

    <!-- 标题 -->
    <h3 class="title" v-html="result.title"></h3>

    <!-- 日期 -->
    <div class="meta">
      <span class="date">{{ result.publishTime }}</span>
      <span class="source" v-if="result.source">{{ result.source }}</span>
    </div>

    <!-- 摘要 -->
    <p class="summary" v-html="result.summary"></p>
  </div>
</template>

<script>
export default {
  name: 'SearchResultItem',
  props: {
    result: {
      type: Object,
      required: true,
    },
  },
  computed: {
    categoryStyle() {
      if (this.result.categoryType === 'news') {
        return { backgroundColor: '#e8f3ff', color: '#072ca6' };
      } else if (this.result.categoryType === 'carbon_cert') {
        return { backgroundColor: '#fff7e6', color: '#d25f00' };
      } else if (this.result.categoryType === 'service') {
        return { backgroundColor: '#e6fff0', color: '#00b42a' };
      }
      return { backgroundColor: '#f5f5f5', color: '#666' };
    },
  },
  methods: {
    handleClick() {
      if (this.result.url) {
        // 后端返回的URL已包含id参数，直接跳转
        window.location.href = this.result.url;
      }
    },
  },
};
</script>

<style scoped lang="less">
.search-result-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: #fafafa;
  }

  .category-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.5;

    :deep(em) {
      color: #00b42a;
      font-style: normal;
    }
  }

  .meta {
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;

    .date {
      margin-right: 16px;
    }

    .source {
      &::before {
        content: '来源：';
      }
    }
  }

  .summary {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    :deep(em) {
      color: #00b42a;
      font-style: normal;
    }
  }
}
</style>
