<template>
  <view class="flex p-[32rpx] flex-col bg-[#fff]">
    <view class="flex items-center w-full justify-between">
      <view class="flex flex-col items-center">
        <view class="title">{{ universityResult?.builddate }}</view>
        <view class="name">创建时间</view>
      </view>
      <view class="flex flex-col items-center">
        <view class="title">教育部</view>
        <view class="name">隶属于</view>
      </view>
      <view class="flex flex-col items-center">
        <view class="title">{{ universityResult?.utype.join('/') }}</view>
        <view class="name">院校类型</view>
      </view>
      <view class="flex flex-col items-center">
        <view class="title">{{ universityResult?.resourcecount.doctorate || '-/-' }}</view>
        <view class="name">博士点</view>
      </view>
      <view class="flex flex-col items-center">
        <view class="title">{{ universityResult?.resourcecount.master || '-/-' }}</view>
        <view class="name">硕士点</view>
      </view>
    </view>

    <view class="line-clamp-4 mt-[14rpx] text-[26rpx] text-[#636363] line-height-[1.6]">
      {{ universityResult?.detail }}
    </view>
    <button
      block
      class="mt-[24rpx] rounded-[8rpx]! bg-[#f8f8f8]! w-full text-[#303030]! text-[28rpx]! flex! items-center! justify-center! gap-[16rpx]"
      @click="show = true"
      v-if="universityResult?.detail"
    >
      查看全部
      <view class="i-carbon-chevron-down rotate-270"></view>
    </button>

    <ActionSheet v-model:show="show" title="院校简介" :show-close="true">
      <view class="text-[26rpx] text-[#636363] px-[32rpx] pt-[32rpx] line-height-[1.6]">
        {{ universityResult?.detail }}
      </view>
    </ActionSheet>
  </view>
</template>

<script lang="ts" setup>
import { UniversityResult } from '@/types/app-type'

import ActionSheet from '@/pages-sub/components/ActionSheet.vue'

defineProps({
  universityResult: {
    type: Object as () => UniversityResult,
    default: () => {},
  },
})

const show = ref(false)
</script>

<style lang="scss" scoped>
.title {
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 6rpx;
}

.name {
  font-weight: 400;
  font-size: 22rpx;
  color: #86909c;
}
</style>
