<template>
	<view>
		<view class="wBox">
			<view class="tt">{{form.finalDocName}}</view>
			<view class="subtt" v-if="form.payTime">提交日期：<text>{{ form.payTime }}</text></view>
			<view class="subtt" v-if="form.payDeptName">提交单位：<text>{{ form.payDeptName }}</text></view>

			<view class="info" style="flex-wrap: wrap;">
				<view class="w45">共 <text class="text-danger"> {{ form.allPersonCount}} </text> 人</view>
				<view class="w45">新会员 <text class="text-danger"> {{ form.newPersonCount}} </text> 人</view>
				<view class="w45">续费合计 <text class="text-danger"> {{ form.oldPersonCount}} </text> 人</view>
				<view class="w45">费用合计 <text class="text-primary"> ¥{{ form.allPrice }} </text> </view>
			</view>
			<!-- 成员 -->
			<view class="userlist">
				<view class="item" v-for="n in list" :key="n.memId" @click="goPersonInfo(n)">
					<view class="photobox">
						<view class="colorful">{{n.personName?.slice(0,1)}}</view>
					</view>
					<view>
						<view class="name">{{n.personName}}<text>({{n.memberInfoName}})</text></view>
						<view class="date">原有效期至{{n.originValidityDate?.slice(0,10)||'--'}}</view>
					</view>
					<view class="nian" style="bottom:28rpx">
						¥{{n.allPrice}}
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const app = getApp();
	const queryParams = ref({
		// pageNum: 1,
		// pageSize: 10
		// mergeFlag: 0,
		auditStatus: ''
	})
	const docId = ref('')
	const form = ref([])
	const list = ref([])
	const deptType = ref()
	onLoad((option) => {
		if (app.globalData.isLogin) {
			docId.value = option.docId
			init()
		} else {

			app.firstLoadCallback = () => {
				docId.value = option.docId
				init()
			};
		}

	})

	function init() {
		deptType.value = app.globalData.deptType
		api.getFeeBillDetail(docId.value).then(res => {
			list.value = res.data.personPaymentList
			// arr.value = JSON.parse(JSON.stringify(list.value))
			form.value = res.data
		})
	}
	function goPersonInfo(n){
		uni.navigateTo({
			url: `/personalVip/detail?perId=${n.perId}`
		})
	}
</script>

<style scoped lang="scss">
	.wBox {
		width: 700rpx;
		padding: 30rpx;
		margin: 20rpx auto 0;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
		border-radius: 15rpx;

		.tt {
			color: #0A1629;
			font-size: 30rpx;
		}
		.subtt{
			color: #666;margin: 20rpx 0 0;
			font-size: 28rpx;
		}
	}

	.userlist {
		.item {
			border-bottom: 1px dashed #e5e5e5;
			position: relative;padding: 20rpx 0;
			.photobox{margin-right:20rpx;}
			.date {
				margin-top: 10rpx;
			}

			.name {
				text {
					margin-left: 1em;
					color: #4C5359;
					font-size: 26rpx;
				}
			}

			.nian {
				position: absolute;
				right: 0;
				font-size: 26rpx;
				color: #AD181F;
			}
		}
	}

	.info {
		display: flex;
		margin: 30rpx 0 20rpx;
		font-size: 28rpx;

		view {
			color: #7D8592;
			margin-right: 20rpx;
		}
	}
</style>