<!--
 * @Date: 2024-09-26 13:42:11
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-15 16:53:54
 * @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="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
      <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
        <el-row>
          <el-col :sm="6" :md="6" :lg="6" :xl="6">
            <div class="nav-logo">
              <div>图标</div>
            </div>
          </el-col>
          <el-col :sm="10" :md="10" :lg="10" :xl="10">
            <el-row class="nav-right">
              <el-col :span="24">
                <div class="search">
                  <i class="el-icon-search" style="color: #00477E;"></i>&nbsp;
                  <input placeholder="搜索" />
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :sm="8" :md="8" :lg="8" :xl="8">
            <div class="nav-right" style="float: right;">
                <div @click="goToWeb" class="tooltip">
                  <el-tooltip class="item" effect="dark" content="国际站" placement="bottom">
                    <i class=el-icon-orange style="font-size: 1.25rem;"></i>
                  </el-tooltip>
                </div>
                <div @click="goToLogin" class="tooltip">
                  <el-tooltip class="item" effect="dark" content="用户登录" placement="bottom">
                    <i class=el-icon-user style="font-size: 1.25rem;"></i>
                  </el-tooltip>
                </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
    </el-row>
    <el-row class="hidden-xs-only" style="background-color: #fff; border-top: 1px solid rgba(218, 218, 218, 0.4);">
      <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
      <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
        <el-row>
          <el-col :sm="16" :md="16" :lg="16" :xl="16">
            <div class="nav-wrapper">
              <div :class="[is_active === 'product' ? 'active' : '', 'item']" @click="onClickProduct" @mouseenter="onClickProduct">
                <i class="el-icon-s-operation"></i>
                产品中心
              </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-row>
        <el-collapse-transition>
          <div v-show="show" class="product-center" v-click-outside="closeMenu">
            <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="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
    </el-row>
    <div v-if="is_xs" style="background-color: #fff; padding: 0.5rem 1rem;">
      <div style="display: flex; align-items: center;justify-content: space-between;">
        <div @click="openMenu"><i class="el-icon-menu"></i></div>
        <div>
          <el-image style="height: 2rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
        </div>
        <div>
          <i class=el-icon-orange style="font-size: 1.25rem;"></i>
          <i class=el-icon-user style="font-size: 1.25rem;"></i>
        </div>
      </div>
      <div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid #f5f5f5; background-color: #e3f1f7; padding: 0.5rem 1rem; margin-top: 1rem;">
        <i class=el-icon-search></i>&nbsp;
        <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
      </div>
      <el-collapse-transition>
        <div v-show="show_menu" class="menu-mini">
          <hager-menu @close="closeMiniMenu"></hager-menu>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import { parseQueryString } from '@/utils/tools';
import $ from 'jquery';
import hagerMenu from '../hagerMenu.vue';

export default {
  components: { hagerMenu },
  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,
      show_menu: false,
      margin_top: 0,
      // choose_country: false, // 主动选择了国家地区
    }
  },
  mounted () {
    //
    // let margin_top = 5; // 默认高度
    // let once_header_height = 5; // 选择国家地区高度
    // // let hidden_header_height = 2; // 可隐藏高度s
    // if (this.choose_country) { // 没有点击国家地区
    //   margin_top += once_header_height;
    // }
    // this.$nextTick(() => {
    //   $('.wrapper').css('marginTop', margin_top + 'rem');
    // })
    // 监听屏幕滚动
    // $('.wrapper').css('marginTop', margin_top + hidden_header_height + 'rem');
    // window.addEventListener('scroll', (evt) => {
    //   if ($(window).scrollTop()) {
    //     $('.header-top').css('height', 0);
    //     $('.wrapper').css('marginTop', margin_top - hidden_header_height + 'rem');
    //   } else {
    //     $('.header-top').css('height', '2rem');
    //     $('.wrapper').css('marginTop', margin_top + hidden_header_height + 'rem');
    //   }
    // });
    //
    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;
      this.show = false;
    }
  },
  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();
    },
    goToWeb () {
      console.warn('暂无跳转');
    },
    goToLogin () {
      this.$router.push({
        path: '/login'
      });
    },
    openMenu () {
      this.show_menu = !this.show_menu;
      if (this.show_menu) {
        $('body').css('overflow', 'hidden');
      } else {
        $('body').css('overflow', 'auto');
      }
    },
    closeMiniMenu () {
      this.show_menu = false;
      $('body').css('overflow', 'auto');
    },
  }
}
</script>

<style lang="less" scoped>
  .hager-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    .location-banner {
      display: flex;
      background: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), #00477e;
      width: 100%;
      height: 5rem;
      color: white;
    }
    .header-top {
      display: flex;
      background-color: #00477e;
      height: 2rem;
      transition: all .4s ease-in-out;
    }
    .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-logo {
      display: flex;
      height: 5rem;
      align-items: center;
    }
    .nav-wrapper {
      display: flex;
      height: 5rem;
      // align-items: center;
      // justify-content: space-around;
      margin-top: 1.25rem;
      .item {
        color: @secondary-color;
        margin-right: 1.5rem;
        font-size: 0.95rem;
        &:hover {
          cursor: pointer;
        }
      }
      .active {
        color: @primary-color;
      }
    }
    .nav-right {
      display: flex;
      height: 5rem;
      align-items: center;
      justify-content: right;
      .search {
        display: flex;
        align-items: center;
        border-radius: 1rem;
        border: 1px solid #f5f5f5;
        background-color: #e3f1f7;
        padding: 0.5rem 1rem;
        overflow: hidden;
        width: 100%;
        input {
          border: 0;
          background-color: #E3F1F7;
          margin-left: 0.5rem;
          width: calc(100% - 0.5rem);
          &::placeholder {
            color: #00477E;
          }
        }
      }
      .tooltip {
        margin: 0 1rem;
        &:hover {
          cursor: pointer;
        }
      }
    }

    .menu-mini {
      position: absolute;
      top: 6.7rem;
      right: 0;
      left: 0;
      width: 100vw;
      height: calc(100vh - 6.7rem);
      background-color: #F7F7F7;
    }
  }
</style>