<template>
	<view class="hasfixedbottom">
		<view class="wBox">
			<view class="tt">{{form.content?.name}}</view>
			<view class="info" style="flex-wrap: wrap;">
				<view class="w45">共 <text class="text-danger"> {{ form.content?.personCount }} </text> 人</view>
				<view class="w45">新会员 <text class="text-primary"> {{form.content?.newPersonCount }} </text> 人</view>
				<view class="w45">续费合计 <text class="text-primary"> {{form.content?.oldPersonCount }} </text> 人</view>
				<view class="w45" v-if="(userType=='2'||userType=='1')&&form.content.allFee ">费用合计
					<text class="text-danger">{{ form.content?.allFee }} </text> 元
				</view>
			</view>

			<!-- 成员 -->
			<view class="userlist">
				<view class="item" v-for="(n,index) in list" :key="index" @click="handleInfo(n)">
					<view class="w100">
						<view class="name">{{n.personName}}<text>({{n.memberInfoName}})</text></view>
						<view class="date">原有效期至 {{n.originValidityDate?.slice(0,10)||'--'}}</view>

						<view class="flexbox" v-if="userType=='2'||userType=='1'">
							<view>
								单价
								<text>¥{{n.unitPrice}}</text>
							</view>
							<view>
								年限
								<text>{{n.payYear}} 年</text>
							</view>
							<view>
								总价
								<text class="text-danger">¥{{n.allPrice}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="goMore" v-if="total>6" @click="goMoreList">查看全部
					<uni-icons type="forward" size="16"></uni-icons>
				</view>
			</view>

		</view>

		<view class="h3-padding">审核流程</view>
		<view class="wBox">
			<view class="stepItem" v-for="(n,index) in feelList" :key="index">
				<view class="time">{{n.handleDate||'待审批'}}</view>
				<view class="content">
					<view class="status">
						<text v-if="n.auditStatus==1" class="text-success">审核通过</text>
						<text v-if="n.auditStatus==2" class="text-danger"> 审核拒绝</text>
						<text v-if="n.auditStatus==0||n.auditStatus==100" class="text-primary"> 审核中</text>
						<text v-if="n.auditStatus==3" class="text-warning"> 已撤回</text>
					</view>
					<!-- <view class="name">第 {{index+1}} 步</view> -->
					<view class="deptName">{{n.handlerDeptName||n.auditBy}}</view>
					<view v-if="n.auditStatus==2">
						备注：{{n.reason||'/' }}
					</view>
				</view>
			</view>
		</view>

		<view class="fixedBottom" v-if="form.auditStatus == 0">
			<button class="btn-red-kx" @click="audit(form.recordId,'0')">拒绝</button>
			<button class="btn-red" @click="audit(form.recordId,'1')">同意</button>
		</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: 6
		// mergeFlag: 0,
		// auditStatus: ''
	})
	const wfId = ref('')
	const form = ref([])
	const list = ref([])
	const id = ref('')
	const feelList = ref([])
	const total = ref(0)
	const totalYear = ref(0)
	const userType = ref('')
	const statistical = ref({})
	onLoad((option) => {
		console.log(option)
		if (app.globalData.isLogin) {
			init(option)
		} else {
			app.firstLoadCallback = () => {
				init(option)
			};
		}

	})

	function init(option) {
		// wfId.value = option.wfId
		// queryParams.value.auditStatus = option.auditStatus
		if ('form' in option) {
			form.value = JSON.parse(decodeURIComponent(option.form))
			queryParams.value.recordId = form.value.recordId
		}
		console.log(form.value)
		userType.value = app.globalData.userType
		getForm()
	}

	function getForm() {
		uni.showLoading({
			title: '加载中'
		})
		console.log(userType.value)

		api.getDetailPersonList(queryParams.value).then(res => {
			uni.hideLoading()
			list.value = res.rows
			total.value = res.total
			getFillList(list.value[0]?.rangeId)
		})

	}
	// 审核记录
	function getFillList(id) {
		if (id)
			api.getHistoryByRelateId(id).then(res => {
				feelList.value = res.data
				uni.hideLoading()
			})
	}

	function audit(recordId, flag) {
		if (flag == '0') {
			// 拒绝
			// 弹出框填写理由
			uni.showModal({
				title: '请输入拒绝理由',
				editable: true,
				success: function(res) {
					if (res.confirm) {
						if (!res.content) {
							uni.showToast({
								title: '请输入拒绝理由',
								icon: 'none'
							})
						} else {
							doApproval(recordId, flag, res.content)
						}
					}
				}
			})
		} else if (flag == '1') {
			// 二次确认
			uni.showModal({
				title: '提示',
				content: `确定审批通过吗`,
				success: function(res) {
					if (res.confirm) {
						doApproval(recordId, flag)
					}
				}
			})
		}
	}

	function doApproval(recordId, flag, reason) {
		var obj = {
			flag: flag,
			reason: reason || '',
			recordIds: []
		}
		obj.recordIds.push(recordId)
		console.log(obj)
		api.audit(obj).then((res) => {
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})
			uni.navigateBack()
		})
	}

	function changeList() {

	}

	function goMoreList() {
		let path = `/personalVip/payPersonList?recordId=${queryParams.value.recordId}`
		uni.navigateTo({
			url: path
		});
	}

	function handleInfo(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;
		}
	}

	.userlist {
		.item {
			border-bottom: 1px dashed #e5e5e5;
			position: relative;

			.date {
				margin-top: 10rpx;
			}

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

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

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

		view {
			color: #7D8592;
			margin-right: 20rpx;
		}
	}

	.fixedBottom {
		justify-content: center;

		button {
			margin: 0 20rpx;
			width: 286rpx;
		}

		.btn-red {
			width: 286rpx;
		}
	}
</style>