<!--
 * @Date: 2024-09-27 16:53:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-29 14:58:08
 * @FilePath: /hager/src/views/product/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="product-index">
    <hager-box>
      <div v-if="!is_search" style="margin-top: 1.5rem;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>所有产品</el-breadcrumb-item>
          <el-breadcrumb-item>{{ parent_name }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ category_name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <hager-h1 v-if="!is_search" :title="category_name" :sub="category_name_en" style="margin: 2rem 0;"></hager-h1>
      <hager-h1 v-else :title="'与“' + keyword + '”相关的搜索结果'" :sub="''" 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_keyword" @change="goToSearch"></el-input>
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item v-for="(item, index) in cate_list" :key="index" :title="item.category_name" :name="item.category_name">
                <div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.product_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 product_list" :key="index">
              <div class="product-item-img">
                <img style="width: 100%; height: auto;" :src="item.cover">
              </div>
              <p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</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 product_list" :key="index">
          <div @click="goToDetail(item)" class="product-item-img xs">
            <img style="width: 35vw; height: auto;" :src="item.cover">
          </div>
          <p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</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';
import { getProductCateAPI, getProductSearchAPI } from "@/api/hager.js";

export default {
  components: { hagerBox, hagerH1 },
  mixins: [mixin.init],
  data () {
    return {
      search_keyword: '',
      keyword: '',
      activeNames: [],
      parent_name: '',
      category_name: '',
      category_name_en: '',
      cate_list: [],
      product_list: [],
      no_product_img: 'https://cdn.ipadbiz.cn/hager/img/no-product-img.png',
      is_search: false,
    }
  },
  async mounted () {
    this.getMain();
  },
  watch: {
    // 监听路由参数变化时，更新输入框的值
    '$route.query.id' (val, old) {
      if (old !== val) {
        this.is_search = false;
        this.getMain();
      }
    },
    '$route.query.timestamp' (val, old) {
      this.is_search = false;
      this.getMain();
    },
  },
  methods: {
    handleChange(val) {
    },
    goToDetail (v) { // 跳转产品详情
      this.$router.push({
        path: '/product/detail',
        query: {
          id: v.id
        }
      });
    },
    async getMain () {
      const { code, data } = await getProductCateAPI( {cid: this.$route.query.id });
      if (code) {
        let info = data[0];
        this.parent_name = info.parent_name;
        this.category_name = info.category_name;
        this.category_name_en = info.category_name_en;
        this.product_list = info.list;
        this.search_keyword = '';
        // 获取当前类别的内容
        this.getCurrentCate(info.category_parent);
      }
    },
    async getCurrentCate (category_parent) {
      const { code, data } = await getProductCateAPI();
      if (code) {
        data.forEach((item) => {
          if (item.id === category_parent) {
            this.cate_list = item.children;
          }
        })
      }
    },
    async goToSearch () {
      if (this.search_keyword) { // 产品有值时操作
        const { code, data } = await getProductSearchAPI({ keyword: this.search_keyword });
        if (code) {
          this.product_list = data;
          this.is_search = true;
          this.keyword = this.search_keyword;
        }
      } else { // 清空搜索值，还原
        this.getMain();
        this.is_search = false;
        this.keyword = '';
      }
    },
  }
}
</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;
    }
    .product-item {
      width: calc(33.33% - 1rem);
      margin-bottom: 1rem;
      margin-right: 1rem;
      &.xs {
        width: calc(50% - 1rem);
      }
    }
    .product-item-img {
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 18rem;
      padding: 2vw;
      box-sizing: border-box;
      border-radius: 8px;
      border: 1px solid #eee;
    }
    .product-item-title {
      // text-align: center;
      margin-top: 0.75rem;
      color: @text-color;
      font-weight: bold;
      padding-left: 1rem;
      &: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>