<template>
	<!-- 可滚动内容区域 -->
	<scroll-view class="content-scroll" :style="{ height: scrollViewHeight }" scroll-y :scroll-top="scrollTop">
		<!-- 主表内容 -->
		<wd-cell-group border v-if="tabbar == '0'">
			<wd-cell size="large" title="年月" :value="zbInfo.year + '年' + zbInfo.month + '月'" />
			<wd-cell size="large" title="考核指标" :value="zbInfo.assessmentIndicators" />
			<wd-cell size="large" title="指标类别" :value="zbInfo.indicatorCategory_dictText" />
			<wd-collapse v-model="khdxCollapse">
				<wd-collapse-item title="考核对象" name="考核对象">{{zbInfo.templetName_dictText}}</wd-collapse-item>
			</wd-collapse>
			<wd-cell size="large" title="考核周期" :value="zbInfo.assessmentCycle_dictText" />
			<wd-cell size="large" title="考核部门" :value="zbInfo.assessmentDepart_dictText" />
			<wd-collapse v-model="zbCollapse">
				<wd-collapse-item title="评价方法" name="评价方法">{{zbInfo.evaluationMethod}}</wd-collapse-item>
			</wd-collapse>
			<wd-cell size="large">
				<template #title>
					<view>
						<view style="display: inline-block">考核附件</view>
					</view>
				</template>
				<view style="color: blue;" @click="onlinePreview(zbInfo.khfj)">
					{{getFilename(zbInfo.khfj)}}
				</view>
			</wd-cell>
		</wd-cell-group>
		<!-- 子表内容 -->
		<wd-collapse v-model="collapse" v-if="tabbar == '1'">
			<wd-collapse-item v-for="(fbItem, fbIndex) in fbInfo" :key="fbIndex" :title="fbItem.depart_dictText"
				:name="'item' + (fbIndex + 1)">
				<wd-cell v-for="(btItem, btIndex) in btInfo" :key="btIndex" :title="btItem.name"
					:value="getDwkhValue(fbItem, btItem.id)" />
				<wd-cell>
					<template #title>
						<view>
							<view style="display: inline-block">附件</view>
						</view>
					</template>
					<view style="color: blue;" @click="onlinePreview(fbItem.annex)">
						{{getFilename(fbItem.annex)}}
					</view>
				</wd-cell>
			</wd-collapse-item>
		</wd-collapse>
		<wd-pagination v-if="tabbar == '1'" v-model="page" :total="total" @change="handleChange" />
		<!-- 底部占位视图 -->
		<view class="bottom-spacer" :style="{ height: safeAreaBottom }"></view>
	</scroll-view>

	<wd-tabbar fixed v-model="tabbar" class="safe-area-tabbar">
		<wd-tabbar-item title="指标考核主表" icon="cart"></wd-tabbar-item>
		<wd-tabbar-item title="指标考核子表" icon="user"></wd-tabbar-item>
	</wd-tabbar>
</template>

<script setup>
	import {
		queryZbkhZbByIdApi,
		queryZbkhFbByIdApi,
		queryZbkhBtByIdApi
	} from '@/api/bpm'
	import {
		getFilename
	} from '@/utils'
	const tabbar = ref(0)
	const zbInfo = ref({})
	const fbInfo = ref([])
	const btInfo = ref([])
	const btDataInfo = ref([])
	const zbCollapse = ref(['评价方法'])
	const khdxCollapse = ref(['考核对象'])
	const collapse = ref(['item01'])
	const page = ref(1)
	const total = ref(0)
	const scrollTop = ref(0)
	const tabbarHeight = ref(50)
	const systemInfo = ref({})
	const scrollViewHeight = ref('100vh')

	const props = defineProps({
		formData: {
			type: Object,
			default: () => {},
		}
	})

	// 计算安全区域底部高度
	const safeAreaBottom = computed(() => {
		// #ifdef H5
		return `${tabbarHeight.value}px`
		// #endif
		// #ifdef APP-PLUS || MP-WEIXIN
		return `calc(${tabbarHeight.value}px + env(safe-area-inset-bottom))`
		// #endif
	})
	
	
	// 获取系统信息
	const getSystemInfo = () => {
		uni.getSystemInfo({
			success: (res) => {
				systemInfo.value = res
				const safeBottom = res.safeAreaInsets?.bottom || 0
				scrollViewHeight.value =
					`calc(${res.windowHeight}px - ${tabbarHeight.value + safeBottom}px)`
			}
		})
	}
	
	// 初始化TabBar高度
	const initTabbarHeight = () => {
		const query = uni.createSelectorQuery().select('.safe-area-tabbar')
		query.boundingClientRect(data => {
			if (data) {
				tabbarHeight.value = data.height
				getSystemInfo()
			}
		}).exec()
	}
	
	const queryById = async () => {
		// 1. 获取主表数据
		const zbRes = await queryZbkhZbByIdApi(props.formData.dataId);
		if (zbRes.success) {
			zbInfo.value = zbRes.result.records[0];
			// 2. 获取标题数据（btInfo）
			if (zbInfo.value.dwkhBtId) {
				const btRes = await queryZbkhBtByIdApi(zbInfo.value.dwkhBtId);
				btInfo.value = btRes.result;
			}
		}
		// 3. 获取子表数据（fbInfo）
		const fbRes = await queryZbkhFbByIdApi({
			mainId: props.formData.dataId
		});
		fbInfo.value = fbRes.result.records;
		total.value = fbRes.result.total
	};

	const getDwkhValue = (fbItem, btId) => {
		if (!fbItem.dwkhSaves) return ''; // 如果没有 dwkhSaves，返回空
		const found = fbItem.dwkhSaves.find(item => item.dwkhBtId === btId);
		return found ? found.value : '';
	};
	
	const handleChange = (value) => {
		fbInfo.value = []
		queryZbkhFbByIdApi({
			mainId: props.formData.dataId,
			pageNo: value.value
		}).then(res => {
			fbInfo.value = res.result.records
			scrollTop.value = scrollTop.value ? 0 : 1 // 触发滚动
		})
	}
	

	const onlinePreview = (e) => {
		uni.navigateTo({
			url: `/pages/onlinePreview/detail?data=${e}`
		})
	}

	onMounted(() => {
		queryById()
		getSystemInfo()
	})
</script>

<style lang="scss" scoped>
	/* 滚动内容区域 */
	.content-scroll {
		width: 100%;
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 底部占位视图 */
	.bottom-spacer {
		width: 100%;
	}

	/* 安全区域适配 */
	.safe-area-tabbar {
		/* #ifdef APP-PLUS || MP-WEIXIN */
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
		/* #ifdef H5 */
		position: sticky;
		bottom: 0;
		/* #endif */
	}
</style>