<template>
	<view class="hasfixedbottom">
		<view class="h3-padding">成员信息</view>
		<view class="wBox" style="padding: 0;">
			<view class="userlist">
				<view class="item" v-for="(n,index) in list" :key="index" @click="goGroupInfo(n)">
					<view style="width: 100%">
						<view class="status">
							<view v-if="n.status==0" class="text-primary">
								待提交
							</view>
							<view v-if="n.status==1" class="text-primary">
								审核中
							</view>
							<view v-if="n.status==2" class="text-success">
								审核通过
							</view>
							<view v-if="n.status==3" class="text-danger">
								审核拒绝
							</view>
							<view v-if="n.status==4" class="text-warning">
								撤回
							</view>
						</view>
						<view class="name text-primary underLine">{{n.memberName}}</view>
						<view class="date">提交日期:{{n.commitTime}}
						</view>
						<view class="flexbox">
							<view v-if="n.validityTime">
								原有效期
								<text>{{n.validityTime.slice(0,10)}}</text>
							</view>
							<view>
								续费年限
								<text>{{n.renewYear}}</text>
							</view>
							<view :class="n.validityTime?'':'w50'">
								总价
								<text>¥{{n.allPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="h3-padding">审核记录</view>
		<view class="wBox">
			<view class="stepItem" v-for="(n,index) in feelList">
				<view class="time">{{n.auditTime||'待审批'}}</view>
				<view class="content">
					<view class="status">
						<text v-if="n.auditResult==1" class="text-success">审核通过</text>
						<text v-if="n.auditResult==2" class="text-danger"> 审核拒绝</text>
						<text v-if="n.auditResult==0" class="text-primary"> 审核中</text>
						<text v-if="n.auditResult==3" class="text-warning">已撤回</text>

					</view>
					<!-- <view class="name">第 {{index+1}} 步</view> -->
					<view class="deptName">{{n.auditDeptName}}</view>
					<view v-if="n.auditMsg">
						备注：{{n.auditMsg||'/' }}
					</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({
		recordId: ''
	})

	const form = ref({})
	const list = ref([])
	const listArr = ref([])
	const id = ref()
	const auditList = ref([])

	const feelList = ref([])
	const total = ref(0)
	const totalYear = ref(0)
	const deptType = ref()
	let rangeId = ''
	onLoad((option) => {
		if ('form' in option) {
			form.value = JSON.parse(decodeURIComponent(option.form))
		}
		queryParams.value.rangeId = form.value.rangId
		list.value = form.value.certList
		console.log(form.value)
		if (app.globalData.isLogin) {
			init()
		} else {

			app.firstLoadCallback = () => {
				init()
			};
		}

	})

	function init() {
		uni.showLoading({
			title: '加载中'
		})
		deptType.value = app.globalData.deptType
		getFillList()
	}

	function getFillList() {
		api.getFillAuditLog(form.value.rangeId).then(res => {
			uni.hideLoading()
			feelList.value = res.data
		})
	}
	function goGroupInfo(row){
		uni.navigateTo({
			url: `/group/groupInfo?memId=${row.memId}`
		})
	}
</script>

<style scoped lang="scss">
	.date {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #999;
	}

	.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: 10rpx 0;
			}

			.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>