<template>
	<view class="content">
        <view class="navbox">
			<view class="status_bar"></view>
			<uni-nav-bar
      left-icon="left"
      title="随访计划"
      @clickLeft="goBack"
     
      color="#8B2316"
     
      :border="false"
      backgroundColor="#eee"
    >
      <template #right>
        <view class="nav-right">
         
          <text class="save-btn" @click="showAddMenu"  >添加</text>
        </view>
      </template>
    </uni-nav-bar>
		</view>
		
			<scroll-view 
				class="plan-scroll" 
				scroll-y="true"
				refresher-enabled="true"
				:refresher-triggered="followUpRefreshing"
				@refresherrefresh="onFollowUpRefresh"
				@scrolltolower="onFollowUpLoadMore"
				:lower-threshold="100"
			>
				<view class="plan-list" v-if="groupedFollowUpList.length > 0">
					<view class="plan-group" v-for="group in groupedFollowUpList" :key="group.yearMonth">
						<view class="group-header">{{ group.yearMonth }}</view>
						<view class="plan-card" v-for="item in group.items" :key="item.uuid" @click="goFollowDetail(item)">
							<view class="left-rail">
								<text class="day">{{ formatDay(item.datetime) }}</text>
							</view>
							<view class="linebox">
								<up-image  :src="lineImg" width="14rpx" height="180rpx" ></up-image>
							</view>
							<view class="right-content">
								<view class="leftcontent">
									<view class="note">{{ item.note }}</view>
									<view class="name">{{ item.patientname }}</view>
								</view>
								<uni-icons type="forward" size="20" color="#999"></uni-icons>
							</view>
						</view>
					</view>
					<view class="load-more" v-if="followUpLoading">
						<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
						<text class="load-text">加载中...</text>
					</view>
					<view class="no-more" v-if="!followUpHasMore && followUpList.length > 0">
						<text class="no-more-text">没有更多数据了</text>
					</view>
				</view>
				<empty v-else></empty>
			</scroll-view>

			<!-- <view class="floating-add-btn" @click="showAddMenu">
				<uni-icons type="plus" size="24" color="#ffffff"></uni-icons>
				<text class="btn-text">添加</text>
			</view> -->

			<view class="add-menu-popup" v-if="showAddMenuFlag" @click="hideAddMenu">
				<view class="menu-content" @click.stop>
					<view class="menu-item" @click="addSchedule">
						<up-image  :src="dayImg" width="34rpx" height="34rpx" ></up-image>
						<text class="menu-text">添加日程</text>
					</view>
					<view class="menu-divider"></view>
					<view class="menu-item" @click="addFollowUpPlan">
						<up-image  :src="planImg" width="34rpx" height="34rpx" ></up-image>
						<text class="menu-text">添加随访计划</text>
					</view>
				</view>
			</view>
		
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import api from '@/api/api.js'
import navTo from '@/utils/navTo.js'
import dayImg from '@/static/visit_data11.png'
import planImg from '@/static/visitplan.png'
import lineImg from '@/static/item_visitplan_fg.png'

const formatYearMonth = (input) => {
	if (!input) return ''
	const d = dayjs(input)
	return d.isValid() ? d.format('YYYY年MM月') : ''
}
const formatDay = (input) => {
	if (!input) return ''
	const d = dayjs(input)
	return d.isValid() ? d.format('DD日') : ''
}

const followUpList = ref([])
const followUpLoading = ref(false)
const followUpRefreshing = ref(false)
const followUpHasMore = ref(true)
const followUpPageSize = ref(10)
const page = ref(1)

const groupedFollowUpList = computed(() => {
	if (!followUpList.value || followUpList.value.length === 0) return []
	const groups = new Map()
	followUpList.value.forEach(item => {
		const yearMonth = formatYearMonth(item.datetime)
		if (!groups.has(yearMonth)) groups.set(yearMonth, [])
		groups.get(yearMonth).push(item)
	})
	return Array.from(groups.entries()).map(([yearMonth, items]) => ({
		yearMonth,
		items: items.sort((a, b) => new Date(a.datetime) - new Date(b.datetime))
	})).sort((a, b) => new Date(a.items[0].datetime) - new Date(b.items[0].datetime))
})

const getFollowUpList = async (isRefresh = false) => {
	if (followUpLoading.value) return
	followUpLoading.value = true
	try {
		const currentPage = isRefresh ? 1 : page.value
		const res = await api.followUpList({ page: currentPage, pageSize: followUpPageSize.value })
		if (res.code === 200) {
			const newData = res.data.list || []
			if (isRefresh) {
				followUpList.value = newData
				page.value = 1
			} else {
				followUpList.value = [...followUpList.value, ...newData]
			}
			followUpHasMore.value = newData.length >= followUpPageSize.value
			if (!isRefresh) page.value++
		}
	} catch (e) {
		uni.showToast({ title: '获取数据失败', icon: 'error' })
	} finally {
		followUpLoading.value = false
		followUpRefreshing.value = false
	}
}

const onFollowUpRefresh = async () => {
	followUpRefreshing.value = true
	await getFollowUpList(true)
	uni.showToast({ title: '刷新成功', icon: 'none' })
}
const onFollowUpLoadMore = async () => {
	if (!followUpHasMore.value || followUpLoading.value) return
	await getFollowUpList(false)
}
const goBack = () => uni.navigateBack()
const showAddMenuFlag = ref(false)
const showAddMenu = () => { showAddMenuFlag.value = true }
const hideAddMenu = () => { showAddMenuFlag.value = false }
const addFollowUpPlan = () => { showAddMenuFlag.value = false; uni.navigateTo({ url: '/pages_app/visit/visit?from=visitPlan' }) }
const addSchedule = () => { showAddMenuFlag.value = false; uni.navigateTo({ url: '/pages_app/schedule/schedule' }) }
const goFollowDetail = (raw) => { if (!raw) return; navTo({ url: `/pages_app/followDetail/followDetail?followUpUuid=${encodeURIComponent(raw.uuid || '')}&patient_name=${raw.patientname}` }) }

onShow(() => {
	followUpList.value = []
	page.value = 1
	followUpHasMore.value = true
	followUpLoading.value = false
	followUpRefreshing.value = false
	getFollowUpList(true)
})
</script>

<style lang="scss" scoped>
.save-btn {
  font-size: 32rpx;
  color: #8b2316;
  font-weight: 500;
}

.content { background-color: #f5f5f5; height: 100vh; overflow-y: hidden; }
.linebox{ margin:0 20rpx; }
.plan-scroll{ position: fixed; top: calc(var(--status-bar-height) + 44px); left: 0; right: 0; bottom:0rpx;z-index:1; }

.plan-list{ padding-bottom: 20rpx; }
.plan-group{ background:#f5f5f5; }
.group-header{ text-align: center; background:#e4e4e4; color:#333; font-size: 30rpx; padding: 20rpx 30rpx; }
.plan-card{ display:flex; align-items:center; background:#fff; padding: 26rpx 30rpx; border-bottom:1rpx solid #f0f0f0; }
.left-rail{ display:flex; align-items:center; color:#8B2316; }
.left-rail .day{ font-size: 36rpx; margin-right: 12rpx; }
.right-content{ flex:1; display:flex; align-items:center; justify-content:space-between; }
.right-content .note{ font-size: 30rpx; color:#333; }
.right-content .name{ margin-top: 30rpx; font-size: 28rpx; color:#8B2316; }
.load-more { display:flex; align-items:center; justify-content:center; padding:30rpx; color:#999; }
.load-more .load-text { margin-left:10rpx; font-size:28rpx; }
.no-more { display:flex; align-items:center; justify-content:center; padding:30rpx; }
.no-more .no-more-text{ font-size:28rpx; color:#999; }
.floating-add-btn { position: fixed; bottom: 140rpx; right: 30rpx; background-color: #8B2316; border-radius: 50%; width: 100rpx; height: 100rpx; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:999; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); }
.floating-add-btn .btn-text{ font-size:20rpx; color:#fff; margin-top:4rpx; }
.add-menu-popup { position: fixed; top:0; left:0; right:0; bottom:0; background-color: rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; z-index:1000; }
.menu-content { background:#fff; border-radius:20rpx; box-shadow:0 8rpx 24rpx rgba(0,0,0,0.2); width:80%; max-width:400rpx; overflow:hidden; position: fixed;
    top: calc(var(--status-bar-height) + 48px);
    z-index: 9999;
    right: 20rpx;}
.menu-item { display:flex; align-items:center; padding:30rpx 40rpx; border-bottom:1rpx solid #f0f0f0; }
.menu-item:last-child{ border-bottom:none; }
.menu-text{ font-size:32rpx; color:#333; margin-left:20rpx; }
.menu-divider{ height:1rpx; background:#f0f0f0; margin:0 40rpx; }
</style>

