<script lang="ts" setup>
import { getSchoolCollection, starCollection } from "@/service"
import { useUserStore } from "@/store"
import { storeToRefs } from "pinia";

const props = defineProps({
    schoolDetail: {
        type: Object,
        default: () => ({
            schoolName: '',
            tags: '',
            region: '',
            schoolNature: "",
            imageList: []
        })
    }
})

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore)
const isStar = ref(false)

const handlePreviewImage = (src: string, index: number) => {
    uni.previewImage({
        urls: props.schoolDetail.imageList,
        current: index,
    })
}

const starSchool = () => {
    starCollection({ data: { wxId: userInfo.value.userExtend.wxId, uId: props.schoolDetail.id } }).then(resp => {
        if (resp.code === 200) {
            isStar.value = resp.result
            if (resp.result) {
                uni.showToast({ title: "收藏成功" })
            }
            else {
                uni.showToast({ title: "已取消收藏" })
            }

        }
    })
}
onLoad(() => {
    getSchoolCollection().then((resp) => {
        if (resp.code === 200) {
            isStar.value = resp.result.some(school => school.id === props.schoolDetail.id)
        } 
    })
})

</script>

<template>
    <view class="mx-[30rpx]">
        <view class="flex items-center">
            <view class="flex flex-col">
                <text class="font-600 text-[40rpx] text-[#000]">{{ schoolDetail.schoolName }}</text>
                <view class="flex items-center gap-[10rpx] my-[14rpx] flex-wrap" v-if="schoolDetail.tags">
                    <view
                        class="rounded-[8rpx] bg-[#F8F8F8] px-[10rpx] py-[4rpx] text-[24rpx] text-[#666] first:border-solid border-red border-[1rpx]"
                        v-for="feature in schoolDetail.tags.split('、')" :key="feature">{{ feature }}</view>
                </view>
                <view class="text-[#303030] text-[24rpx] mb-[10rpx]">{{ schoolDetail.region }}·{{
                    schoolDetail.schoolNature }}</view>
            </view>
            <view
                class="flex items-center rounded-[8rpx] border-[2rpx] border-solid border-[#eee] bg-[#fff] py-[8rpx] px-[12rpx] ml-auto text-[#636363] text-[22rpx] min-w-max"
                @click="starSchool">
                <sar-icon :name="!isStar ? 'star' : 'star-fill'" size="12" class="mr-[8rpx]"
                    :color="!isStar ? '#636363' : '#73b3ff'" />
                收藏
            </view>
        </view>
        <swiper class="basis-full h-[126rpx]" circular :autoplay="true" :indicator="false" v-if="schoolDetail.imageList"
            :display-multiple-items="schoolDetail.imageList.length > 2 ? 3 : 1">
            <swiper-item v-for="(item, index) in schoolDetail.imageList" :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>
</template>

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