<template>
	<view class="follow-page-wrap">
		<safe-nav-bar title="我的店铺关注" />
		<view class="follow-page">
			<scroll-view
				class="follow-page__scroll"
				scroll-y
				:style="{ height: scrollHeight }"
				refresher-enabled
				:refresher-triggered="refreshing"
				@refresherrefresh="onPullRefresh"
				@scrolltolower="onLoadMore"
			>
				<view v-if="loading && !list.length" class="follow-page__loading">
					<u-loading-icon mode="circle" />
				</view>

				<view v-else-if="loadFailed && !list.length" class="follow-page__error">
					<u-empty mode="list" text="加载失败" icon-size="80" />
					<text class="follow-page__retry" @click="reloadList(true)">点击重试</text>
				</view>

				<view v-else-if="!list.length" class="follow-empty">
					<u-empty mode="list" :text="emptyText" icon-size="80" />
					<button class="mine-btn-primary follow-empty__btn" @click="goHome">去逛逛</button>
				</view>

				<template v-else>
					<shop-follow-list
						:list="list"
						@item-click="onShopClick"
						@unfollow="onUnfollow"
					/>
					<view class="follow-page__footer">
						<text v-if="loadingMore">加载中...</text>
						<text v-else-if="finished">没有更多了</text>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import SafeNavBar from '@/components/common/SafeNavBar.vue'
import ShopFollowList from '@/components/shop/ShopFollowList.vue'
import { getShopFollowList } from '@/api/member'
import { unfollowShop } from '@/api/shop'
import { mapShopFollowList } from '@/utils/shopDisplay'
import { ensureApiToken } from '@/utils/apiAuth'
import { goShopHome } from '@/utils/shopNav'
import { SHOP_FOLLOW_PAGE_SIZE, SHOP_FOLLOW_EMPTY_TEXT } from '@/constants/shopFollow'
import { PAGE_HOME } from '@/utils/pageRoute'

const list = ref([])
const loading = ref(false)
const loadingMore = ref(false)
const finished = ref(false)
const loadFailed = ref(false)
const refreshing = ref(false)
const pageNum = ref(1)
const scrollHeight = ref('600px')
const emptyText = SHOP_FOLLOW_EMPTY_TEXT
const unfollowLoading = ref(false)

function calcScrollHeight() {
	try {
		const sys = uni.getSystemInfoSync()
		const h = sys.windowHeight || 600
		// 自定义导航栏 + 状态栏约 88px
		scrollHeight.value = `${h - 88}px`
	} catch (e) {
		scrollHeight.value = '600px'
	}
}

async function fetchPage(isReset) {
	if (isReset) {
		loading.value = true
		loadFailed.value = false
		pageNum.value = 1
		finished.value = false
	} else {
		if (finished.value || loadingMore.value) return
		loadingMore.value = true
	}
	try {
		const res = await getShopFollowList({
			pageNum: pageNum.value,
			pageSize: SHOP_FOLLOW_PAGE_SIZE
		})
		const rows = mapShopFollowList(res.rows || [])
		const total = Number(res.total) || 0
		if (isReset) {
			list.value = rows
		} else {
			list.value = list.value.concat(rows)
		}
		finished.value =
			rows.length < SHOP_FOLLOW_PAGE_SIZE || (total > 0 && list.value.length >= total)
		if (!finished.value) {
			pageNum.value += 1
		}
	} catch (e) {
		loadFailed.value = true
		if (isReset) {
			list.value = []
		}
	} finally {
		loading.value = false
		loadingMore.value = false
		refreshing.value = false
	}
}

function reloadList(isReset) {
	if (isReset) {
		pageNum.value = 1
	}
	fetchPage(isReset)
}

function onPullRefresh() {
	refreshing.value = true
	reloadList(true)
}

function onLoadMore() {
	if (!loading.value && !loadingMore.value && !finished.value && list.value.length) {
		fetchPage(false)
	}
}

function onShopClick(item) {
	if (item && item.shopId) {
		goShopHome(item.shopId)
	}
}

function onUnfollow(item) {
	if (!item || !item.shopId || unfollowLoading.value) return
	uni.showModal({
		title: '提示',
		content: `确定取消关注「${item.shopName || '该店铺'}」吗？`,
		success: (res) => {
			if (!res.confirm) return
			unfollowLoading.value = true
			unfollowShop(item.shopId)
				.then(() => {
					list.value = list.value.filter((row) => row.shopId !== item.shopId)
					uni.showToast({ title: '已取消关注', icon: 'none' })
				})
				.catch(() => {})
				.finally(() => {
					unfollowLoading.value = false
				})
		}
	})
}

function goHome() {
	uni.switchTab({ url: PAGE_HOME })
}

onShow(() => {
	if (!ensureApiToken(false)) return
	calcScrollHeight()
	reloadList(true)
})
</script>

<style lang="scss" scoped>
@import '@/styles/mine.scss';

.follow-page-wrap {
	min-height: 100vh;
	background: #f5f6f8;
}
.follow-page {
	flex: 1;
}
.follow-page__scroll {
	width: 100%;
}
.follow-page__loading,
.follow-page__error {
	padding: 80rpx 24rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.follow-page__retry {
	margin-top: 24rpx;
	font-size: 28rpx;
	color: #2e7d32;
}
.follow-empty {
	padding: 80rpx 48rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.follow-empty__btn {
	margin-top: 40rpx;
	width: 320rpx;
}
.follow-page__footer {
	padding: 24rpx;
	text-align: center;
	font-size: 24rpx;
	color: #999;
}
</style>
