<template>
  <view class="drop-menu" ref="dropMenuRef">
    <view class="drop-menu__bar">
      <view
        v-for="(item, index) in titles"
        :key="index"
        class="drop-menu__item"
        :class="{
          'drop-menu__item--active': index === activeIndex || item.activation,
          'drop-menu__disable': item.disabled,
        }"
        @click="handleTitleClick(index)"
      >
        <text class="drop-menu__title">{{ item.title }}</text>
        <text
          class="drop-menu__arrow i-carbon-chevron-down"
          :class="{ 'drop-menu__arrow--active': index === activeIndex }"
        ></text>
      </view>
    </view>
    <view class="drop-menu__content-wrapper">
      <slot></slot>
    </view>
    <view
      v-if="activeIndex !== -1"
      class="drop-menu__mask"
      :style="{ top: maskTop }"
      @click="closeDropMenu"
    ></view>
  </view>
</template>

<script lang="ts" setup>
import { ref, provide } from 'vue'

const props = defineProps({
  zIndex: {
    type: Number,
    default: 10,
  },
  duration: {
    type: Number,
    default: 200,
  },
  direction: {
    type: String,
    default: 'down',
  },
})

// 标题列表
const titles = ref<any[]>([])
// 当前激活的菜单索引
const activeIndex = ref(-1)

const maskTop = ref('88px')

// 添加标题
const addTitle = (options) => {
  titles.value.push({ ...options })
}

const instance = getCurrentInstance()

const dropMenuRef = ref()
// 处理标题点击
const handleTitleClick = (index: number) => {
  if (titles.value[index].disabled) {
    return
  }
  // 如果点击的是当前打开的菜单，则关闭
  if (activeIndex.value === index) {
    activeIndex.value = -1
  } else {
    // 否则打开点击的菜单
    activeIndex.value = index
  }
  const query = uni.createSelectorQuery().in(instance.proxy)
  query
    .select('.drop-menu')
    .boundingClientRect((data: { top: number }) => {
      maskTop.value = `${data.top}px`
    })
    .exec()
}

// 关闭下拉菜单
const closeDropMenu = () => {
  activeIndex.value = -1
}

// 提供给子组件的数据和方法
provide('dropMenu', {
  activeIndex,
  addTitle,
  closeDropMenu,
  zIndex: props.zIndex,
  duration: props.duration,
  direction: props.direction,
  titles, // 提供titles给子组件
})

defineExpose({
  closeDropMenu,
})
</script>

<style scoped lang="scss">
.drop-menu {
  position: relative;
  background: #fff;
  z-index: 10;
}

.drop-menu__bar {
  position: relative;
  display: flex;
  height: 88rpx;
  background: #fff;
  z-index: 12;
}

.drop-menu__item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.drop-menu__item--active {
  color: #0083ff;
}

.drop-menu__title {
  font-size: 28rpx;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-menu__arrow {
  font-size: 20rpx;
  margin-left: 8rpx;
  transition: transform 0.2s;
}

.drop-menu__arrow--active {
  transform: rotate(180deg);
}

.drop-menu__content-wrapper {
  position: relative;
  width: 100%;
}

.drop-menu__mask {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 88rpx;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9;
}

.drop-menu__disable {
  color: #999;
}
</style>
