<!--
 * @Date: 2024-09-26 13:42:11
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-30 11:34:14
 * @FilePath: /hager/src/components/common/hagerHeader.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-header">
    <el-row class="hidden-xs-only" style="background-color: #fff;">
      <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
      <el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;">
        <el-row style="">
          <el-col :sm="16" :md="16" :lg="16" :xl="16">
            <div class="nav-wrapper">
              <div>图标</div>
              <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct">产品中心</div>
              <div :class="[is_active === 'solution' ? 'active' : '', 'item']" @click="goTo('/solution/index')">解决方案</div>
              <div :class="[is_active === '新闻中心' ? 'active' : '', 'item']">新闻中心</div>
              <div :class="[is_active === '招聘信息' ? 'active' : '', 'item']">招聘信息</div>
              <div :class="[is_active === '关于海格' ? 'active' : '', 'item']">关于海格</div>
              <div :class="[is_active === '联系我们' ? 'active' : '', 'item']">联系我们</div>
              <div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div>
            </div>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8" :xl="8">
            <div style="display: flex; height: 5rem; align-items: center;justify-content: right;">
              <div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid #f5f5f5;  background-color: #e3f1f7; padding: 0.5rem 1rem;">
                <i class=el-icon-zoom-out></i>&nbsp;
                <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
              </div>
              <div style="margin: 0 1rem;"><i class=el-icon-eleme></i></div>
              <div><i class=el-icon-eleme></i></div>
            </div>
          </el-col>
        </el-row>
        <el-collapse-transition>
          <div v-show="show" class="product-center">
            <div style="display: flex; width: 100%;">
              <div class="product-left-wrapper">
                <div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
                  <div style="display: flex; align-items: center;">
                    <el-image style="width: 2rem; height: 2rem" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
                    &nbsp;
                    {{ item.name }}
                  </div>
                  <div>
                    <i class="el-icon-right"></i>
                  </div>
                </div>
              </div>
              <div class="product-right-wrapper">
                <div class="product-right-title">
                  <div class="text">{{ product_info.name }}</div>
                  <div @click="closeMenu"><i class="el-icon-close" style="font-size: 1.25rem;"></i></div>
                </div>
                <div class="product-right-desc">{{ product_info.desc }}</div>
                <div class="product-right-center">
                  <div v-for="(item, index) in product_info.product" :key="index" class="product-right-center-item">
                    <div @click="goToC(item)" class="header-text">{{ item.name }}&nbsp;</div>
                    <div>
                      <div class="item-text" @click="goToP(item)" v-for="(p, idx) in item.list" :key="idx">{{ p.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </el-col>
      <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
    </el-row>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import { parseQueryString } from '@/utils/tools';

export default {
  mixins: [mixin.init],
  data () {
    return {
      show: false,
      test1: true,
      product_menu: [{
        name: '配电产品',
        info: {
          name: '配电产品',
          desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
          product: [
            {
              name: '空气断路器',
              list: [{
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }]
            },
            {
              name: '空气断路器',
              list: [{
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }]
            },
            {
              name: '空气断路器',
              list: [{
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }]
            },
            {
              name: '空气断路器',
              list: [{
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }, {
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }, {
                id: '',
                name: 'HW系列空气断路器'
              }]
            },
            {
              name: '空气断路器',
              list: [{
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }]
            },
            {
              name: '空气断路器',
              list: [{
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }]
            },
            {
              name: '空气断路器',
              list: [{
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }, {
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }, {
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }, {
                id: '',
                name: 'HW系列空气断路器'
              }, {
                id: '',
                name: 'HW+系列空气断路器'
              }, {
                id: '',
                name: 'HW系列空气断路器'
              }]
            },
          ]
        }
      }, {
        name: '成套产品',
        info: {
          name: '成套产品',
          desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
          product: []
        }
      }, {
        name: '开关面板',
        info: {
          name: '开关面板',
          desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
          product: []
        }
      }, {
        name: '智能控制',
        info: {
          name: '智能控制',
          desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
          product: []
        }
      }],
      product_info: {},
      is_active: '',
      p_index: 0,
    }
  },
  mounted () {
    this.product_info = this.product_menu[0]['info'];
    // 修改数据结构显示
    this.product_info.product = this.splitProductList(this.product_info.product)
  },
  watch: {
    '$route' (to, from) {
      this.is_active = to.meta.tag;
    }
  },
  methods: {
    splitProductList (products) {
      const maxLength = 5; // 超过5个需要拆分
      let result = [];

      products.forEach(product => {
        // 如果 list 长度不超过 5，则直接加入 result
        if (product.list.length <= maxLength) {
          result.push(product);
        } else {
          // 如果 list 长度超过 5，则拆分
          let listChunks = [];
          for (let i = 0; i < product.list.length; i += maxLength) {
            listChunks.push(product.list.slice(i, i + maxLength));
          }

          // 第一个块保留原有的 name，后续块 name 设为空
          listChunks.forEach((chunk, index) => {
            if (index === 0) {
              result.push({
                name: product.name,
                list: chunk
              });
            } else {
              result.push({
                name: '',
                list: chunk
              });
            }
          });
        }
      });

      return result;
    },
    onClickProduct() {
      // 当鼠标悬停时
      this.show = true;
    },
    onClick (item, index) {
      this.product_info = item.info;
      this.p_index = index
    },
    closeMenu () {
      this.show = false;
    },
    goTo (path) { // 跳转页面
      if (this.$route.path !== path) { // 不能重复点击当前页面
        this.$router.push({
          path,
        });
      }
    },
    goToC (item) { // 跳转产品二级
      this.$router.push({
        path: '/product/index',
        query: {
          // id: id
        }
      });
      this.closeMenu();
    },
    goToP (item) { // 跳转产品详情
      this.$router.push({
        path: '/product/detail',
        query: {
          // id: id
        }
      });
      this.closeMenu();
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    .product-center {
      position: absolute;
      top: 5rem;
      left: 0;
      width: 100%;
      height: auto;
      background-color: #fff;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      .product-left-wrapper {
        flex-basis: 33.33%;
        padding: 1rem;
        &:hover {
          cursor: pointer;
        }
        .product-left-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 1rem;
          &.active {
            background-color: @background-color;
            border-radius: 5px;
          }
          i {
            color: @primary-color;
          }
        }
      }
      .product-right-wrapper {
        flex-basis: 66.67%;
        background-color: @background-color;
        padding: 1.75rem 1.5rem;
        .product-right-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.25rem;
          .text {
            font-size: 1.25rem;
            color: @text-color;
            font-weight: bold;
          }
          i {
            &:hover {
              cursor: pointer;
            }
          }
        }
        .product-right-desc {
          margin-bottom: 1.5rem;
          color: @secondary-text-color;
        }
        .product-right-center {
          display: flex;
          flex-wrap: wrap;
          // justify-content: space-between;
          .product-right-center-item {
            flex-basis: calc(33.33%);
            margin-bottom: 10px;
            .header-text {
              margin-bottom: 0.25rem;
              color: @text-color;
              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }
            .item-text {
              line-height: 1.75;
              color: @secondary-text-color;
              &:hover {
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    .nav-wrapper {
      display: flex;
      height: 5rem;
      align-items: center;
      justify-content: space-around;
      .item {
        color: @secondary-color;
        &:hover {
          cursor: pointer;
        }
      }
      .active {
        color: @primary-color;
      }
    }
  }
</style>