<template>
  <view class="flex flex-col sheet-body-border">
    <view class="flex">
      <view class="w-[176rpx] h-initial bg-[#F7F8FA] flex flex-col items-center">
        <view
          :class="`text-[#666] flex items-center justify-center h-[104rpx] w-full ${item.id === currentMenu ? 'active' : ''}`"
          v-for="item in splitMenus"
          :key="item.id"
          @click="changeMenu(item)"
        >
          {{ item.name }}
        </view>
      </view>
      <scroll-view class="flex-1 pb-[24rpx] h-[50vh] mt-[32rpx] mx-[32rpx]" :scroll-y="true">
        <Phase v-show="currentMenu === 1" @change="handlePhaseChange" />
        <CollegeFeature
          v-show="currentMenu === 5"
          width="240rpx"
          height="60rpx"
          class="justify-center!"
          :defaultValue="defaultCollegeFeature"
          @change-name="handleCollegeFeatureChange"
        />
        <Region
          width="240rpx"
          height="60rpx"
          class="justify-center!"
          v-show="currentMenu === 2"
          :defaultValue="defaultRegion"
          @change-name="handleRegionChange"
        />
        <UniType
          width="240rpx"
          height="60rpx"
          class="justify-center!"
          v-show="currentMenu === 3"
          :defaultValue="defaultUniType"
          @change-name="handleUniTypeChange"
        />
        <Nature
          width="240rpx"
          height="60rpx"
          class="justify-center!"
          v-show="currentMenu === 4"
          :defaultValue="defaultNature"
          @change-name="handleNatureChange"
        />
      </scroll-view>
    </view>
    <!-- <view class="pt-[32rpx] px-[32rpx] wei-xin-pt box-shadow">
      <view class="flex items-center flex-wrap gap-[24rpx]">
      <view
        class="px-[20rpx] py-[12rpx] bg-[#f8f8f8] rounded-[8rpx]"
        v-for="item in 4"
        :key="item"
      >
        <text class="text-[#303030] text-[24rpx] font-medium mr-[16rpx]">中外合作</text>
        <view class="i-carbon-close-filled"></view>

      </view>
    </view>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
import Phase from './Phase.vue'
import Region from './Region.vue'
import UniType from './UniType.vue'
import Nature from './Nature.vue'
import CollegeFeature from './CollegeFeature.vue'

const props = defineProps({
  menuBit: {
    type: Number,
    default: 15, // 默认显示 (01111)
  },
})

const menus = [
  { id: 1, name: '阶段' },
  { id: 2, name: '院校省份' },
  { id: 5, name: '院校特色' },
  { id: 3, name: '院校类型' },
  { id: 4, name: '办学性质' },
]

const splitMenus = computed(() => {
  let effectiveBitMask = props.menuBit
  return menus.filter((item) => {
    const bitMask = 1 << (item.id - 1)
    return (effectiveBitMask & bitMask) !== 0
  })
})

const currentMenu = ref(splitMenus.value[0].id)
const changeMenu = (item: { id: number; name: string }) => {
  currentMenu.value = item.id
}

const defaultRegion = ref([])
const defaultNature = ref([])
const defaultUniType = ref([])
const defaultCollegeFeature = ref([])
const defaultPhase = ref('')

const chooseRegion = ref([])
const chooseNature = ref([])
const chooseUniType = ref([])
const chooseCollegeFeature = ref([])
const choosePhase = ref('')

const handleRegionChange = (val: string[]) => {
  chooseRegion.value = val
}

const handleNatureChange = (val: string[]) => {
  chooseNature.value = val
}

const handleUniTypeChange = (val: string[]) => {
  chooseUniType.value = val
}

const handleCollegeFeatureChange = (val: string[]) => {
  chooseCollegeFeature.value = val
}

const handlePhaseChange = (val: string) => {
  choosePhase.value = val
}

const handleConfirm = () => {
  return {
    chooseRegion: chooseRegion.value,
    chooseNature: chooseNature.value,
    chooseUniType: chooseUniType.value,
    chooseCollegeFeature: chooseCollegeFeature.value,
    choosePhase: choosePhase.value,
  }
}

const clearForm = () => {
  defaultCollegeFeature.value = []
  defaultUniType.value = []
  defaultNature.value = []
  defaultRegion.value = []
}

defineExpose({
  handleConfirm,
  clearForm,
})
</script>

<style lang="scss" scoped>
/* #ifdef H5 */
.wei-xin-pt {
  padding-bottom: 40rpx;
}
/* #endif */

.box-shadow {
  box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(225, 225, 225, 0.2);
}

.active {
  background-color: #fff;
  color: #000;
}

.sheet-body-border {
  border-top: 2rpx solid #f5f5f5;
}
</style>

<style lang="scss">
.large-checkbox {
  :deep(.custom-checkbox) {
    --checkbox-width: 240rpx;
    --checkbox-height: 60rpx;
  }
}
</style>
