<template>
  <view class="">
    <view class="mt-[24rpx] px-[32rpx]">
      <view class="flex mb-[30rpx] items-center">
        <text class="text-[32rpx] font-semibold text-[#303030]">专业点分布</text>
        <text class="text-[22rpx] text-[#636363]">
          （全国针对{{ userStore.userInfo.estimatedAchievement.provinceName }}招生情况）
        </text>
      </view>
      <view
        class="flex items-center gap-[16rpx] text-[24rpx] text-[#303030] mb-[30rpx]"
        v-for="item in provinceList"
        :key="item.code"
      >
        <text class="">{{ item.ssmc }}</text>
        <ProgressBar
          class="flex-1 h-[16rpx]"
          :progress="Math.floor((item.count / provinceTotal) * 100)"
        />
        <text>{{ item.count }}</text>
      </view>
    </view>

    <view class="h-[16rpx] bg-[#f8f8f8]"></view>
    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
      <text class="text-[32rpx] font-semibold text-[#303030]">专业院校分布</text>
      <view
        @click="handleShow"
        class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx] w-[144rpx] mt-[30rpx]"
      >
        {{ provinceName || '不限' }}
        <view class="i-carbon-chevron-down text-[16rpx]"></view>
      </view>
      <scroll-view :scroll-x="true" class="">
        <view
          class="flex gap-[24rpx] py-[40rpx] border-bt"
          v-for="item in subUniversityList"
          :key="item"
        >
          <image class="w-[112rpx] h-[112rpx]" :src="item.logo" mode="scaleToFill" />
          <view class="flex flex-col flex-1">
            <text class="text-[32rpx] font-semibold">[{{ item.yxdm }}]{{ item.yxmc }}</text>
            <text class="text-[22rpx] text-[#505050]">{{ item.cityname }}·{{ item.ulevel }}</text>
            <text class="text-[#8F959E] text-[22rpx] my-[6rpx]">
              {{ item.featuretag?.split('/').slice(0, 4).join('/') }}/ 排名{{ item.zytjRank }}
            </text>
          </view>
        </view>
      </scroll-view>
    </view>

    <ActionSheet v-model:show="show" title="">
      <view class="px-[32rpx]">
        <CustomPickerView
          v-model:modelValue="provinceCode"
          :list="provinceList"
          value-key="code"
          label-key="ssmc"
        />
      </view>
      <view class="flex items-center justify-between px-[32rpx] gap-[20rpx]">
        <view class="cancel-btn" @click="show = false">取消</view>
        <view class="submit-btn" @click="handleConfirm">确认</view>
      </view>
    </ActionSheet>
  </view>
</template>

<script lang="ts" setup>
import { getMajorUniversityList } from '@/service/index/api'
import ProgressBar from '../../components/ProgressBar.vue'
import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
import { useUserStore } from '@/store'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

const userStore = useUserStore()

const props = defineProps({
  specId: {
    type: String,
    required: true,
  },
})

watch(
  () => props.specId,
  (newV) => {
    getMajorUniversityList({ SpecId: newV }).then((resp) => {
      if (resp.code === 200) {
        let result = resp.result as {
          schSpecList: { yxmc; string }[]
          ssdmList: { ssmc: string; code: string; count: number }[]
        }
        provinceList.value = result.ssdmList.filter((item) => {
          if (item.code) {
            provinceTotal.value += item.count
            return item
          }
        })
        universityList.value = result.schSpecList
        subUniversityList.value = universityList.value
      }
    })
  },
)

const provinceName = ref('')
const provinceList = ref([])
const provinceTotal = ref(0)
const provinceCode = ref('')

const show = ref(false)

const universityList = ref([])
const subUniversityList = ref([])

const handleShow = () => {
  show.value = true
}
const handleConfirm = () => {
  show.value = false
  if (!provinceCode.value) {
    provinceCode.value = provinceList.value[0].code
  }
  subUniversityList.value = universityList.value.filter((item) => {
    return item.ssdm === provinceCode.value
  })
  provinceName.value = provinceList.value.find((item) => item.code === provinceCode.value)?.ssmc
}
</script>

<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';
.border-bt {
  border-bottom: 1rpx solid #ededed;
}
</style>
