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

<template>
  <view class="flex flex-col h-screen">
    <view class="relative">
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        @click-left="navigatorBack"
        :title="universityBaseInfo?.universityResult.name"
        content-class="justify-between"
      ></Navbar>
      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
    </view>

    <view class="flex-1 flex flex-col pb-safe overflow-y-auto">
      <view class="flex items-center p-[32rpx]" hover-class="none">
        <image
          class="w-[104rpx] h-[104rpx]"
          :src="universityBaseInfo?.universityResult.logo"
          :lazy-load="true"
        ></image>
        <view class="flex flex-col ml-[24rpx]">
          <text class="text-[32rpx] font-semibold text-[#303030]">
            {{ universityBaseInfo?.universityResult.name }}
          </text>
          <text class="text-[22rpx] font-normal text-[#303030] mt-[6rpx]">
            {{ universityBaseInfo?.universityResult.provinceName }}·{{
              universityBaseInfo?.universityResult.level === 0 ? '本科' : '专科'
            }}·{{ universityBaseInfo?.universityResult.nature }}
          </text>
          <text
            class="mt-[14rpx] text-[22rpx] font-normal text-[#303030] max-w-[400rpx] truncate"
            @click="show = true"
          >
            {{ universityBaseInfo?.universityResult.features.slice(0, 4).join('/&nbsp;') }}
          </text>
        </view>
        <button class="collect-btn whitespace-nowrap" plain @click="handleStar">
          <view
            class="i-carbon-star-filled min-w-[24rpx] min-h-[24rxp] bg-amber"
            v-if="startFlag"
          ></view>
          <view class="i-carbon-star min-w-[24rpx] min-h-[24rxp]" v-else></view>
          <view class="leading-[1]">收藏</view>
        </button>
      </view>

      <view class="mb-[32rpx] h-[126rpx] min-h-[126rpx]">
        <swiper
          class="mx-[32rpx]"
          circular
          :autoplay="true"
          :indicator="false"
          :display-multiple-items="universityBaseInfo?.universityResult.imglist ? 3 : 0"
        >
          <swiper-item
            v-for="(item, index) in universityBaseInfo?.universityResult.imglist"
            :key="item"
            class="flex justify-center"
          >
            <image
              :src="item"
              mode="scaleToFill"
              class="w-full h-full mx-[4rpx] rounded-[8rpx]"
              @click.stop="handlePreviewImage(item, index)"
            />
          </swiper-item>
        </swiper>
      </view>
      <view class="sticky top-0 z-9">
        <z-tabs
          :current="currentTab"
          :list="tabsList"
          :scrollCount="4"
          inactive-color="#BFBFBF"
          active-color="#303030"
          :bar-style="{ backgroundColor: '#1580FF' }"
          @change="handleTabChange"
          v-bind="{} as any"
        />
      </view>
      <view class="bg-[#f8f8f8]" v-show="currentTab === 0">
        <Profile :university-result="universityBaseInfo?.universityResult" />
        <FirstClass
          :id="collegeId"
          :level="`${universityBaseInfo?.universityResult.level === 0 ? '本科' : '专科'}`"
        />
        <Colleges :id="collegeId" />
      </view>
      <view class="bg-[#f8f8f8] flex-1" v-show="currentTab === 1">
        <EnrollmentPlan :id="collegeId"></EnrollmentPlan>
      </view>
      <EnrollmentIntro :id="collegeId" v-show="currentTab === 2" />
      <EnrollmentMark class="flex-1" :id="collegeId" v-show="currentTab === 3" />
      <Situation class="flex-1" :id="collegeId" v-show="currentTab === 4" />
    </view>

    <ActionSheet v-model:show="show" title="院校特色" :show-close="true">
      <view class="text-[24rpx] text-[#636363] px-[32rpx] pt-[32rpx]">
        {{ universityBaseInfo?.universityResult.features.join('/&nbsp;') }}
      </view>
    </ActionSheet>
  </view>
</template>

<script lang="ts" setup>
import Profile from './components/Profile.vue'
import FirstClass from './components/FirstClass.vue'
import Colleges from './components/Colleges.vue'
import EnrollmentPlan from './components/EnrollmentPlan.vue'
import EnrollmentIntro from './components/EnrollmentIntro.vue'
import EnrollmentMark from './components/EnrollmentMark.vue'
import Situation from './components/Situation.vue'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

import {
  getUniversityInfo,
  getUnCollectionDetail,
  deleteUnCollection,
  addUnCollection,
} from '@/service/index/api'
import { useUserStore } from '@/store'

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

const universityBaseInfo = ref()

const collegeId = ref(0)

const show = ref(false)

const handlePreviewImage = (src: string, index: number) => {
  uni.previewImage({
    urls: universityBaseInfo.value?.universityResult.imglist,
    current: index,
  })
}

onLoad((options) => {
  collegeId.value = Number(options.collegeId) || 0
  getUniversityInfo({ Id: collegeId.value }).then((res) => {
    if (res.code === 200) {
      universityBaseInfo.value = res.result
      getUnCollectionDetail({
        Id: universityBaseInfo.value.universityResult._id,
      }).then((resp) => {
        if (resp.code === 200 && !!resp.result) {
          startFlag.value = true
        } else {
          startFlag.value = false
        }
      })
    }
  })
})

const tabsList = ['院校简介', '招生计划', '招生简章', '录取分数线', '查扩缩招']
const currentTab = ref(0)

const handleTabChange = (index: number) => {
  currentTab.value = index
}

const startFlag = ref(false)
const handleStar = () => {
  if (startFlag.value && universityBaseInfo.value.universityResult._id) {
    // 收藏了，取消收藏
    deleteUnCollection({
      wxId: userStore.userInfo.estimatedAchievement.wxId,
      uId: universityBaseInfo.value.universityResult._id,
    }).then((resp) => {
      if (resp.code === 200) {
        startFlag.value = false
      }
    })
  } else {
    addUnCollection({
      wxId: userStore.userInfo.estimatedAchievement.wxId,
      uId: universityBaseInfo.value.universityResult._id,
    }).then((resp) => {
      if (resp.code === 200) {
        startFlag.value = true
      }
    })
  }
}
</script>

<style lang="scss" scoped>
:deep(.custom-background) {
  background-image: linear-gradient(
    180deg,
    rgb(177, 221, 250) 0,
    rgb(177, 221, 250) 14%,
    rgb(232, 244, 252) 68%,
    rgba(255, 255, 255, 1) 86%,
    rgba(255, 255, 255, 1) 100%,
    rgba(255, 255, 255, 1) 100%
  );
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
}

:deep(.collect-btn) {
  border: 2rpx solid #eee !important;
  color: #636363 !important;

  min-width: max-content !important;
  border-radius: 12rpx !important;
  margin-right: 0 !important;
  padding: 12rpx !important;
  line-height: 1 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  font-size: 24rpx !important;
  width: max-content !important;
}
</style>
