<template>
  <view class="mt-[30rpx]">
    <RoundedBorder title="招生信息">
      <template>
        <view class="rounded-[40rpx] bg-white px-[24rpx] pt-[26rpx] pb-[24rpx]">
          <view class="text-[24rpx]">
            <view
              class="flex items-center border-[#DEEFFF] border-[2rpx] border-solid text-[#025FFF] font-500 bg-[#F5FAFF]"
            >
              <view
                class="w-[22%] text-center py-[14rpx] border-r-[#DEEFFF] border-r-[2rpx] border-r-solid"
              >
                招生对象
              </view>
              <view class="w-[78%] text-center py-[14rpx]">
                {{ new Date().getFullYear() }}年高考毕业生
              </view>
            </view>

            <view
              class="flex items-stretch border-[#DEEFFF] border-[2rpx] border-solid text-[#041017] border-t-[0rpx]"
            >
              <view
                class="w-[22%] text-center py-[14rpx] border-r-[#DEEFFF] border-r-[2rpx] border-r-solid font-500 flex items-center justify-center"
              >
                招生组合
              </view>
              <view class="w-[78%] text-left">
                <view
                  class="py-[14rpx] px-[20rpx] border-b-[#DEEFFF] border-b-[2rpx] border-b-solid"
                >
                  文化课：物化地、物化生、物化政、政史地、政史生
                </view>
                <view
                  class="py-[14rpx] px-[20rpx] border-b-[#DEEFFF] border-b-[2rpx] border-b-solid"
                >
                  艺术(美术、书法、音乐、舞蹈、航服):政史地、政史生
                </view>
                <view class="py-[14rpx] px-[20rpx]">
                  体育(田径、武术、足球、乒乓球、排球、柔道、摔跤、篮球):政史地、政史生
                </view>
              </view>
            </view>

            <view
              class="flex items-stretch border-[#DEEFFF] border-[2rpx] border-solid text-[#041017] font-500 border-t-[0rpx]"
            >
              <view
                class="w-[22%] flex flex-col items-center justify-center py-[14rpx] border-r-[#DEEFFF] border-r-[2rpx] border-r-solid"
              >
                文化课
                <view class="text-[22rpx] text-[#5E5E5E]">(最低分数线)</view>
              </view>
              <view class="w-[78%] text-left py-[14rpx]">
                <view class="px-[20rpx]">
                  文化课类最低高考一段线线下80分；艺术/体育类最低240分(单招200分)，如遇特殊情况需向学校申请是否录取。
                </view>
              </view>
            </view>
            <view
              class="flex items-stretch border-[#DEEFFF] border-[2rpx] border-solid text-[#041017] font-500 border-t-[0rpx]"
            >
              <view
                class="w-[22%] flex flex-col items-center justify-center py-[14rpx] border-r-[#DEEFFF] border-r-[2rpx] border-r-solid"
              >
                入学流程
              </view>
              <view class="w-[78%] text-left py-[14rpx]">
                <view class="px-[20rpx]">
                  学生登记基本信息，需提供高考成绩单，通过面试后录取。(其他组合学生人数达到要求即可开班)
                </view>
              </view>
            </view>
          </view>

          <view v-show="!isExpand">
            <view class="text-[24rpx] mt-[20rpx]">
              <view
                class="bg-[#F5FAFF] text-[#025FFF] text-[24rpx] font-500 text-center py-[14rpx] border-[#DEEFFF] border-[2rpx] border-solid"
              >
                班型设置
              </view>
              <view
                class="flex items-stretch border-[#DEEFFF] border-[2rpx] border-solid text-[#041017] border-t-[0rpx]"
                v-for="(item, index) in classSetting"
                :key="index"
              >
                <view
                  class="w-[22%] flex flex-col items-center justify-center py-[14rpx] border-r-[#DEEFFF] border-r-[2rpx] border-r-solid font-500"
                >
                  {{ item.left }}
                </view>
                <view class="w-[78%] text-left py-[14rpx]">
                  <view class="px-[20rpx]">{{ item.right }}</view>
                </view>
              </view>
            </view>

            <view class="text-[24rpx] mt-[20rpx]">
              <view
                class="bg-[#F5FAFF] text-[#025FFF] text-[24rpx] font-500 text-center py-[14rpx] border-[#DEEFFF] border-[2rpx] border-solid"
              >
                优秀毕业生名校奖励
              </view>
              <view
                class="flex items-stretch border-[#DEEFFF] border-[2rpx] border-solid text-[#041017] border-t-[0rpx]"
                v-for="(item, index) in excellentGraduate"
                :key="index"
              >
                <view
                  class="w-[33%] flex flex-col items-center justify-center py-[14rpx] border-r-[#DEEFFF] border-r-[2rpx] border-r-solid font-500"
                >
                  {{ item.left }}
                </view>
                <view class="w-[67%] text-center py-[14rpx]">
                  <view class="px-[20rpx]">{{ item.right }}</view>
                </view>
              </view>
            </view>
          </view>

          <view
            class="flex items-center justify-center border-[#DEEFFF] border-dashed border-[2rpx] py-[14rpx] border-t-[0rpx]"
            @click="handleClose"
          >
            <view class="text-[24rpx] text-[#1580FF] mr-[8rpx]">
              {{ isExpand ? '展开' : '收起' }}
            </view>
            <image
              src="https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/shouqi.png"
              mode="scaleToFill"
              class="w-[16rpx] h-[12rpx]"
              :style="isExpand ? 'transform:rotate(180deg)' : ''"
            />
          </view>
        </view>
      </template>
    </RoundedBorder>
  </view>
</template>

<script lang="ts" setup>
import RoundedBorder from './RoundedBorder.vue'

const isExpand = ref(false)

const classSetting = [
  { left: '分类管理', right: '文化课、艺术、体育独立分班，固定班型不走班' },
  { left: '领航班', right: '文化课设领航班和普通班，领航班招80人（40人/班）' },
  { left: '单招班', right: '体育设立普体班和单招班' },
]

const excellentGraduate = [
  { left: '清北文化课学生', right: '名校奖60万元' },
  { left: '清北艺体学生', right: '名校奖35万元' },
  { left: 'C9院校', right: '名校奖10万元' },
  { left: '985院校', right: '名校奖1万元' },
  { left: '211院校', right: '名校奖5000元' },
]

const handleClose = () => {
  isExpand.value = !isExpand.value
}
</script>

<style lang="scss" scoped></style>
