<!--
 * @Date: 2024-09-29 15:49:27
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-21 14:43:11
 * @FilePath: /hager/src/views/solution/detail.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-solution-detail">
    <hager-box class="top-img" :style="{ height: top_img_height, backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png)' }">
      <div v-if="!is_xs" class="banner-text-wrapper top-center">
        <div class="text">
          <p class="title">学校解决方案</p>
          <p class="sub">Campus Solution</p>
        </div>
        <div class="text-sub">
          海格用丰富的行业知识和应用经验，为多个行业提供先进的数字化解决方案。
        </div>
      </div>
    </hager-box>
    <hager-box v-if="!is_xs" class="box-n">
      <el-row :gutter="0">
        <el-col :span="12" style="height: 25rem;">
          <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
            <el-carousel-item v-for="(item, index) in banner_list" :key="index" class="carousel-img">
              <el-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="12" class="brief-introduction">
          <div class="intro-box">
            <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
            <p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
            <i class="el-icon-right"></i>
          </div>
        </el-col>
      </el-row>
    </hager-box>
    <div v-else>
      <div style="height: 25rem; margin-top: 2rem;">
        <el-carousel height="25rem" :interval="8000" style="border-radius: 5px;">
          <el-carousel-item v-for="(item, index) in banner_list" :key="index" class="carousel-img">
            <el-image @click="onClickImg(item.src)" style="width: 100%; height: 100%;" fit="fill" :src="item.src"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="brief-introduction xs">
        <div class="intro-box xs">
          <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
          <p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
          <i class="el-icon-right"></i>
        </div>
      </div>
    </div>
    <hager-box class="box-2n">
      <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
      <div v-if="!is_xs">
        <div class="hager-success-cases">
          <div class="card" v-for="(item, index) in success_data_list" :key="index">
            <img :src="item.img" alt="学校图片" class="card-image">
            <div class="card-content">
              <h3>{{ item.title }}</h3>
              <p>{{ item.sub }}</p>
              <i class="el-icon-right"></i>
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 2rem;">
          <hager-more></hager-more>
        </div>
      </div>
      <div v-else>
        <swiper ref="mySuccessSwiper" class="swiper" :options="swiperOption" @slideChange="onSuccessSlideChange">
          <swiper-slide v-for="(item, index) in success_data_list" :key="index">
            <div class="hager-success-cases xs">
              <div class="card">
                <img :src="item.img" alt="学校图片" class="card-image">
                <div class="card-content">
                  <h3>{{ item.title }}</h3>
                  <p class="clamp-text">{{ item.sub }}</p>
                  <i class="el-icon-right"></i>
                </div>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div v-if="success_data_list.length > SuccessSlidesPerView || is_xs" class="hager-product-center-more xs">
          <hager-more></hager-more>
          <div class="xs-control">
            <div>
              <i :class="['el-icon-arrow-left', activeSuccessIndex === 0 ? 'disabled' : '']" @click="prevSuccessBtn()"></i>
              <i :class="['el-icon-arrow-right', reach_success_end ? 'disabled' : '']" @click="nextSuccessBtn()"></i>
            </div>
          </div>
        </div>
      </div>
    </hager-box>
    <hager-box class="box-n">
      <hager-h1 title="使用产品" sub="Products" style="margin: 2rem 0;"></hager-h1>
      <swiper ref="myProductSwiper" class="swiper" :options="swiperOption" @slideChange="onProductSlideChange">
        <swiper-slide v-for="(item, index) in product_list" :key="index">
          <div class="card-box" @click="goToProduct(item)">
            <div class="card-image-wrapper">
              <!-- <el-image :src="item.src" fit="fit"></el-image> -->
              <img :src="item.src" style="">
            </div>
            <p class="card-title">{{ item.title }}</p>
          </div>
        </swiper-slide>
      </swiper>
      <div v-if="product_list.length > productSlidesPerView || is_xs" class="hager-product-center-more">
        <!-- <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>
    </hager-box>
    <hager-service style="background-color: #f1f1f1;"></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 hagerHCarousel from '@/components/hagerHCarousel.vue';
import hagerService from '@/components/common/hagerService.vue';
import $ from 'jquery';

export default {
  components: { hagerBox, hagerH1, hagerMore, hagerHCarousel, hagerService },
  mixins: [mixin.init],
  data () {
    return {
      banner_list: [
        {
          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          url: ''
        },
        {
          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          url: ''
        }
      ],
      success_data_list: [{
        title: '厦门翔城中小学',
        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
      }, {
        title: '厦门翔城中小学',
        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
      }, {
        title: '厦门翔城中小学',
        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
      }, {
        title: '厦门翔城中小学',
        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
      }, {
        title: '厦门翔城中小学',
        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
      }, {
        title: '厦门翔城中小学',
        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
        img: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-135715@2x.png',
      }],
      product_list: [{
        src: 'https://cdn.ipadbiz.cn/hager/img/KNX%E6%99%BA%E8%83%BD%E6%8E%A7%E5%88%B6%E6%A8%A1%E5%9D%97@2x.png',
        title: 'hw01 空气断路器'
      }, {
        src: 'https://cdn.ipadbiz.cn/hager/img/ats%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E5%BC%80%E5%85%B3@2x.png',
        title: 'h3+ 智能塑壳断路器'
      }, {
        src: 'https://cdn.ipadbiz.cn/hager/img/h3+%20%E6%99%BA%E8%83%BD%E5%A1%91%E5%A3%B3%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
        title: 'ats自动转换开关'
      }, {
        src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
        title: 'KNX智能控制模块'
      }, {
        src: 'https://cdn.ipadbiz.cn/hager/img/hw+%20%E7%A9%BA%E6%B0%94%E6%96%AD%E8%B7%AF%E5%99%A8@2x.png',
        title: 'KNX智能控制模块'
      }],
      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
          }
        }
      },
      activeSuccessIndex: 0,
      activeProductIndex: 0,
      reach_success_end: false,
      reach_product_end: false,
      SuccessSlidesPerView: 4,
      productSlidesPerView: 4,
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
        // breakpoint时 显示的条数
        this.productSlidesPerView = swiper.slidesPerView
      });

      function clampText(element, lines) {
        var $element = $(element);
        var lineHeight = parseFloat($element.css('line-height')); // 获取行高
        var maxHeight = lineHeight * lines; // 计算三行的最大高度

        // 如果内容高度超过三行，进行截断
        if ($element.height() > maxHeight) {
          var originalText = $element.text(); // 获取原始文本
          var truncatedText = originalText;

          // 逐字截断文本，直到高度小于或等于三行
          while ($element.height() > maxHeight) {
            truncatedText = truncatedText.slice(0, -1); // 每次去掉最后一个字符
            $element.text(truncatedText + '...'); // 添加省略号
          }
        }
      }

      clampText('.clamp-text', 3); // 限制显示三行文本
    });
  },
  methods: {
    onClickImg (item) {
      window.open(item, '_blank');
    },
    goToProduct (v) {
      this.$router.push({
        path: '/product/detail'
      });
    },
    prevProductBtn () {
      this.$refs.myProductSwiper.$swiper.slidePrev();
    },
    nextSuccessBtn () {
      this.$refs.mySuccessSwiper.$swiper.slideNext();
    },
    prevSuccessBtn () {
      this.$refs.mySuccessSwiper.$swiper.slidePrev();
    },
    nextProductBtn () {
      this.$refs.myProductSwiper.$swiper.slideNext();
    },
    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;
      }
    },
    onSuccessSlideChange () {
      this.activeSuccessIndex = this.$refs.mySuccessSwiper.$swiper.activeIndex;
      const isEnd = this.$refs.mySuccessSwiper.$swiper.isEnd;
      console.warn(isEnd);

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

<style lang="less" scoped>
.hager-solution-detail {
  .top-img {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    .top-center {
      position: absolute;
      transform: translateY(100%); /* 垂直与水平居中 */
    }
  }
  .carousel-img {
    &:hover {
      cursor: zoom-in;
    }
  }
  .brief-introduction {
    background-color: #FFF;
    height: 25rem;
    &.xs {
      height: auto;
    }
    .intro-box {
      padding: 3rem;
      &.xs {
        padding: 2rem;
      }
      i {
        color: @primary-color;
        font-size: 1.5rem;
      }
    }
  }
  .hager-success-cases {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 确保子元素之间的空间被均匀分配 */
    &.xs {
      display: block;
    }
    .card {
      flex: 0 0 32.33%; /* 宽度为 1/3 */
      margin-bottom: 1rem; /* 在元素之间添加间距 */
      box-sizing: border-box; /* 防止 padding 或 margin 影响宽度 */
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      background-color: #fff;
      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-image {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

      .card-content {
        padding: 1rem 1.5rem;
        h3 {
          color: @secondary-color;
          font-size: 1.25rem;
          margin: 0;
          margin-bottom: 0.5rem;
        }
        p {
          font-size: 0.95rem;
          line-height: 1.8;
        }
        i {
          margin-top: 1rem;
          color: @primary-color;
          font-size: 1.5rem;
        }
      }

      .card p {
        font-size: 14px;
        color: #333;
        line-height: 1.6;
        margin-bottom: 15px;
      }
    }
  }

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

  .card-box {
    .card-image-wrapper {
      background-color: #F3F3F3;
      border-radius: 5px;
      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;
      }
      img {
        width: 14rem;
        margin-left: calc((100% - 14rem) / 2);
        height: auto;
      }
    }
    .card-title {
      color: @text-color;
      font-weight: bold;
      margin: 1rem 0;
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}
</style>