<template>
  <div class="hager-solution-index">
    <el-image :style="{ width: '100%', height: top_img_height }" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
    <hager-box class="box-n">
      <hager-h1 title="行业解决方案" sub="Industry Solutions" style="margin: 2rem 0;"></hager-h1>
      <div> 海格电气产品已广泛应用于电子产品制造业，为其供配电系统稳定、可靠的运行提供可靠保障。 </div>
      <div v-if="!is_xs" class="hager-industry-solutions">
        <div @click="goToSolution(item)" class="card" v-for="(item, index) in solution_list" :key="index">
          <img :src="item.src" alt="学校图片" class="card-image">
          <div class="card-content">
            <div class="card-title" style="">
              <span>{{ item.title }}</span>
              <i class="el-icon-right"></i>
            </div>
            <p class="card-sub">{{ item.sub }}</p>
          </div>
        </div>
      </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.src" alt="学校图片" class="card-image">
              <div class="card-content">
                <div class="card-title">
                  <span>{{ item.title }}</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>
    </hager-box>
    <hager-box v-if="!is_xs" class="box-2n">
      <hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
      <div style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;">
        <div>
          <div>快速</div>
          <div>
            <p>7x24小时全天实时在线</p>
            <p>全国32个城市办事处</p>
            <p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
          </div>
        </div>
        <div>
          <div>专业</div>
          <div>
            <p>全由海格技术人员组成，提供专业技术服务
            拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
          </div>
        </div>
        <div>
          <div>增值</div>
          <div>
            <p>为客户提供定制化服务，充分满足客户需求
            针对客户需求提供过保产品保养及维修服务
            针对现有产品（改造/升级/退市及一定使用
            年限）提出替换/升级方案并实施完成</p>
          </div>
        </div>
      </div>
    </hager-box>
    <div v-else style="padding: 1rem;">
      <hager-h1 title="我们的服务" sub="Service Advantage" style="margin: 2rem 0;"></hager-h1>
      <div>
        <div>快速</div>
        <div>
          <p>7x24小时全天实时在线</p>
          <p>全国32个城市办事处</p>
          <p>快速响应机制：承诺2小时内与客户达成沟通，必要时24小时内到场处理</p>
        </div>
      </div>
      <div>
        <div>专业</div>
        <div>
          <p>全由海格技术人员组成，提供专业技术服务
          拥有60余年专业经验，服务于整个项目周期服务多样化，包含且不限于邮件、电话、微信群，现场拜访交流、小型推广会等；</p>
        </div>
      </div>
      <div>
        <div>增值</div>
        <div>
          <p>为客户提供定制化服务，充分满足客户需求
          针对客户需求提供过保产品保养及维修服务
          针对现有产品（改造/升级/退市及一定使用
          年限）提出替换/升级方案并实施完成</p>
        </div>
      </div>
    </div>
  </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';

export default {
  components: { hagerBox, hagerH1, hagerMore },
  mixins: [mixin.init],
  data () {
    return {
      solution_list: [{
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '1住宅解决方案',
        sub: 'Residential Solution Case'
      }, {
        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        title: '2住宅解决方案',
        sub: 'Residential Solution Case'
      }, {
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '3住宅解决方案',
        sub: 'Residential Solution Case'
      }, {
        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        title: '4住宅解决方案',
        sub: 'Residential Solution Case'
      }, {
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '1住宅解决方案',
        sub: 'Residential Solution Case'
      }, {
        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        title: '2住宅解决方案',
        sub: 'Residential Solution Case'
      }, {
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '3住宅解决方案',
        sub: 'Residential Solution Case'
      }, {
        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        title: '4住宅解决方案',
        sub: 'Residential Solution Case'
      }],
      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,
    }
  },
  mounted () {

  },
  methods: {
    goToSolution (v) {
      this.$router.push({
        path: '/solution/detail',
        query: {
          id: v.id
        }
      });
    },
    prevSolutionBtn () {
      this.$refs.mySolutionSwiper.$swiper.slidePrev();
    },
    nextSolutionBtn () {
      this.$refs.mySolutionSwiper.$swiper.slideNext();
    },
    onSlideChange (swiper) {
      this.activeIndex = swiper.activeIndex;
      const isEnd = swiper.isEnd;

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

<style lang="less" scoped>
.hager-solution-index {
  .hager-industry-solutions {
    margin: 2rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
    gap: 1.5rem; /* 每个项目之间的间距 */
    .case-item {
      position: relative;
      height: 12rem;
      padding: 1.5rem;
      text-align: center;
      color: #FFF;
      border-radius: 8px;
      // background-image: url('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
      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: #fff;
    margin: 0;
    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: 12rem;
      object-fit: cover;
    }

    .card-content {
      padding: 15px;
      .card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1rem;
        color: #0072c6;
        margin-bottom: 10px;
      }
      .card-sub {
        font-size: 0.85rem;
        color: #333;
        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>