<!--
 * @Date: 2024-09-27 16:53:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-30 14:00:01
 * @FilePath: /hager/src/views/product/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="product-index">
    <hager-box>
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>所有产品</el-breadcrumb-item>
          <el-breadcrumb-item>配电产品</el-breadcrumb-item>
          <el-breadcrumb-item>低压主配电</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <hager-h1 title="低压主配电" sub="Automatic conversion switch" style="margin: 2rem 0;"></hager-h1>
      <el-row :gutter="0" style="margin: 1rem 0;">
        <el-col :span="6">
          <div class="product-nav-wrapper">
            <div class="product-nav-title">按产品类别查找</div>
            <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="低压主配电" name="1">
                <div class="p-item">acb hw01 空气断路器</div>
                <div class="p-item">unimes（优跃）开关柜</div>
                <div class="p-item">unimes（优跃）面板开关</div>
                <div class="p-item">acb hw04 空气断路器</div>
                <div class="p-item">acb hwo5 空气断路器</div>
                <div class="p-item">acb hw06 空气断路器</div>
                <div class="p-item">acb hwo7 空气断路器</div>
              </el-collapse-item>
              <el-collapse-item title="分配电" name="2">
              </el-collapse-item>
              <el-collapse-item title="终端配电" name="3">
              </el-collapse-item>
              <el-collapse-item title="开关面板" name="4">
              </el-collapse-item>
              <el-collapse-item title="酒店客控" name="5">
              </el-collapse-item>
              <el-collapse-item title="智能家居" name="6">
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="product-list">
            <div class="product-item" v-for="(item, index) in 6" :key="index">
              <div class="product-item-img">
                <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
              </div>
              <p class="product-item-title">acb hw 空气断路器</p>
            </div>
          </div>
          <div style="height: 5rem;"></div>
        </el-col>
      </el-row>
    </hager-box>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';

export default {
  components: { hagerBox, hagerH1 },
  mixins: [mixin.init],
  data () {
    return {
      search_input: '',
      activeNames: ['1']
    }
  },
  mounted () {

  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
}
</script>

<style lang="less">
  .product-index {
    .product-nav-wrapper {
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 1.5rem;
      margin-right: 1rem;
      .product-nav-title {
        color: @secondary-color;
        font-weight: bold;
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
      }
    }
  }

  .el-collapse {
    border-top: 0;
  }
  .el-collapse-item {
    .el-collapse-item__header {
      font-size: 0.9rem;
    }
    .p-item {
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }

  .product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .product-item {
    width: calc(33.33% - 1rem);
  }
  .product-item-img {
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 18rem;
      padding: 3rem;
      box-sizing: border-box;
      border-radius: 8px;
    }
    .product-item-title {
      text-align: center;
      margin-top: 0.75rem;
      color: @secondary-color;
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
</style>