<!--
 * @Date: 2024-08-27 10:06:30
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-09 16:42:27
 * @FilePath: /hager/src/views/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-container">
    <el-carousel :height="top_img_height" :interval="8000">
      <el-carousel-item v-for="item in 4" :key="item">
        <el-image style="width: 100%; height: 100%;" fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
      </el-carousel-item>
    </el-carousel>
    <hager-box class="box-n">
      <hager-h1 title="海格全球" sub="Hager Global"></hager-h1>
      <div class="hager-global">
        <p>海格集团是全球领先的电气及智能化鲜决方案和服务提供商，应用领域涵盖住宅，商业建筑，公共建筑和工业。</p>
        <p>海格申气品牌代表了集闭的核心业务，蜀盖配电系统。申缆管理系统。KNX 智能榕制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有 7 E3 / DC</p>
        <p>海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术，能源效率、生活辅助系统，电动交通、
        可再生能源。配电系统是这盛技术得以实现的中枢。也是伴随我们成长的其础产品</p>
        <div class="hager-global-info">
          <div class="hager-global-info-item">
            <p class="num"><span>32</span>亿</p>
            <p class="text">2023年销售额32亿欧元</p>
            <p class="text">Sales ot 3.2 billion  2023</p>
          </div>
          <div class="hager-global-info-item">
            <p class="num"><span>32</span>亿</p>
            <p class="text">2023年销售额32亿欧元</p>
            <p class="text">Sales ot 3.2 billion  2023</p>
          </div>
          <div class="hager-global-info-item">
            <p class="num"><span>32</span>亿</p>
            <p class="text">2023年销售额32亿欧元</p>
            <p class="text">Sales ot 3.2 billion  2023</p>
          </div>
          <div class="hager-global-info-item">
            <p class="num"><span>32</span>亿</p>
            <p class="text">2023年销售额32亿欧元</p>
            <p class="text">Sales ot 3.2 billion  2023</p>
          </div>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 1rem;">
          <hager-more></hager-more>
        </div>
      </div>
    </hager-box>
    <hager-box class="box-2n" @screen-width="handleScreenWidth">
      <hager-h1 title="解决方案" sub="Solution" :width="screen_width"></hager-h1>
      <div :class="['hager-solution', is_xs ? 'xs' : '']">
        <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.src+')' }" v-for="(item, index) in solution_list" :key="index"><p>{{ item.title }}</p></div>
        <div v-if="!is_xs" class="solution-item other">Other解决方案</div>
      </div>
      <div class="xs-control" v-if="is_xs">
        <div><i class="el-icon-arrow-left" @click="prevBtn"></i> <i class="el-icon-arrow-right" @click="nextBtn"></i></div>
      </div>
    </hager-box>
    <hager-box class="box-n">
      <hager-h1 title="产品中心" sub="Product Center"></hager-h1>
      <div class="hager-product-center">
        <div v-for="(item, index) in 4" :key="index" class="product-item">
          <el-image style="width: 14rem; height: 14rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
          <p style="margin-top: 1rem;">atS三型特决井天</p>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 2rem;">
        <hager-more></hager-more>
      </div>
    </hager-box>
    <hager-box 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="height: 25rem;">
            <img v-if="index % 2 === 0" :src="item.src" alt="News Image 1">
            <div v-else @click="goToNew(item)" class="news-item">
              <div class="news-item-title">{{ item.title }}</div>
              <p class="news-item-sub">{{ item.sub }}</p>
              <p class="news-item-content">{{ item.content }}</p>
              <i class="el-icon-right"></i>
            </div>
          </el-col>
          <el-col :span="12" style="background-color: #FFF; height: 25rem;">
            <div v-if="index % 2 === 0" @click="goToNew(item)" class="news-item">
              <div class="news-item-title">{{ item.title }}</div>
              <p class="news-item-sub">{{ item.sub }}</p>
              <p class="news-item-content">{{ item.content }}</p>
              <i class="el-icon-right"></i>
            </div>
            <img v-else :src="item.src" alt="News Image 1">
          </el-col>
        </el-row>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 2rem;">
        <hager-more></hager-more>
      </div>
    </hager-box>
    <hager-box class="box-n">
      <hager-h1 title="招聘信息" sub="Recruit"></hager-h1>
      <p style="margin: 2rem 0;">心国近心，支注万你。海恰人囫指员光工，然于則行！我们哦这音齐稱央那八我们附行列，共同书与成功的扁草。用你的才罕，刨道九限可能！</p>
      <div style="display: flex; justify-content: center; margin-top: 2rem;">
        <hager-more></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';

export default {
  mixins: [mixin.init],
  components: { hagerBox, hagerH1, hagerMore },
  data () {
    return {
      news_list: [{
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
      }, {
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
      }, {
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
      }],
      is_xs: false,
      screen_width: 0,
      solution_list: [{
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '1住宅解决方案'
      }, {
        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        title: '2住宅解决方案'
      }, {
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        title: '3住宅解决方案'
      }, {
        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        title: '4住宅解决方案'
      }]
    }
  },
  async mounted () {
    // const container = document.querySelector('.container');
    // const boxes = container.querySelectorAll('.box');

    // // 如果超过11个项目，设置最后一个为特殊样式
    // if (boxes.length > 11) {
    //   boxes[boxes.length - 1].classList.add('other');
    // }
  },
  watch: {
    // 监听$route对象的变化
    $route(to, from) {
      console.log('路由变化了：', to.path);
      // 在此处执行你想要的逻辑
    }
  },
  methods: {
    goToNew (v) {
      this.$router.push({
        path: '/news/detail'
      });
    },
    goToSolution (v) {
      this.$router.push({
        path: '/solution/detail'
      });
    },
    handleScreenWidth(width) {
      this.is_xs = width < 768;
      this.screen_width = width;
    },
    prevBtn () {
      const last = this.solution_list.pop(); // 移除最后一个元素
      this.solution_list.unshift(last); // 将最后一个元素添加到数组开头
    },
    nextBtn () {
      const first = this.solution_list.shift(); // 移除第一个元素
      this.solution_list.push(first); // 将第一个元素添加到数组末尾
    },
  },
}
</script>

<style lang="less">
.el-carousel__item .item {
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-carousel__indicator.is-active button {
  background-color: #EE6D10;
}

.hager-container {
  .box-n {
    background-color: #fff;
    padding: 2rem 0;
  }
  .box-2n {
    background-color: #f1f1f1;
    padding: 2rem 0;
  }
  .hager-global {
    padding: 2rem 0;
    p {
      line-height: 2;
    }
    .hager-global-info {
      display: flex;
      justify-content: space-between;
      padding: 2rem;
      align-items: center;
      text-align: center;
      .hager-global-info-item {
        .num {
          color: @primary-color;
          font-size: 1.5rem;
          font-weight: bold;
          span {
            font-size: 3rem;
          }
        }
      }
    }
  }
  .hager-solution {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一行显示4个 */
    gap: 1.5rem; /* 每个项目之间的间距 */
    &.xs {
      display: flex;
      overflow: hidden; /* 超出部分隐藏 */
      width: 100vw; /* 容器宽度适应屏幕 */
      gap: 1rem;
    }
    .solution-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: 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;
      }
      &.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.5rem;
      }
      p {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2rem;
        background-color: rgba(0, 0, 0, 0.2);
        line-height: 2rem;
      }
      &.xs {
        flex: 0 0 50vw; /* 每个子元素宽度为屏幕宽度的一半 (显示2个元素) */
        // padding: 0 20px;
        // box-sizing: border-box;
      }
    }
  }
  .xs-control {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    i {
      font-size: 1.35rem;
      color: #EE6D10;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .news-container {
    margin-top: 2rem;
    img {
      width: 100%; height: 100%; border-radius: 5px;object-fit: cover;
    }
    .news-item {
      padding: 3rem;
      &:hover {
        cursor: pointer;
      }
      .news-item-title {
        font-weight: bold;
        font-size: 1.35rem;
        color: @secondary-color;
        display: -webkit-box;        /* 结合其他属性进行多行文本处理 */
        -webkit-line-clamp: 1;       /* 设置显示的行数 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        overflow: hidden;            /* 超出部分隐藏 */
        text-overflow: ellipsis;     /* 使用省略号替代超出的文本 */
      }
      .news-item-sub {
        color: @primary-color;
        margin-top: 0.25rem;
      }
      .news-item-content {
        margin: 2rem 0;
      }
      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; /* 每个项目之间的间距 */
    .product-item {
      height: auto;
      padding: 1.5rem;
      text-align: center;
      color: #333;
      border-radius: 8px;
      background-color: #f3f3f3;
      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);
      }
    }
  }
}
</style>