<template>
  <wd-action-sheet
    v-model="localShow"
    title="筛选"
    @close="close"
    custom-header-class="text-[36rpx]! text-[#303030]! font-medium!"
  >
    <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="`flex items-center justify-center h-[104rpx] w-full ${item.id === currentMenu ? 'active' : ''}`"
            v-for="item in menus"
            :key="item.id"
            @click="changeMenu(item)"
          >
            {{ item.name }}
          </view>
        </view>
        <view class="flex-1 px-[32rpx] py-[24rpx] h-[50vh] overflow-y-auto">
          <Phase v-show="currentMenu === 1" />
          <Region v-show="currentMenu === 2" />
          <UniType v-show="currentMenu === 3" />
          <Nature v-show="currentMenu === 4" />
        </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>
            <wd-icon name="close-outline" size="24rpx" color="#cbcbcb"></wd-icon>
          </view>
        </view> -->
        <view class="flex items-center">
          <wd-button
            plain
            custom-class="border-[#f5f5f5]! px-[134rpx]! py-[26rpx]! bg-[#f5f5f5]! rounded-[8rpx]! text-[#1580FF]! text-[32rpx]! font-normal! mr-[22rpx]"
          >
            清空
          </wd-button>
          <wd-button
            custom-class="border-[#1580FF]! px-[134rpx]! py-[26rpx]! bg-[#1580FF]! rounded-[8rpx]! text-[#fff]! text-[32rpx]! font-normal!"
          >
            查看结果
          </wd-button>
        </view>
      </view>
    </view>
  </wd-action-sheet>
</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'

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
})

const localShow = computed(() => props.show)

const emit = defineEmits(['update:show'])
const close = () => {
  emit('update:show', false)
}

const menus = [
  { id: 1, name: '阶段' },
  { id: 2, name: '院校省份' },
  { id: 3, name: '院校类型' },
  { id: 4, name: '办学性质' },
]
const currentMenu = ref(1)
const changeMenu = (item: { id: number; name: string }) => {
  currentMenu.value = item.id
}
</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;
}

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