<template>
  <ActionSheet v-model:show="innerShowFlag" :lazy-render="true">
    <template #title>
      <view class="flex items-center justify-between px-[32rpx] pt-[32rpx] pb-[24rpx]">
        <view class="flex flex-col gap-[14rpx]">
          <text class="text-[36rpx] text-[#303030] font-bold">{{ college?.name }}</text>
          <text class="text-[22rpx] text-[#505050]">
            {{ college?.city }}·{{ college?.educationCategory }}
          </text>
        </view>
        <view class="flex flex-col items-end gap-[40rpx] whitespace-nowrap">
          <view class="i-carbon-close-large w-[40rpx] h-[40rpx]" @click.stop="handleConfirm"></view>
          <view class="text-[22rpx]">
            <text>已填</text>
            <text class="text-[#1580FF]">{{ majorCount }}</text>
            <text>个</text>
          </view>
        </view>
      </view>
    </template>
    <CollegeMajor :college="college" v-bind="$attrs" v-if="college" />

    <template #footer>
      <view class="flex items-center justify-between mx-[32rpx] gap-[20rpx] pt-[16rpx]">
        <view class="cancel-btn" @click="handleConfirm">取消</view>
        <view class="submit-btn" @click="handleConfirm">确认</view>
      </view>
    </template>
  </ActionSheet>
</template>

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

const props = defineProps({
  college: Object,
  majorCount: Number,
  show: Boolean,
})
const emit = defineEmits<{
  (e: 'update:show', value: boolean): void
}>()

const innerShowFlag = computed({
  get: () => {
    return props.show
  },
  set: (value) => {
    emit('update:show', value)
  },
})

const handleConfirm = () => {
  emit('update:show', false)
}
</script>

<style lang="scss" scoped>
@import '@/pages-sub/home/styles/picker-view-btn.scss';
</style>
