<template>
  <uv-skeletons v-if="loading" :skeleton="skeleton" />
  <view v-else class=" -mt-50 flex justify-between gap-20">
    <view class="flex flex-col items-center gap-10">
      <ie-image :src="info.logo" custom-class="w-140 h-140" :round="9999" />
      <uv-button v-if="!info.collected" type="primary" plain size="mini" shape="circle" icon="plus" text="关注"
        icon-size="12" icon-color="primary" @click="handleCollect" />
      <uv-button v-else type="primary" size="mini" shape="circle" text="已关注" icon-size="12" icon-color="primary"
        @click="handleCollectRemove" />
    </view>
    <view class="mt-50 flex-1">
      <view class="text-36 font-bold text-fore-title">{{ info.name }}</view>
      <view v-if="bxTags.length" class="mt-8 flex flex-wrap gap-8">
        <uv-tags v-for="t in bxTags" :key="t" :text="t" v-bind="getHighlightBindings(t)" @click="handleTagClick(t)" />
      </view>
      <uv-text type="tips" prefix-icon="empty-address" :icon-style="{ color: '#999999' }" size="12" :text="info.address"
        margin="8px 0 0 0" />
    </view>
  </view>
  <scroll-view scroll-x class="mt-30">
    <view class="inline-flex items-center gap-20 text-fore-title">
      <view class="flex-none min-w-120 p-28 flex flex-col items-center bg-back-light rounded-xl">
        <view>
          <text class="text-30 font-bold">{{ info.createdYear || '-' }}</text>
          <text class="ml-5 text-20">年</text>
        </view>
        <view class="text-24">建校时间</view>
      </view>
      <view class="flex-none min-w-120 p-28 flex flex-col items-center bg-back-light rounded-xl">
        <view class="text-30 font-bold">{{ info.star || '-' }}</view>
        <view class="text-24">竞争力</view>
      </view>
      <view class="flex-none min-w-120 p-28 flex flex-col items-center bg-back-light rounded-xl">
        <view class="text-30 font-bold">{{ info.comScore || '-' }}</view>
        <view class="text-24">综合评分</view>
      </view>
      <view v-if="userStore.isHN" class="flex-none min-w-120 p-28 flex flex-col items-center bg-back-light rounded-xl">
        <view class="text-30 font-bold">{{ info.tierName || '-' }}</view>
        <view class="text-24">院校实力</view>
      </view>
      <view class="flex-none min-w-120 p-28 flex flex-col items-center bg-back-light rounded-xl">
        <view class="text-30 font-bold">{{ info.collect || '-' }}</view>
        <view class="text-24">收藏量</view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { University } from "@/types/university";
import _ from "lodash";
import { concernUniversity, removeConcernedUniversity } from "@/api/modules/university";
import { useUserStore } from "@/store/userStore";

const props = defineProps<{
  info: University
  loading: boolean
}>()
const emits = defineEmits(['tag'])
const skeleton = [
  {
    type: 'flex',
    children: [
      {
        type: 'avatar',
        num: 1,
        style: 'width: 140rpx;height: 140rpx;marginRight: 20rpx;borderRadius: 100%;'
      },
      {
        type: 'line',
        num: 3,
        gap: '20rpx'
      }
    ]
  }
]
const userStore = useUserStore()
const isCultural = ref(false) //useUserStore() // 这是早先兼容河南文化类填报时的字段
const highlights = ['双高']
const tagAttrs = {
  type: 'info',
  plain: true,
  size: 'tiny',
  'class': 'pointer-events-none'
}
const starBinding = {
  ...tagAttrs,
  type: 'warning'
}
const tagHighlight = {
  ...tagAttrs,
  type: 'primary',
  plainFill: true
}

const bxTags = computed(() => {
  const { bxLevel, bxType } = props.info
  const tags = bxLevel ? bxLevel.split(',') : []
  if (bxType) {
    _.pull(tags, '双高')
    tags.push(bxType)
  }
  return tags
})

const isSpecialTag = (tag: string) => {
  return !isCultural.value && tag == props.info.bxType
}

const isHighlight = (tag: string) => {
  return highlights.includes(tag) || isSpecialTag(tag)
}

const getHighlightBindings = (tag: string) => {
  const attrs = isHighlight(tag) ? tagHighlight : tagAttrs
  return isSpecialTag(tag) ? { ...attrs, icon: 'question-circle', reverse: true, 'class': '' } : attrs
}

const handleTagClick = (tag: string) => {
  if (isSpecialTag(tag)) emits('tag')
}

const handleCollect = async () => {
  await concernUniversity({ universityId: props.info.id })
  props.info.collected = true
}

const handleCollectRemove = async () => {
  await removeConcernedUniversity({ universityId: props.info.id })
  props.info.collected = false
}
</script>

<style scoped></style>