<!--
 * @Date: 2024-08-27 10:06:30
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-11-11 12:02:40
 * @FilePath: /hager/src/views/index.vue
 * @Description: 首页
-->
<template>
  <div class="hager-container">
    <el-carousel :height="top_img_height" :interval="0">
      <el-carousel-item v-for="(item, index) in banner_list" :key="index">
        <el-image style="height: 100%; width: 100%;" fit="fill" :src="item.value"></el-image>
      </el-carousel-item>
    </el-carousel>
    <hager-box class="box-n">
      <hager-h1 title="海格全球" sub="Hager Group"></hager-h1>
      <div class="hager-global">
        <div class="hager-global-info-fold">
          <p style="margin-bottom: 0.5rem;">海格集团是全球领先的低压电气及智能化解决方案和服务供应商，行业领域涵盖建筑<span class="strong">（住宅、商业、公建）、电力和工业。</span><i v-if="is_fold" class="el-icon-arrow-up" @click="toggleFold(true)"></i><i v-else class="el-icon-arrow-down" @click="toggleFold(false)"></i></p>
          <el-collapse-transition>
            <div v-show="is_fold">
              <p style="margin-bottom: 0.5rem;">海格电气品牌代表了集团的核心业务，覆盖配电系统、电缆管理系统，KNX 智能控制系统和开关面板、楼宇自动化和安防系统。集团旗下还拥有Berker、Bocchiotti、Elcom 和 E3 / DC 等品牌。这使我们得以整合专能，持续为楼宇自动化领域开发创新产品、系统和服务。</p>
              <p style="margin-bottom: 0.5rem;">海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。配电系统是这些技术得以实现的中枢，也是伴随我们成长的基础产品。</p>
              <p style="margin-bottom: 0.5rem;">海格集团于1955年由Hermann Hager、Oswald Hager 博士和他们的父亲Peter Hager 一起创立，集团总部位于德国Blieskastel，直到今天依然是一家独立运营的家族企业。在“真诚、勇气、正直”价值观的指导下，全球13000名员工紧密与客户联系在一起，在2023年创造了约32亿欧元的销售业绩，来自全球22个生产基地的产品和解决方案赢得了100多个国家客户的信任。</p>
            </div>
          </el-collapse-transition>
        </div>
        <div :class="['hager-global-info', is_xs ? 'xs' : '']">
          <div class="hager-global-info-item">
            <p class="num"><span>32</span>&nbsp;亿欧元</p>
            <p class="text-cn">2023年总营收</p>
            <p class="text">2023 sales revenue：3.2 billion euros</p>
          </div>
          <div class="hager-global-info-item">
            <p class="num" style="font-size: 1.85rem;"><span>100</span>&nbsp;+</p>
            <p class="text-cn">国家采用海格解决方案</p>
            <p class="text">100+ countries adopted Hager solutions</p>
          </div>
          <div class="hager-global-info-item">
            <p class="num"><span>13,000</span>&nbsp;位</p>
            <p class="text-cn">全球员工</p>
            <p class="text">13,000 employees around the world</p>
          </div>
          <div class="hager-global-info-item">
            <p class="num"><span>22</span>&nbsp;个</p>
            <p class="text-cn">生产基地</p>
            <p class="text">22 production sites</p>
          </div>
        </div>
        <div class="more-box" style="margin-top: 1rem;">
          <hager-more @click.native="getToGroup"></hager-more>
        </div>
      </div>
    </hager-box>
    <hager-box class="box-2n" @screen-width="handleScreenWidth">
      <hager-h1 title="解决方案" sub="Solution"></hager-h1>
      <div v-if="!is_xs" class="hager-solution">
        <el-row :gutter="20" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
          <el-col :span="6" v-for="(x, idx) in item" :key="idx">
            <div
              @click="goToSolution(x)"
              :class="['solution-item', x.id === 'other' ? 'other' : '']"
              :style="{ backgroundImage: 'url('+x.cover+')' }"
              >
              <p>{{ x.category_name }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSolutionSlideChange">
          <swiper-slide v-for="(item, index) in solution_list" :key="index">
            <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.cover+')' }">
              <p @click="goToSolution(item)">{{ item.category_name }}</p>
            </div>
          </swiper-slide>
        </swiper>
        <div class="xs-control">
          <div>
            <i :class="['el-icon-arrow-left', activeSolutionIndex === 0 ? 'disabled' : '']"@click="prevSolutionBtn()"></i>&nbsp;
            <i :class="['el-icon-arrow-right', reach_solution_end ? 'disabled' : '']" @click="nextSolutionBtn()"></i>
          </div>
        </div>
      </div>
    </hager-box>
    <hager-box class="box-n">
      <hager-h1 title="产品中心" sub="Product"></hager-h1>
      <!-- <div v-if="!is_xs" class="hager-product-center">
        <el-row :gutter="15">
          <el-col :span="6" v-for="(item, index) in product_list" :key="index">
            <div @click ="goToProduct(item)" class="product-item">
              <div class="img" :style="{ backgroundImage: 'url('+item.src+')' }"></div>
              <p style="margin-top: 1rem;">{{ item.title }}</p>
            </div>
          </el-col>
        </el-row>
        <div class="more-box" style="margin-top: 2rem;">
          <hager-more></hager-more>
        </div>
      </div> -->
      <div>
        <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
          <swiper-slide v-for="(item, index) in product_list" :key="index">
            <div @click="goToProduct(item)" class="product-item xs">
              <div class="img" :style="{ height: product_box_height, backgroundImage: 'url('+item.cover+')' }"></div>
              <p class="product-title" style="margin: 0.5rem;">{{ item.category_name }}</p>
            </div>
          </swiper-slide>
        </swiper>
        <!-- <div v-if="product_list.length <= productSlidesPerView" class="more-box" style="margin-top: 2rem;">
          <hager-more></hager-more>
        </div> -->
        <div v-if="product_list.length > productSlidesPerView || is_xs || !isEnd" class="hager-product-center-more xs">
          <!-- <hager-more></hager-more> -->
          <div class="xs-control">
            <div>
              <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
              <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
            </div>
          </div>
        </div>
      </div>
    </hager-box>
    <hager-box v-if="!is_xs" class="box-2n">
      <hager-h1 title="最新资讯" sub="News"></hager-h1>
      <div class="news-container">
        <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
          <el-col :span="12" style="background-color: #FFF; height: 25rem;">
            <img class="news-item-img" v-if="index % 2 === 0" :src="item.cover">
            <div v-else class="news-item">
              <div class="news-item-title">{{ item.post_title }}</div>
              <p class="news-item-sub"  v-clamp="2">{{ item.post_title_en }}</p>
              <p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p>
              <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
            </div>
          </el-col>
          <el-col :span="12" style="background-color: #FFF; height: 25rem;">
            <div v-if="index % 2 === 0" class="news-item">
              <div class="news-item-title">{{ item.post_title }}</div>
              <p class="news-item-sub" v-clamp="2">{{ item.post_title_en }}</p>
              <p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p>
              <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
            </div>
            <img class="news-item-img" v-else :src="item.cover">
          </el-col>
        </el-row>
      </div>
      <div class="more-box"  style="margin-top: 3rem;">
        <hager-more @click.native="goToNews"></hager-more>
      </div>
    </hager-box>
    <div v-else style="background-color: #f9f9f9; padding-bottom: 1rem;">
      <hager-h1 title="最新资讯" sub="News" style="padding: 2rem;"></hager-h1>
      <div class="news-container xs">
        <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
          <el-col :span="24">
            <img class="news-item-img xs" :src="item.cover" alt="News Image 1">
            <div class="news-item xs">
              <div class="news-item-title">{{ item.post_title }}</div>
              <p class="news-item-sub" v-clamp="2">{{ item.post_title_en }}</p>
              <p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p>
              <div class="news-item-more" @click="goToNew(item)">MORE</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="more-box" style="margin-top: 3rem;">
        <hager-more @click.native="goToNews"></hager-more>
      </div>
    </div>
    <hager-box class="box-n">
      <hager-h1 title="招聘信息" sub="Recruitment"></hager-h1>
      <p style="margin: 2rem 0;">德国匠心，专注为你。海格集团招贤纳士，携手前行！我们诚邀各界精英加入我们的行列，共同书写成功的篇章。用你的才华，创造无限可能！ </p>
      <div class="more-box"  style="margin-top: 2rem;">
        <hager-more @click.native="goToRecruit"></hager-more>
      </div>
    </hager-box>
  </div>
</template>

<script>
import mixin from '@/common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
import hagerMore from '@/components/hagerMore.vue';
import { getHomeAPI } from "@/api/hager.js";
import $ from 'jquery';

export default {
  mixins: [mixin.init],
  components: { hagerBox, hagerH1, hagerMore },
  data () {
    return {
      is_fold: false,
      banner_list: [],
      news_list: [],
      screen_width: 0,
      solution_list: [],
      product_list: [],
      swiperOption: {
        slidesPerView: 2,
        spaceBetween: 20,
        preventClicks : true,
        slideToClickedSlide: false,
        touchRatio: 0,
        breakpoints: {
          1480: {
            slidesPerView: 5,
            spaceBetween: 30
          },
          1024: {
            slidesPerView: 5,
            spaceBetween: 30
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20
          },
          640: {
            slidesPerView: 2,
            spaceBetween: 20
          },
          320: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          160: {
            slidesPerView: 1,
            spaceBetween: 0
          }
        }
      },
      activeSolutionIndex: 0,
      activeProductIndex: 0,
      reach_solution_end: false,
      reach_product_end: false,
      productSlidesPerView: 5,
      isEnd: false,
      product_box_height: '10rem'
    }
  },
  async mounted () {
    const { code, data } = await getHomeAPI();
    if (code) {
      this.product_list = data.product;
      this.banner_list = data.banner;
      this.solution_list = data.solution;
      this.news_list = data.news;
    }
    this.$nextTick(() => {
      this.isEnd = this.$refs.myProductSwiper.$swiper.isEnd; // 是否全部显示出来
      this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
        // breakpoint时 显示的条数
        this.productSlidesPerView = swiper.slidesPerView;
      });
      // 高度监听
      this.product_box_height = $('.product-item').outerWidth() - $('.product-title').outerHeight() + 'px';
      // 动态计算解决方案图片高度
      let img_box_width = $('.solution-item').outerWidth();
      $('.solution-item').css('height', img_box_width * 0.56 + 'px');
      let img_xs_width = $('.solution-item.xs').outerWidth();
      $('.solution-item.xs').css('height', img_box_width * 0.8 + 'px');
    });
    window.addEventListener('resize', this.handleHeightResize);
  },
  beforeDestroy() {
    // 在组件销毁前移除监听器，防止内存泄漏
    window.removeEventListener('resize', this.handleHeightResize);
  },
  watch: {
    // 监听$route对象的变化
    $route(to, from) {
      console.log('路由变化了：', to.path);
    }
  },
  methods: {
    handleHeightResize () {
      // 高度监听
      this.product_box_height = $('.product-item').outerWidth() - $('.product-title').outerHeight() + 'px';
      // 动态计算解决方案图片高度
      let img_box_width = $('.solution-item').outerWidth();
      $('.solution-item').css('height', img_box_width * 0.56 + 'px');
      let img_xs_width = $('.solution-item.xs').outerWidth();
      $('.solution-item.xs').css('height', img_box_width * 0.8 + 'px');
    },
    getToGroup () {
      this.$router.push({
        path: '/about/global'
      });
    },
    splitListIntoChunks (list) {
      const chunkSize = 4; // 每组4个项目
      const result = [];

      // 按每4个为一组进行分割
      for (let i = 0; i < list.length; i += chunkSize) {
        const chunk = list.slice(i, i + chunkSize);
        result.push(chunk);
      }

      // 在最后一组添加 {src:'', title:'other'}
      // result[result.length - 1].push({ id: 'other', cover: '', category_name: 'Other解决方案' });

      return result;
    },
    toggleFold (v) {
      this.is_fold = !this.is_fold;
    },
    goToNew (v) {
      this.$router.push({
        path: '/news/detail',
        query: {
          id: v.id
        }
      });
    },
    goToNews () {
      this.$router.push({
        path: '/news'
      });
    },
    goToRecruit () {
      this.$router.push({
        path: '/recruit'
      });
    },
    goToSolution (v) {
      this.$router.push({
        path: '/solution/detail',
        query: {
          id: v.id,
          timestamp: Date.now()
        }
      });
    },
    goToProduct (v) {
      this.$router.push({
        path: '/product/index',
        query: {
          // id: v.first_child_id,
          id: v.id,
          timestamp: Date.now()
        }
      });
    },
    handleScreenWidth(width) {
      this.screen_width = width;
    },
    prevSolutionBtn () {
      this.$refs.mySolutionSwiper.$swiper.slidePrev();
    },
    nextSolutionBtn () {
      this.$refs.mySolutionSwiper.$swiper.slideNext();
    },
    prevProductBtn () {
      this.$refs.myProductSwiper.$swiper.slidePrev();
    },
    nextProductBtn () {
      this.$refs.myProductSwiper.$swiper.slideNext();
    },
    onSolutionSlideChange () {
      this.activeSolutionIndex = this.$refs.mySolutionSwiper.$swiper.activeIndex;
      const isEnd = this.$refs.mySolutionSwiper.$swiper.isEnd;

      if (isEnd) {
        this.reach_solution_end = true;
      } else {
        this.reach_solution_end = false;
      }
    },
    onProductSlideChange () {
      this.activeProductIndex = this.$refs.myProductSwiper.$swiper.activeIndex;
      const isEnd = this.$refs.myProductSwiper.$swiper.isEnd;

      if (isEnd) {
        this.reach_product_end = true;
      } else {
        this.reach_product_end = false;
      }
    },
  },
}
</script>

<style lang="less">
.hager-container {
  .box-n {
    background-color: #fff;
    padding: 2rem 0;
  }
  .box-2n {
    background-color: #f1f1f1;
    padding: 2rem 0;
  }
  .hager-global {
    padding: 2rem 0;
    .hager-global-info-fold {
      p {
        line-height: 2;
        span.strong {
          color: @primary-color;
        }
        i {
          color: #F56400;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    .hager-global-info {
      display: flex;
      justify-content: space-between;
      padding: 2rem;
      align-items: center;
      text-align: center;
      &.xs {
        flex-direction: column;
        .hager-global-info-item {
          margin-bottom: 1rem;
          .num {
            font-size: 6vw;
            span {
              font-size: 8vw;
            }
          }
          .text-cn {
            font-size: 4vw;
          }
          .text {
            font-size: 3vw;
          }
        }
      }
      .hager-global-info-item {
        .num {
          color: @secondary-color;
          font-size: 1.5vw;
          font-weight: bold;
          span {
            font-size: 3vw;
          }
        }
        .text-cn {
          line-height: 1.8;
        }
        .text {
          line-height: 1.8;
          font-size: 0.9vw;
        }
      }
    }
  }
  .hager-solution {
    margin-top: 2rem;
  }
  .solution-item {
    position: relative;
    height: 12rem;
    padding: 1.5rem;
    text-align: center;
    color: #FFF;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out;
    margin-bottom: 1rem;
    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }
    &.other {
      display: flex;
      background-color: #e0f7ff; /* 特殊的样式 */
      color: @secondary-color;
      // font-weight: bold;
      // line-height: 8rem;
      background-image: none;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      p {
        position: relative;
        background-color: #e0f7ff;
      }
    }
    p {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2rem;
      background-color: rgba(0, 0, 0, 0.2);
      line-height: 2rem;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    &.xs {
      padding: 0;
      margin-top: 1rem;
    }
  }
  .xs-control {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    i {
      font-size: 1.35rem;
      color: #EE6D10;
      &:hover {
        cursor: pointer;
      }
      &.disabled {
        color: #ccc;
      }
    }
  }
  .news-container {
    margin-top: 2rem;
    &.xs {
      margin: 0;
    }
    .news-item-img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      object-fit: cover;
      &.xs {
        border-radius: 0;
      }
    }
    .news-item {
      padding: 3rem;
      &.xs {
        padding: 2rem;
      }
      .news-item-title {
        font-weight: bold;
        font-size: 1.35rem;
        color: @secondary-color;
        white-space: nowrap;        /* 不换行 */
        overflow: hidden;           /* 隐藏超出部分 */
        text-overflow: ellipsis;    /* 用省略号表示被截断的部分 */
      }
      .news-item-sub {
        color: @primary-color;
        margin-top: 0.25rem;
        line-height: 1.5em;
        overflow: hidden;
        word-break: break-word;
      }
      .news-item-content {
        margin: 2rem 0;
        color: @text-color;
        line-height: 1.5em;
        overflow: hidden;
        word-break: break-word;
      }
      .news-item-more {
        border: 0.08rem solid #F56400;
        color: #F56400;
        background-color: #FFF;
        padding: 0.5rem 1rem;
        width: 5rem;
        text-align: center;
        font-size: 0.8rem;
        transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
        &:hover {
          color: #FFF;
          background-color: #F56400;
          cursor: pointer;
        }
      }
      // i {
      //   color: @primary-color;
      //   font-size: 1.5rem;
      // }
    }
  }

  .hager-product-center {
    margin-top: 2rem;
    // display: grid;
    // grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
    // gap: 1.5rem; /* 每个项目之间的间距 */
    // &.xs {
    //   display: flex;
    //   overflow: hidden; /* 超出部分隐藏 */
    //   width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
    //   gap: 1rem;
    // }
  }
  .product-item {
    height: auto;
    padding: 1.5rem;
    text-align: center;
    color: #333;
    border-radius: 8px;
    background-color: #f3f3f3;
    overflow: hidden;
    &:hover {
      color: #F56400;
      cursor: pointer;
      // transform: scale(1.05);
      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    &.xs {
      // flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
      // padding: 0 20px;
      // box-sizing: border-box;
      margin-top: 1rem;
      // padding-bottom: 0.25rem;
      padding: 0.1rem;
    }
    .img {
      height: 14rem;
      background-size: cover;      /* 相当于 object-fit: cover */
      background-position: center; /* 让图片居中 */
      background-repeat: no-repeat;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      transition: transform 0.3s ease-in-out;
      &:hover {
        // cursor: pointer;
        transform: scale(1.05);
        // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    }
  }

  .hager-product-center-more {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    &.xs {
      justify-content: flex-end;
      padding-left: 20%;
      margin-top: 0;
    }
  }
}
</style>