<!--
 * @Date: 2024-09-26 13:42:11
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-29 14:27:53
 * @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 style="display: flex;height: 5rem; align-items: center; justify-content: space-around;">
              <div>图标</div>
              <div @click="onClickProduct">产品中心</div>
              <div>解决方案</div>
              <div>新闻中心</div>
              <div>招聘信息</div>
              <div>关于海格</div>
              <div>联系我们</div>
              <div>首页</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 v-for="(item, index) in product_menu" :key="index" @click="onClick(item)" 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>
                  {{ item.name }}
                  <i class="el-icon-right"></i>
                </div>
              </div>
              <div class="product-right-wrapper">
                <div style="display: flex; justify-content: space-between;">
                  <div>{{ product_info.name }}</div>
                  <div @click="closeMenu">X</div>
                </div>
                <div>{{ 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>{{ item.name }}</div>
                    <div>
                      <div 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';

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+系列空气断路器'
              }]
            },
            {
              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+系列空气断路器'
            //   }]
            // },
            // {
            //   name: '',
            //   list: [{
            //     id: '',
            //     name: 'HW系列空气断路器'
            //   }, {
            //     id: '',
            //     name: 'HW+系列空气断路器'
            //   }]
            // }
          ]
        }
      }, {
        name: '成套产品',
        info: {
          name: '成套产品',
          desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
          product: []
        }
      }, {
        name: '开关面板',
        info: {
          name: '开关面板',
          desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
          product: []
        }
      }, {
        name: '智能控制',
        info: {
          name: '智能控制',
          desc: '探索配电新境界，我们的产品引领行业潮流，提供高效、安全的配电解决方案，助您事业更上一层楼！',
          product: []
        }
      }],
      product_info: {},
    }
  },
  mounted () {
    this.product_info = this.product_menu[0]['info'];
  },
  methods: {
    onClickProduct() {
      // 当鼠标悬停时
      this.show = true;
    },
    onClick (item) {
      this.product_info = item.info;
    },
    closeMenu () {
      this.show = false;
    }
  }
}
</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: #f1f1f1;
      .product-left-wrapper {
        flex-basis: 33.33%;
      }
      .product-right-wrapper {
        flex-basis: 66.67%;
      }
      .product-right-center {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .product-right-center-item {
          flex-basis: calc(33.33% - 10px);
          margin-bottom: 10px;
        }
      }
    }
  }
</style>