<template>
  <div class="accordion-item">
    <div v-if="hasChildren" class="accordion-header" @click="toggle(item)" :style="item.style">
      <span :class="[item.list ? 'category-name' : '']">{{ item.category_name }}</span>
      <span @click.stop="toggle()">
        <i v-if="!isOpen" class="el-icon-arrow-right"></i><i v-else class="el-icon-arrow-down"></i>
      </span>
    </div>
    <div v-else class="list-item" @click="goToDetail(item)">
      {{ item.category_name }}
    </div>
    <el-collapse-transition>
      <div v-if="isOpen || !hasChildren" class="accordion-content">
        <p v-if="!hasChildren">{{ item.content }}</p>
        <AccordionItem v-for="child in item.children" :key="child.id" :item="child" />
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'AccordionItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length > 0;
    }
  },
  methods: {
    toggle(v) {
      if (v?.list) {
        this.$router.push({
          path: '/product/index',
          query: {
            id: v.id,
            timestamp: Date.now()
          }
        });
      } else {
        if (this.hasChildren) {
          this.isOpen = !this.isOpen;
        }
      }
    },
    goToDetail (v) { // 跳转产品详情
      this.$router.push({
        path: '/product/detail',
        query: {
          id: v.id,
          timestamp: Date.now()
        }
      });
    }
  }
};
</script>

<style scoped>
.accordion-item {
  /* border-bottom: 1px solid #ccc; */
}
.accordion-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
    line-height: 1;
    background-color: #FFF;
    color: #303133;
    cursor: pointer;
    /* border-bottom: 1px solid #EBEEF5; */
    font-size: 0.9rem;
    font-weight: 500;
    -webkit-transition: border-bottom-color .3s;
    transition: border-bottom-color .3s;
    outline: 0;
    .category-name {
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
}
.list-item {
  font-size: 0.85rem;
  line-height: 2;
  /* padding: 10px; */
  /* background-color: #f0f0f0; */
  font-weight: normal;
  cursor: default;
  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}
.accordion-content {
  padding-left: 0.5rem;
  background-color: #fff;
}
</style>