<template>
  <view class="flex flex-col sheet-body-border">
    <view class="flex flex-1">
      <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="h-[40vh] pb-[14rpx] pt-[32rpx]" :scroll-y="true">
        <view class="px-[32rpx]">
          <Phase
            v-show="currentMenu === 1"
            :defaultValue="defaultPhase"
            @change="handlePhaseChange"
          />
          <CollegeFeature
            v-show="currentMenu === 5"
            width="240rpx"
            height="60rpx"
            class="custom-pl"
            :defaultValue="defaultCollegeFeature"
            @change-obj="handleCollegeFeatureChangeObj"
          />
          <Region
            width="240rpx"
            height="60rpx"
            v-show="currentMenu === 2"
            :defaultValue="defaultRegion"
            @change-obj="handleRegionChangeObj"
          />
          <UniType
            width="240rpx"
            height="60rpx"
            class=""
            v-show="currentMenu === 3"
            :defaultValue="defaultUniType"
            @change-obj="handleUniTypeChangeObj"
          />
          <Nature
            width="240rpx"
            height="60rpx"
            class="justify-center!"
            v-show="currentMenu === 4"
            :defaultValue="defaultNature"
            @change-obj="handleNatureChangeObj"
          />
        </view>
      </scroll-view>
    </view>
    <scroll-view class="box-shadow" :scroll-x="true">
      <view class="flex items-center gap-[24rpx] w-max px-[32rpx] pt-[32rpx] pb-[40rpx] h-[58rpx]">
        <view
          class="px-[20rpx] py-[12rpx] bg-[#f8f8f8] rounded-[8rpx]"
          v-for="(item, index) in filterParams"
          :key="item.value.name"
        >
          <text class="text-[#303030] text-[24rpx] font-medium mr-[16rpx]">
            {{ item.value.name }}
          </text>
          <view
            class="i-carbon-close-filled text-[#CBCBCB] text-[24rpx]"
            @click="handleRemove(item, index)"
          ></view>
        </view>
      </view>
    </scroll-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 emits = defineEmits(['change'])

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<any[]>([])
const defaultNature = ref<any[]>([])
const defaultUniType = ref<any[]>([])
const defaultCollegeFeature = ref<any[]>([])
const defaultPhase = ref('')

const filterParams = ref<any[]>([])

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

const handleRegionChangeObj = (val: any[]) => {
  defaultRegion.value = val.map((item) => item.code)
  chooseRegion.value = val.map((item) => item.name)

  filterParams.value = filterParams.value.filter((item) => item.type !== 'region')
  val.forEach((item) => {
    filterParams.value.push({
      type: 'region',
      value: item,
    })
  })
  emits('change', filterParams.value)
}

const handleNatureChangeObj = (val: any[]) => {
  defaultNature.value = val.map((item) => item.id)
  chooseNature.value = val.map((item) => item.name)
  filterParams.value = filterParams.value.filter((item) => item.type !== 'nature')
  val.forEach((item) => {
    filterParams.value.push({
      type: 'nature',
      value: item,
    })
  })
  emits('change', filterParams.value)
}

const handleUniTypeChangeObj = (val: any[]) => {
  defaultUniType.value = val.map((item) => item.id)
  chooseUniType.value = val.map((item) => item.name)
  filterParams.value = filterParams.value.filter((item) => item.type !== 'uniType')
  val.forEach((item) => {
    filterParams.value.push({
      type: 'uniType',
      value: item,
    })
  })
  emits('change', filterParams.value)
}

const handleCollegeFeatureChangeObj = (val: any[]) => {
  chooseCollegeFeature.value = val.map((item) => item.name)
  filterParams.value = filterParams.value.filter((item) => item.type !== 'collegeFeature')
  val.forEach((item) => {
    filterParams.value.push({
      type: 'collegeFeature',
      value: item,
    })
  })
  emits('change', filterParams.value)
}

const handlePhaseChange = (val: any) => {
  if (props.menuBit & 1) {
    choosePhase.value = val.batch
    filterParams.value = filterParams.value.filter((item) => item.type !== 'phase')

    filterParams.value.push({
      type: 'phase',
      value: { ...val, name: val.batch },
    })
  }
  emits('change', filterParams.value)
}

const handleRemove = (removeItem: { type: string; value: any }, index: number) => {
  if (removeItem.type === 'region') {
    defaultRegion.value = filterParams.value
      .filter((item) => item.type === 'region' && item.value.code !== removeItem.value.code)
      .map((item) => item.value.code)
  }
  if (removeItem.type === 'nature') {
    defaultNature.value = filterParams.value
      .filter((item) => item.type === 'nature' && item.value.id !== removeItem.value.id)
      .map((item) => item.value.id)
  }
  if (removeItem.type === 'uniType') {
    defaultUniType.value = filterParams.value
      .filter((item) => item.type === 'uniType' && item.value.id !== removeItem.value.id)
      .map((item) => item.value.id)
  }
  if (removeItem.type === 'collegeFeature') {
    defaultCollegeFeature.value = filterParams.value
      .filter((item) => item.type === 'collegeFeature' && item.value.id !== removeItem.value.id)
      .map((item) => item.value.id)
  }
  if (removeItem.type === 'phase') {
    uni.showToast({
      title: '该项不可删除',
      icon: 'none',
    })
    return
  } else {
    filterParams.value.splice(index, 1)
  }
  emits('change', filterParams.value)
}

const handleConfirm = () => {
  return {
    chooseRegion: filterParams.value
      .filter((item) => item.type === 'region')
      .map((item) => item.value.name),
    chooseNature: filterParams.value
      .filter((item) => item.type === 'nature')
      .map((item) => item.value.name),
    chooseUniType: filterParams.value
      .filter((item) => item.type === 'uniType')
      .map((item) => item.value.name),
    chooseCollegeFeature: filterParams.value
      .filter((item) => item.type === 'collegeFeature')
      .map((item) => item.value.name),
    choosePhase: filterParams.value
      .filter((item) => item.type === 'phase')
      .map((item) => item.value.name)
      .join(','),
  }
}

const clearForm = () => {
  defaultCollegeFeature.value = []
  defaultUniType.value = []
  defaultNature.value = []
  defaultRegion.value = []
  filterParams.value = filterParams.value.filter((item) => item.type === 'phase')
}

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>
