<template>
  <view
    v-for="(item, index) in cat"
    :key="index"
    class="one-item"
    :class="{
      'one-item-active':
        index == oneActive && item.children.length != 0 && isOpen,
      'item-name': oneActive == index && item.children.length == 0,
    }"
  >
    <!-- 第一层 -->
    <view
      :class="{
        'never-pen-active': index == oneActive && item.children.length != 0,
      }"
      class="one-item-name"
      @tap="oneItemFn(item, index)"
    >
      <text class="iconfont icon-jiantou1" v-if="item.children.length != 0" />
      <text class="noe-seat noe-seat-active" v-else></text>
      <text>{{ item.name }}</text>
    </view>

    <!-- 第二层 -->
    <view
      class="tow-item"
      :class="{ 'tow-item-active': towActive == childIndex }"
      v-for="(childItem, childIndex) in item.children"
      :key="childIndex"
      @tap="towItemFn(childItem, childIndex)"
    >
      <text class="tow-seat tow-seat-active"></text>{{ childItem.name }}</view
    >
  </view>
</template>

<script lang="ts" setup >
import { Ref, ref } from 'vue'
import leftBarFn from './left-bar'

/*************************************************
 * 接收数据
 */
interface propsType {
  dafauleData: Array<AnyObject>
}
const props = defineProps<propsType>()

const {
  cat, // 右侧菜单数据
  GetStoreCategoryMap, // 获取数据
} = leftBarFn(props)

/*************************************************
 * emit
 */
const eimt = defineEmits<{
  (e: 'oneMenuClick', data: string | number): void
}>()

/*************************************************
 * 一级菜单点击
 */
const isOpen = ref<boolean>(false)
const oneActive = ref<number>(0) // 高亮
const oneHeight: Ref<string> = ref('0px') // 高度
function oneItemFn(item: AnyObject, index: number) {
  if (oneActive.value == index) {
    isOpen.value = !isOpen.value
  } else {
    isOpen.value = true
  }
  oneActive.value = index // 一级菜单
  oneHeight.value = `${(item.length + 1) * 90}rpx` // 动态高度
  towActive.value = -1 // 默认二级菜单
  if (!isOpen.value) return
  eimt('oneMenuClick', item.categoryID)
}

/*************************************************
 * 二级菜单点击
 */
const towActive = ref<number>(-1) // 高亮
function towItemFn(childItem: AnyObject, index: number) {
  if (towActive.value == index) return
  towActive.value = index
  eimt('oneMenuClick', childItem.categoryID)
}

/*************************************************
 * 导出子组件方法
 */
defineExpose({
  GetStoreCategoryMap,
})
</script>

<style lang="scss" scoped>
@import './left-bar.scss';

// 一级展开动画
.one-item-active {
  height: v-bind(oneHeight) !important;
  background-color: rgb(236, 252, 233);

  // 三角图标动画
  .icon-jiantou1 {
    display: inline-block;
    transform: rotate(90deg) !important;
  }
}

// 一级选中高亮
.never-pen-active {
  background-color: $jx-primary;
  color: #fff;
  border-bottom: 1rpx solid #fff;
}

// 一级展开背景
.item-name {
  color: $jx-primary;
  .noe-seat-active {
    border-left: 7rpx solid $jx-primary !important;
  }
}

// 二级高亮
.tow-item-active {
  color: $jx-primary;
  background-color: #fff;

  // 二级选中高亮
  .tow-seat-active {
    border-left: 7rpx solid $jx-primary !important;
  }
}
</style>