<script setup lang='ts'>
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
const collapsed = ref(false)

const subcollapsed = ref(true)

const toggleCollapse = () => {
  collapsed.value = !collapsed.value
}

const emits = defineEmits<{
  select: [idx: number]
}>()

type TCollapseItem = typeof import('./src/components/collapse-item.vue')['default']
const CollapseItemRefs = shallowRef<TCollapseItem[]>([])
const CollapseItemList = [
  { title: '画笔', icon: '/mipmap/sc_bottom_brush.png' },
  { title: '擦除', icon: '/mipmap/sc_bottom_erase.png' },
  { title: '计时器', icon: '/mipmap/sc_bottom_time.png' },
  { title: '随机点名', icon: '/mipmap/sc_bottom_random.png' },
  { title: '互动问答', icon: '/mipmap/sc_bottom_hand.png' },
  { title: '小组讨论', icon: '/mipmap/sc_bottom_discuss.png' },
  { title: '随堂小练', icon: '/mipmap/sc_bottom_practice.png' },
  { title: '作品展示', icon: '/mipmap/sc_bottom_work_show.png' },
  // { title: '更多' ,icon:'/mipmap/aaaaa.png' }
]

let lastSelectedCollapseItem: TCollapseItem | null = null
function handleClickCollapseItem(idx: number) {
  if (lastSelectedCollapseItem === CollapseItemRefs.value[idx] && idx === 1) {
    subcollapsed.value = !subcollapsed.value
  } else {
    subcollapsed.value = true
  }
  if (lastSelectedCollapseItem) {
    lastSelectedCollapseItem.unselect()
  }
  lastSelectedCollapseItem = CollapseItemRefs.value[idx]
  lastSelectedCollapseItem.select()
  emits('select', idx)
}
defineExpose({
  setSubcollapsed(value: boolean) {
    subcollapsed.value = value
  }
})
onMounted(() => {
  lastSelectedCollapseItem = CollapseItemRefs.value[0]
  lastSelectedCollapseItem.select()
})

</script>

<template>
  <div class="absolute bottom-0 flex flex-col items-center z-100">
    <Transition mode="out-in">
      <div
        class="flex justify-center items-center px-6 bg-hex-16271F text-white space-x-1 rounded-12px overflow-hidden h-96px mb-12px"
        v-show="!subcollapsed">
        <slot />
      </div>
    </Transition>
    <div class="w-60px h-20px rounded-t-10px flex justify-center bg-hex-16271F text-white cursor-pointer"
      @click="toggleCollapse">
      <component :is="collapsed?ArrowUp:ArrowDown"></component>
    </div>
    <Transition mode="out-in">
      <div
        class="flex justify-center items-center px-6 bg-hex-16271F text-white space-x-1 rounded-t-12px overflow-hidden h-96px"
        v-show="!collapsed">
        <!-- <slot /> -->
        <collapse-item ref="CollapseItemRefs" v-for="({ title, icon }, idx) in CollapseItemList" :title="idx+title"
          :icon="icon" @click="handleClickCollapseItem(idx)"></collapse-item>
      </div>
    </Transition>

  </div>
</template>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: height 0.2s ease;
}

.v-enter-from,
.v-leave-to {
  height: 0px;
}
</style>
