<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <z-paging
    ref="paging"
    use-virtual-list
    :force-close-inner-list="true"
    cell-height-mode="dynamic"
    @virtualListChange="virtualListChange"
    @query="queryList"
    :auto-show-system-loading="true"
  >
    <template #top>
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        :title="`我的志愿表`"
        @click-left="navigatorBack"
      />
      <HeaderTip :user-info="userStore.userInfo" />
      <view class="flex justify-between items-center px-[32rpx] py-[16rpx]">
        <view class="flex items-center gap-[24rpx] text-[#303030]">
          <view
            @click="handleShow(1)"
            class="flex justify-between items-center text-[28rpx] line-height-none"
          >
            院校
            <view class="i-carbon-caret-down"></view>
          </view>

          <view
            @click="handleShow(2)"
            class="flex justify-between items-center text-[28rpx] line-height-none ml-[20rpx]"
          >
            地域
            <view class="i-carbon-caret-down"></view>
          </view>
        </view>

        <SearchInput @confirm="handleChange" placeholder="请输入意向院校" />
      </view>

      <view class="flex gap-[10rpx] px-[32rpx] border-top">
        <view
          class="flex justify-between items-center text-[28rpx] line-height-none"
          @click="handleShow(3)"
        >
          {{ collegeSearch.tModelValue === '-1' ? `全部${total}` : collegeSearch.tModel }}
          <view class="i-carbon-caret-down"></view>
        </view>

        <Slider
          v-model:modelValue="sliderValue"
          :min="minScore"
          :max="maxScore"
          :step="1"
          :range="true"
          @change="handleSliderChange"
          class="custom-slider"
        />
      </view>
    </template>

    <!-- 滚动主体 -->
    <view
      class="item-wrapper"
      :id="`zp-id-${item.zp_index}`"
      :key="item.zp_index"
      v-for="item in schoolList"
      @click="itemClick(item)"
    >
      <ScrollListItem
        :college="item"
        :score="score"
        :major-count="majorCount"
        @show-action="handleShowAction"
      />
    </view>

    <template #bottom>
      <view class="pb-safe px-[32rpx] pt-[32rpx] bg-[#fff]">
        <view
          :class="`h-[80rpx] rounded-[8rpx] bg-[#1580FF] flex items-center justify-center text-[#fff] ${majorCount === 0 ? 'disabled-btn' : ''}`"
          @click="handlePreview"
        >
          预览志愿表{{ majorCount ? `(${majorCount})` : '' }}
        </view>
      </view>
    </template>
  </z-paging>
  <ActionSheet v-model:show="show" :title="actionTitle">
    <view class="px-[36rpx]">
      <Region
        v-if="actionType === 2"
        width="210rpx"
        height="60rpx"
        class="px-[32rpx]"
        @change-name="handleRegionName"
      />
    </view>
    <FilterMenu v-if="actionType === 1" :show-phase="false" ref="filterMenuRef" :menuBit="28" />
    <CustomPickerView
      v-if="actionType === 3"
      :list="typeModelList"
      v-model:modelValue="collegeSearch.tModelValue"
      value-key="value"
      label-key="name"
      @change="handleTypeModelChange"
    />
    <template #footer>
      <view class="flex items-center justify-between gap-[30rpx]">
        <view class="cancel-btn" @click="show = false">取消</view>
        <view class="submit-btn" @click="handleConfirm">确认</view>
      </view>
    </template>
  </ActionSheet>

  <ScrollListItemAction
    v-model:show="collegeShow"
    :college="showCollegeItem"
    :major-count="majorCount"
  />
</template>

<script lang="ts" setup>
import SearchInput from '@/pages-sub/components/input/SearchInput.vue'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'
import Region from '@/pages-sub/home/components/Region.vue'
import FilterMenu from '@/pages-sub/home/components/FilterMenu.vue'
import Slider from '@/pages-sub/components/Slider.vue'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'

import ScrollListItemAction from './components/ScrollListItemAction.vue'

import ScrollListItem from './components/ScrollListItem.vue'
import HeaderTip from './components/HeaderTip.vue'

import Navbar from '@/pages-sub/components/navbar/Navbar.vue'

import { getPlanProListByFilter } from '@/service/index/api'

import { useUserStore } from '@/store/user'
import { coverTypeModel, useScore } from './composable/useWishesList'

const userStore = useUserStore()

const navigatorBack = () => {
  uni.navigateBack()
}

const schoolList = ref([])
const paging = ref(null)
const filterMenuRef = ref(null)

const location = ref(userStore.userInfo.estimatedAchievement.provinceCode)

const showCollegeItem = ref(null)
const collegeShow = ref(false)
const handleShowAction = (item) => {
  showCollegeItem.value = item
  collegeShow.value = true
}

const total = ref(0)
const typeModelList = ref([])
const handleTypeModelChange = ({ item }) => {
  collegeSearch.value.tModelValue = item.value
  collegeSearch.value.tModel = item.name
}

const majorCount = computed(() => {
  return userStore.userInfo.wishList.reduce((a, b) => a + (b?.vItems?.length || 0), 0)
})

const queryList = (page: number, pageSize: number) => {
  getPlanProListByFilter({
    pageIndex: page,
    pageSize: pageSize,
    location: location.value,
    p: userStore.userInfo.estimatedAchievement.sp,
    subjects: userStore.userInfo.estimatedAchievement.subjectGroup.split(','),
    score: +userStore.userInfo.estimatedAchievement.expectedScore,
    batchName: userStore.userInfo.batchName,
    startscore: sliderValue.value[0],
    endscore: sliderValue.value[1],
    province: province.value,
    nature: collegeSearch.value.nature,
    feature: collegeSearch.value.feature,
    majors: collegeSearch.value.majors,
    keyword: searchValue.value,
    type: collegeSearch.value.tModelValue === '-1' ? null : +collegeSearch.value.tModelValue,
  }).then((resp) => {
    if (resp.code === 200) {
      paging.value.complete((resp.result as { rows: any[] }).rows)
      total.value = (resp.result as { totalRows: number }).totalRows
      typeModelList.value = coverTypeModel((resp.result as { tModel: any }).tModel, total.value)
    }
  })
}

const virtualListChange = (_vList) => {
  schoolList.value = _vList
}

const itemClick = (item) => {
  uni.navigateTo({ url: `/pages-sub/home/college/info?collegeId=${item.uId}` })
}

const collegeSearch = ref({
  nature: [],
  feature: [],
  majors: [],
  tModel: '',
  tModelValue: '-1',
})

const show = ref(false)
const actionTitle = ref('')
const actionType = ref(1)
const handleConfirm = () => {
  show.value = false
  if (actionType.value === 1) {
    let _cur = filterMenuRef.value.handleConfirm()
    collegeSearch.value.feature = _cur.chooseCollegeFeature
    collegeSearch.value.nature = _cur.chooseNature
    collegeSearch.value.majors = _cur.chooseMajors
  }
  paging.value.reload()
}

const handleShow = (type: number) => {
  if (type === 1) {
    actionTitle.value = '院校'
  } else if (type === 2) {
    actionTitle.value = '地域'
  }

  actionType.value = type
  show.value = true
}

const searchValue = ref('')
const handleChange = (value: string) => {
  searchValue.value = value
  paging.value.reload()
}

const province = ref([])
const handleRegionName = (val: string[]) => {
  province.value = val
}

const sliderValue = ref([
  +userStore.userInfo.estimatedAchievement.expectedScore - 100,
  +userStore.userInfo.estimatedAchievement.expectedScore,
])
const handleSliderChange = (val) => {
  paging.value.reload()
}

const { score, minScore, maxScore } = useScore(
  userStore.userInfo.estimatedAchievement.provinceCode,
  userStore.userInfo.batchName,
  userStore.userInfo.estimatedAchievement.requireSubject,
)

const handlePreview = () => {
  if (majorCount.value === 0) {
    return
  }
  uni.navigateTo({ url: '/pages-sub/home/wishesList/wishesList?editType=add&typeName=智能填报' })
}
</script>

<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';

.custom-slider {
  flex: 1 1 auto;
}

.border-top {
  border-top: 2rpx solid #ededed;
}

.disabled-btn {
  background-color: #f5f5f5 !important;
  color: #999 !important;
}
</style>
