<!--
 * @Date: 2024-10-20 16:57:48
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-22 17:41:01
 * @FilePath: /hager/src/views/search.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-search-page">
    <hager-box>
      <div class="search-title">与“{{ keyword }}”相关的搜索结果</div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="product">
          <div slot="label" class="customer-label">产品&nbsp;&nbsp;<span>2</span></div>
          <div class="search-product-list">
            <div :class="['search-product-item', is_xs ? 'xs' : '']" v-for="(item, index) in product_list" :key="index">
              <div :class="['search-product-item-img', is_xs ? 'xs' : '']" :style="{ 'background-image': 'url('+ item.img +')' }"></div>
              <p @click="goToDetail(item)" class="search-product-item-title">{{ item.title }}</p>
            </div>
          </div>
          <div style="height: 5rem;"></div>
        </el-tab-pane>
        <el-tab-pane name="news">
          <div slot="label" class="customer-label">新闻&nbsp;&nbsp;<span>3</span></div>
          <div style="margin-top: 1rem;" v-for="(item, index) in news_list" :key="index">
            <!-- <el-breadcrumb separator="/">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>新闻中心</el-breadcrumb-item>
            </el-breadcrumb> -->
            <div :class="['search-news-wrapper', is_xs ? 'xs' : '']">
              <div class="search-news-title" v-html="highlightKeyword(keyword, item.title)"></div>
              <div class="search-news-content" v-html="highlightKeyword(keyword, item.content)"></div>
              <div class="search-news-more">
                <div class="search-news-more-btn" @click="goTo(item.id)">MORE</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="solution">
          <div slot="label" class="customer-label">解决方案&nbsp;&nbsp;<span>3</span></div>
          <div style="margin-top: 1rem;" v-for="(item, index) in news_list" :key="index">
            <div :class="['search-news-wrapper', is_xs ? 'xs' : '']">
              <div class="search-news-title" v-html="highlightKeyword(keyword, item.title)"></div>
              <div class="search-news-content" v-html="highlightKeyword(keyword, item.content)"></div>
              <div class="search-news-more">
                <div class="search-news-more-btn" @click="goTo(item.id)">MORE</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </hager-box>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import $ from 'jquery';
import objectFitImages from 'object-fit-images';

export default {
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {
      activeName: 'product',
      keyword: this.$route.query.keyword,
      news_list: [{
        id: '123',
        title: '海格电气全新智能型hw+空气断路器重磅上市',
        content: '11 月 24 日，海格电气在惠州举办了 2023 海格匠心之旅暨 hw+ 全系列新品发布会,面向中国市场正式推出了全新一代智能型 hw+ 空气断路器。海格电气管理层及员工代表，行业客户及合作伙伴等齐聚惠州工厂，共同见证海格电气新一代',
      }, {
        id: '456',
        title: '里程碑时刻！海格电气首台全新一代HW+空气断路器',
        content: '全新一代HW+空气断路器的整机下线，标志着海格电气在低压配电领域的进一步技术升级。作为海格电气在中国市场重磅推出的里程碑式产品，全新一代HW+空气断路器为大型建筑复杂、高负荷的用电需求提供高质量解决方案。',
      }],
      product_list: [{
        id: '',
        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
        title: 'acb hw 空气断路器'
      }, {
        id: '',
        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
        title: 'acb hw 空气断路器'
      }, {
        id: '',
        img: 'https://cdn.ipadbiz.cn/hager/img/product/t01.jpg',
        title: 'acb hw 空气断路器'
      }]
    }
  },
  watch: {
    '$route.query.keyword': function(newKeyword) {
      this.keyword = newKeyword || '';
    }
  },
  mounted () {
    objectFitImages(this.$el); // 对当前组件的 DOM 元素应用
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    highlightKeyword (keyword, text) {
      // 创建一个正则表达式来查找关键词
      var regex = new RegExp(`(${keyword})`, 'gi');

      // 用 <span> 标签替换匹配到的关键词并加上高亮类
      var highlightedText = text.replace(regex, '<span style="color: #00ABE5;">$1</span>');

      return highlightedText;
    },
    goTo (id) {
      this.$router.push({
        path: '/news/detail',
        query: {
          id: id
        }
      });
    },
    goToDetail (v) { // 跳转产品详情
      this.$router.push({
        path: '/product/detail',
        query: {
          id: v.id
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-search-page {
    .search-title {
      font-size: 1.25rem;
      color: @secondary-color;
      margin: 2rem 0;
      font-weight: bold;
    }

    .search-product-list {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 1rem;
    }
    .search-product-item {
      width: calc(33.54% - 1rem);
      &.xs {
        width: calc(50% - 1rem);
      }
    }
    .search-product-item-img {
      background-color: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 18rem;
      padding: 3rem;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid #ECECEC;
      background-position: center;
      background-size: 70%;
      background-repeat: no-repeat;
      &.xs {
        padding: 3rem 1rem;
        background-size: 100%;
        img {
          width: 100%;
        }
      }
    }
    .search-product-item-title {
      text-align: left;
      margin-top: 0.75rem;
      color: @text-color;
      padding-left: 0.5rem;
      font-weight: bold;
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }

    .search-news-wrapper {
      margin: 1.5rem 0;
      &.xs {
        border-bottom: 1px solid #ECECEC;
      }
      .search-news-title {
        font-size: 1.15rem;
        font-weight: bold;
        margin-bottom: 1rem;
      }
      .search-news-content {
        line-height: 2rem;
      }
      .search-news-more {
        display: flex;
        justify-content: flex-end;
        .search-news-more-btn {
          color: #F56400;
          padding: 0.5rem 2rem;
          border: 1px solid #F56400;
          margin: 1rem 0;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }

  :deep(.el-tabs__item.is-active, ) {
    color: @secondary-color;
  }

  :deep(.el-tabs__active-bar) {
    background-color: @secondary-color;
  }

  :deep(.el-tabs__item:hover) {
    color: @secondary-color;
  }

  :deep(.el-tabs__item) {
    color: @text-color;
  }

  .customer-label {
    font-size: 0.95rem;
    padding: 0 0.5rem;
    span {
      color: #F56400;
    }
  }
</style>