<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '我的收藏',
  },
}
</route>

<template>
  <z-paging
    ref="paging"
    use-virtual-list
    :force-close-inner-list="true"
    cell-height-mode="dynamic"
    @virtualListChange="virtualListChange"
    @query="queryList"
    :auto-show-system-loading="true"
  >
    <!-- <template #top>
      <z-tabs
        :current="currentTab"
        :list="tabsList"
        :scrollCount="4"
        inactive-color="#BFBFBF"
        active-color="#303030"
        :bar-style="{ backgroundColor: '#1580FF' }"
        :tabsStyle="{ position: 'sticky', top: '0', zIndex: '9' }"
        @change="handleTabChange"
        v-bind="{} as any"
      />
    </template> -->
    <view
      class="item-wrapper"
      :id="`zp-id-${item.zp_index}`"
      :key="item.zp_index"
      v-for="item in starList"
    >
      <view
        class="flex gap-[24rpx] py-[40rpx] border-bt"
        v-if="currentTab === 0"
        @click.stop="navigatorTo(item)"
      >
        <view class="min-w-[112rpx] min-h-[112rpx] w-[112rpx] h-[112rpx]">
          <image class="" :src="item.logo" mode="scaleToFill" />
        </view>
        <view class="flex flex-col flex-1">
          <text class="text-[28rpx] text-[#333] font-semibold mb-[6rpx]">
            {{ item.name }}
          </text>
          <view class="flex flex-wrap items-center gap-[8rpx] mb-[16rpx]">
            <view
              class="truncate max-w-[136rpx] bg-[#f8f8f8] rounded-[4rpx] text-[20rpx] px-[8rpx] py-[2rpx]"
              v-for="(fea, fIndex) in item.features.slice(0, 5)"
              :key="fIndex"
            >
              {{ fea }}
            </view>
          </view>
          <text class="text-[22rpx] text-[#999] font-normal">
            {{ item.cityName }}.{{ item.nature }}
          </text>
        </view>
        <button class="collect-btn" plain @click.stop="handleStar(item)">
          <view class="i-carbon-star-filled text-[#FFB032]" v-if="item.isStar"></view>
          <view class="i-carbon-star" v-else></view>
          收藏
        </button>
      </view>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
// import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import { addUnCollection, deleteUnCollection, getUnCollectionList } from '@/service/index/api'
import { useUserStore } from '@/store'

const userStore = useUserStore()

// const tabsList = ['院校']
const currentTab = ref(0)

// const handleTabChange = (index: number) => {
//   currentTab.value = index
// }

const starList = ref([])
const paging = ref(null)

const queryList = (page: number, pageSize: number) => {
  getUnCollectionList({
    Page: page,
    PageSize: pageSize,
    SearchKey: '',
  }).then((res) => {
    if (res.code === 200) {
      paging.value.complete((res.result as any[]).map((item) => ({ ...item, isStar: true })))
    }
  })
}
const virtualListChange = (_vList) => {
  starList.value = _vList
}

const handleStar = (item: any) => {
  if (item.isStar) {
    deleteUnCollection({
      wxId: userStore.userInfo.estimatedAchievement.wxId,
      uId: item._id,
    }).then((resp) => {
      if (resp.code === 200) {
        item.isStar = false
      }
    })
  } else {
    addUnCollection({
      wxId: userStore.userInfo.estimatedAchievement.wxId,
      uId: item._id,
    }).then((resp) => {
      if (resp.code === 200) {
        item.isStar = true
      }
    })
  }
}
const navigatorTo = (item: any) => {
  uni.navigateTo({ url: `/pages-sub/home/college/info?collegeId=${item._id}` })
}
</script>
<style lang="scss" scoped>
.collect-btn {
  border-radius: 8rpx;
  border: 2rpx solid #eeeeee;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  line-height: 1;
  padding: 8rpx 12rpx;
  height: max-content;
}
.item-wrapper {
  padding: 0 32rpx;
  align-items: center;
}

.border-bt {
  border-bottom: 2rpx solid #eeeeee;
}
</style>
