<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.assessmentDate" />
			<wd-cell size="large" title="单位" :value="zbInfo.templetName_dictText" />
			<wd-cell size="large" title="当月人数" :value="zbInfo.monthNumber" />
			<wd-cell size="large" title="本次兑现合计" :value="zbInfo.redemptionTotal" />
			<wd-collapse v-model="collapse">
				<wd-collapse-item title="考核绩效" name="item01">
					<wd-cell v-for="(item, index) in zbBtInfo" :key="index" :title="item.name"
						:value="getKhjxValue(item.id)" />
				</wd-collapse-item>
			</wd-collapse>
			<wd-cell size="large">
				<template #title>
					<view style="display: inline-block">考核公报</view>
				</template>
				<view style="color: blue;" @click="onlinePreview(zbInfo.bmKhgb)">
					{{getFilename(zbInfo.bmKhgb)}}
				</view>
			</wd-cell>
		</wd-cell-group>

		<!-- 子表内容 -->
		<wd-collapse v-model="fbCollapse" v-if="tabbar == '1'">
			<div style="display: flex;justify-content: space-between;padding: 10px 15px;font-weight: bold;">
				<span>已分配金额: {{ sumJx }}</span>
				<span>待分配金额: {{ (allJx - 0) - (sumJx - 0) }}</span>
			</div>
			<wd-collapse-item v-for="(fbItem, fbIndex) in fbInfo" :key="fbIndex" :title="fbItem.userName"
				:name="'item' + (fbIndex + 1)">
				<wd-cell-group border>
					<wd-cell size="large" title="单位/部门" :value="fbItem.depart_dictText" />
					<wd-cell size="large" title="劳动合同号" :value="fbItem.ldhth" />
					<wd-cell size="large" title="岗位/职务" :value="fbItem.gw" />
					<wd-cell size="large" title="绩效工资合计" :value="fbItem.jxgz" />
					<wd-collapse v-model="fbCollapse2">
						<wd-collapse-item title="绩效详情" :name="'item0' + (fbIndex + 1)">
							<wd-cell v-for="(item, index) in fbBtInfo" :key="index" :title="item.name"
								:value="getJxDetailValue(fbItem.id, item.id)" />
						</wd-collapse-item>
					</wd-collapse>
					<wd-cell size="large" title="备注" :value="fbItem.bz" />
				</wd-cell-group>
			</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>

	<!-- 固定在底部的TabBar -->
	<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 {
		queryKhssZbByIdApi,
		queryKhssZbBtByIdApi,
		queryKhssFbByIdApi,
		queryKhssFbBtByIdApi,
		queryKhssAllSumByIdApi
	} from '@/api/bpm'
	import {
		getFilename
	} from '@/utils'

	// 响应式数据
	const tabbar = ref(0)
	const zbInfo = ref({})
	const fbInfo = ref([])
	const zbBtInfo = ref([])
	const fbBtInfo = ref([])
	const collapse = ref([''])
	const fbCollapse = ref([''])
	const fbCollapse2 = ref([''])
	const jxxqList = ref([])
	const sumJx = ref(0)
	const allJx = ref(0)
	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 () => {
		const zbRes = await queryKhssZbByIdApi(props.formData.dataId)
		if (zbRes.success) {
			zbInfo.value = zbRes.result.records[0]
			allJx.value = zbInfo.value.redemptionTotal
			if (zbInfo.value.jxxqs) {
				jxxqList.value = zbInfo.value.jxxqs
			}
			if (zbInfo.value.khjxZbId) {
				const btRes = await queryKhssZbBtByIdApi(zbInfo.value.khjxZbId)
				zbBtInfo.value = btRes.result
			}
			if (zbInfo.value.jxfpBtId) {
				const btRes = await queryKhssFbBtByIdApi(zbInfo.value.jxfpBtId)
				fbBtInfo.value = btRes.result
			}
		}

		const fbRes = await queryKhssFbByIdApi({
			mainId: props.formData.dataId
		})
		fbInfo.value = fbRes.result.records
		total.value = fbRes.result.total

		queryKhssAllSumByIdApi(props.formData.dataId).then(res => {
			sumJx.value = res.result
		})
	}

	// 获取考核绩效值
	const getKhjxValue = (khjxId) => {
		if (!jxxqList.value || jxxqList.value.length === 0) return ''
		const item = jxxqList.value.find(item => item.khjxId === khjxId)
		return item ? item.numValue : ''
	}

	// 获取绩效详情值
	const getJxDetailValue = (mainId, jxfpBtId) => {
		if (!fbInfo.value || fbInfo.value.length === 0) return ''
		const currentItem = fbInfo.value.find(item => item.id === mainId)
		if (!currentItem || !currentItem.jxxfpSaves) return ''
		const detail = currentItem.jxxfpSaves.find(save => save.jxfpBt === jxfpBtId)
		return detail ? detail.value : ''
	}

	const handleChange = (value) => {
		fbInfo.value = []
		queryKhssFbByIdApi({
			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()
	})

	onReady(() => {
		initTabbarHeight()
		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>