<!--
 * @Date: 2024-09-27 16:53:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-17 16:43:43
 * @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 v-if="!is_xs" :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 v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
                <div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
              </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 @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
            </div>
          </div>
          <div style="height: 5rem;"></div>
        </el-col>
      </el-row>
      <div v-else class="product-list">
        <div class="product-item xs" 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 @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
        </div>
      </div>
      <div style="height: 5rem;"></div>
    </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'],
      c_list: [{
        title: '低压主配电',
        name: '1',
        list: [{
          id: '',
          name: 'acb hw01 空气断路器'
        }]
      }, {
        title: '分配电',
        name: '2',
        list: [{
          id: '',
          name: 'acb hw01 空气断路器'
        }]
      }]
    }
  },
  mounted () {

  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    goToP (item) { // 跳转产品详情
      this.$router.push({
        path: '/product/detail',
        query: {
          // id: id
        }
      });
    }
  }
}
</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;
      }
    }


    .product-list {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .product-item {
      width: calc(33.33% - 1rem);
      &.xs {
        width: calc(50% - 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;
      }
    }
  }

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