<script setup lang='ts'>
import { ArrowLeft, ArrowRight } 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_slide_whiteboard.png' },
  { title: '电子课本',icon:'/mipmap/sc_slide_book.png' },
  { title: '课件',icon:'/mipmap/sc_slide_class.png' },
  { title: '讲评',icon:'/mipmap/sc_slide_star.png' },
  // { title: '文件分发',icon:'/mipmap/aaaaa.png' },
  { title: '屏幕共享',icon:'/mipmap/sc_bottom_discuss.png' },
  { title: '菜单',icon:'/mipmap/sc_slide_menu.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 right-0 flex items-center z-100">
    <div class="h-60px w-20px rounded-l-10px flex justify-center bg-hex-16271F text-white cursor-pointer"
      @click="toggleCollapse">
      <component :is="collapsed?ArrowLeft:ArrowRight"></component>
    </div>
    <Transition mode="out-in">
      <div
        class="flex flex-col justify-center items-center py-6 bg-hex-16271F text-white space-y-1 rounded-l-12px overflow-hidden w-96px"
        v-show="!collapsed">
        <collapse-item ref="CollapseItemRefs" v-for="({ title,icon }, idx) in CollapseItemList" :title="idx+title" :icon="icon"
          @click="handleClickCollapseItem(idx)"></collapse-item>
      </div>
    </Transition>

  </div>

  <!-- <div class="absolute bottom-0 flex flex-col items-center">
    <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?ArrowLeft:ArrowRight"></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">
        <collapse-item ref="CollapseItemRefs" v-for="({ title }, idx) in CollapseItemList" :title="title"
          @click="handleClickCollapseItem(idx)"></collapse-item>
      </div>
    </Transition>

  </div> -->
</template>

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

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