<template>
  <div class="hager-solution-index">
    <hager-box v-if="!is_xs" :style="{backgroundColor: '#F5F6FB', height: !is_xs ? solution_box_height : solution_mini_height }">
      <div class="hager-solution-top">
        <el-row :gutter="20" style="display: flex;">
          <el-col :span="8">
            <div class="banner-text-wrapper">
              <div class="text">
                <span class="title">解决方案</span>&nbsp;<span class="sub">Solution</span>
              </div>
              <div class="text-sub" style="font-size: 1.2rem;">
                海格电气用丰富的行业知识和应用经验，<br/>为多个行业提供智能低压配电解决方案和智能楼宇解决方案。
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <img :style="{ height: solution_box_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png">
          </el-col>
        </el-row>
      </div>
      <!-- <img v-else :style="{ height: solution_mini_height, width: '100%' }" src="https://cdn.ipadbiz.cn/hager/banner/01.png"> -->
    </hager-box>
    <hager-box :class="[!is_xs ? 'box-n' : '']">
      <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0 1rem;"></hager-h1>
      <div>海格电气为建筑，能源，工业，基础设施等行业提供安全、稳定、可靠、智能的低压配电解决方案及KNX智能楼宇解决方案。</div>
      <div v-if="!is_xs" class="hager-industry-solutions">
        <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="card">
              <img :src="x.cover" class="card-image">
              <div class="card-content">
                <div class="card-title">
                  <span>{{ x.category_name }}</span>
                  <i class="el-icon-right" style="color: #00ABE5;"></i>
                </div>
                <p class="card-sub">{{ x.sub }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else style="margin: 1rem 0;">
        <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange()">
          <swiper-slide v-for="(item, index) in solution_list" :key="index">
            <div @click="goToSolution(item)" class="card" style="margin-bottom: 1rem;">
              <img :src="item.cover" alt="学校图片" class="card-image">
              <div class="card-content xs">
                <div class="card-title-xs">
                  <span>{{ item.category_name }}</span>
                  <!-- <i class="el-icon-right"></i> -->
                </div>
                <p class="card-sub">{{ item.sub }}</p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="xs-control">
          <div>
            <i :class="['el-icon-arrow-left', activeIndex === 0 ? 'disabled' : '']" @click="prevSolutionBtn()"></i>
            <i :class="['el-icon-arrow-right', reach_end ? 'disabled' : '']" @click="nextSolutionBtn()"></i>
          </div>
        </div>
      </div>
      <!-- <div class="more-box" style="margin-top: 2rem;">
        <hager-more></hager-more>
      </div> -->
    </hager-box>
    <hager-service></hager-service>
  </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 hagerService from '@/components/common/hagerService.vue';
import { getSolutionListAPI } from "@/api/hager.js";
import $ from 'jquery';

export default {
  components: { hagerBox, hagerH1, hagerMore, hagerService },
  mixins: [mixin.init],
  data () {
    return {
      solution_list: [],
      swiperOption: {
        slidesPerView: 2,
        spaceBetween: 50,
        preventClicks : true,
        slideToClickedSlide: false,
        touchRatio: 0,
        breakpoints: {
          1024: {
            slidesPerView: 4,
            spaceBetween: 40
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 30
          },
          640: {
            slidesPerView: 2,
            spaceBetween: 20
          },
          320: {
            slidesPerView: 2,
            spaceBetween: 10
          },
          160: {
            slidesPerView: 1,
            spaceBetween: 0
          }
        }
      },
      activeIndex: 0,
      reach_end: false,
      solution_box_height: '25rem',
      solution_mini_height: '25rem',
    }
  },
  async mounted () {
    const { code, data } = await getSolutionListAPI();
    if (code) {
      this.solution_list = data;
    }
    this.$nextTick(() => {
      // 高度监听
      // this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.255 + 'px';
      // this.solution_mini_height = $(window).outerWidth() * 0.55 + 'px';
      // 动态计算图片高度
      let img_width = $('.card-image').outerWidth();
      $('.card-image').css('height', img_width * 0.7 + 'px');
    });
    window.addEventListener('resize', this.handleHeightResize);
  },
  beforeDestroy() {
    // 在组件销毁前移除监听器，防止内存泄漏
    window.removeEventListener('resize', this.handleHeightResize);
  },
  methods: {
    handleHeightResize () {
      // 高度监听
      // this.solution_box_height = $('.hager-solution-top').outerWidth() * 0.255 + 'px';
      // this.solution_mini_height = $('.hager-solution-top').outerWidth() * 0.6 + 'px';
      // 动态计算图片高度
      let img_width = $('.card-image').outerWidth();
      $('.card-image').css('height', img_width * 0.7 + 'px');
    },
    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);
      }

      return result;
    },
    goToSolution (v) {
      this.$router.push({
        path: `/solution/detail/${v.id}/${Date.now()}`,
      });
    },
    prevSolutionBtn () {
      this.$refs.mySolutionSwiper.$swiper.slidePrev();
    },
    nextSolutionBtn () {
      this.$refs.mySolutionSwiper.$swiper.slideNext();
    },
    onSlideChange () {
      this.activeIndex = this.$refs.mySolutionSwiper.$swiper.activeIndex;
      const isEnd = this.$refs.mySolutionSwiper.$swiper.isEnd;

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

<style lang="less" scoped>
.hager-solution-index {
  .hager-solution-top {
    width: 100%;
    .banner-text-wrapper {
      height: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    img {
      width: 100%;
      max-width: 100%; /* 防止宽度超出容器 */
      object-fit: cover; /* 保持图片内容的完整性，可以根据需求调整为 cover 或 contain */
    }
  }
  .hager-industry-solutions {
    margin: 2rem 0;
    .case-item {
      position: relative;
      height: 12rem;
      padding: 1.5rem;
      text-align: center;
      color: #FFF;
      border-radius: 8px;
      background-size: cover;
      background-position: top center;
      transition: transform 0.3s ease-in-out;
      &:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
      }
    }
  }
  .card {
    // width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #F3F3F3;
    margin: 0;
    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;
    }
    .card-image {
      width: 100%;
      height: 12rem;
      object-fit: cover;
    }

    .card-content {
      padding: 15px;
      &.xs {
        padding-bottom: 0;
      }
      .card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1rem;
        color: @secondary-color;
        margin-bottom: 10px;
        font-weight: bold;
        span {
          white-space: nowrap;        /* 不换行 */
          overflow: hidden;           /* 隐藏超出部分 */
          text-overflow: ellipsis;    /* 用省略号表示被截断的部分 */
        }
      }
      .card-title-xs {
        font-size: 1rem;
        color: @secondary-color;
        font-weight: bold;
        span {
          min-height: calc(2 * 1.5em); /* 假设行高为 1.5em */
          line-height: 1.5em;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 显示两行 */
          overflow: hidden;
        }
      }
      .card-sub {
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 15px;
      }
    }
  }

  .xs-control {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    margin-bottom: 1rem;
    i {
      font-size: 1.35rem;
      color: #EE6D10;
      &:hover {
        cursor: pointer;
      }
      &.disabled {
        color: #ccc;
      }
    }
  }
}
</style>