<!-- 大学甄别 -->

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

<template>
  <view class="h-screen flex flex-col">
    <view class="relative">
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        title="大学甄别"
        @click-left="navigatorBack"
      />
      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
    </view>

    <view
      @click="handleShow"
      class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx] w-max mx-[32rpx] mt-[40rpx]"
    >
      {{ searchParams.locationName || '请选择省份' }}
      <view class="i-carbon-chevron-down"></view>
    </view>

    <view class="flex flex-col px-[32rpx]">
      <view class="flex items-center justify-between input-wrapper-class">
        <input
          v-model="searchParams.collegeName"
          placeholder="请输入院校名称"
          confirm-type="done"
          class="flex-auto"
        />
        <view class="text-[#1580FF] text-[24rpx] search-text" @click="handleConfirm">查询</view>
      </view>
    </view>

    <view class="h-[16rpx] bg-[#F8F8F8] my-[40rpx]"></view>

    <scroll-view scroll-y class="flex flex-col flex-1 pb-safe px-[32rpx] w-auto" enable-flex>
      <view class="h-full flex flex-col">
        <!-- 头部 -->
        <view
          class="flex items-center justify-between bg-[#F7F7F7] text-[24rpx] text-[#333] font-semibold border-header sticky top-0"
        >
          <view class="flex items-center py-[16rpx] pl-[22rpx] w-[37%] border-right">
            <text>院校名称</text>
          </view>
          <view class="flex items-center justify-center py-[16rpx] w-[35%] border-right">
            <text>办学地点</text>
          </view>
          <view class="flex items-center justify-center py-[16rpx] w-[28%]">
            <text>院校鉴别</text>
          </view>
        </view>

        <view class="flex-1 flex flex-col">
          <view
            class="flex items-center justify-between text-[24rpx] text-[#333] border-body"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <view class="flex items-center py-[16rpx] pl-[22rpx] w-[37%] border-right">
              <text>{{ item.universityName }}</text>
            </view>
            <view class="flex items-center justify-center py-[16rpx] w-[35%] border-right h-full">
              <text>{{ item.locationName }}</text>
            </view>
            <view class="flex items-center justify-center py-[16rpx] w-[28%] h-full">
              <text :style="{ color: item.type === 1 ? '#FF4242' : '#000' }">
                {{ item.type === 1 ? '虚假大学' : '真实大学' }}
              </text>
            </view>
          </view>
          <view
            class="flex flex-col items-center justify-center text-[22rpx] text-[#333] border-body mt-auto flex-1"
            v-if="tableData.length === 0"
          >
            <image
              src="data:image/png;base64,[encoded data, 7048 characters]"
              mode="scaleToFill"
              class="w-[240rpx] h-[240rpx]"
            />
            <view class="text-[28rpx] mt-[30rpx] px-[20rpx] text-[#666]">没有数据哦~</view>
          </view>
        </view>
      </view>
    </scroll-view>

    <ActionSheet v-model:show="show" title="省份">
      <template>
        <Region
          @change="handleRegionChangeCode"
          @change-name="handleRegionChangeName"
          :defaultValue="searchParams.locationCode ? [searchParams.locationCode] : []"
          :max="1"
          class="custom-check-group w-full"
        />
      </template>
    </ActionSheet>
  </view>
</template>

<script lang="ts" setup>
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

import Region from '@/pages-sub/home/components/Region.vue'
import { verifyUniversity } from '@/service/index/api'

const searchParams = ref({
  locationCode: '',
  locationName: '',
  collegeName: '',
})
const show = ref(false)
const handleShow = () => {
  show.value = true
}

const handleRegionChangeName = (val) => {
  searchParams.value.locationName = val.join(',')
}
const handleRegionChangeCode = (val) => {
  if (val.length > 0) {
    show.value = false
  }
  searchParams.value.locationCode = val.length > 0 ? val[0] : ''
  getUniversityList()
}

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

const tableData = ref([])
const getUniversityList = () => {
  verifyUniversity({
    keyword: searchParams.value.collegeName,
    provinceName: searchParams.value.locationName,
  }).then((res) => {
    if (res.code === 200) {
      let result = res.result as any[]
      tableData.value = result
    } else {
      tableData.value = []
    }
  })
}

const handleConfirm = () => {
  show.value = false
  getUniversityList()
}

onLoad(() => {
  getUniversityList()
})
</script>

<style lang="scss" scoped>
@import '@/pages-evaluation-sub/styles/navbar-background.scss';
@import '@/pages-sub/home/styles/search-input.scss';
@import '@/pages-sub/home/styles/picker-view-btn.scss';
@import '@/pages-sub/home/styles/grid-checkbox.scss';

.border-right {
  border-right: 2rpx solid #eeeeee;
}

.border-header {
  border: 2rpx solid #eeeeee;
}
.border-body {
  border-bottom: 2rpx solid #eeeeee;
  border-left: 2rpx solid #eeeeee;
  border-right: 2rpx solid #eeeeee;
}
</style>
