<template>
	<view class="hasfixedbottom">
		<view class="wBox">
			<view class="tt">{{form.content.certName}}</view>
			<view>
				<view class="date" v-if="form.content.commitTime">提交日期：<text>{{ form.content.commitTime }}</text>
				</view>
				<view class="date">提交单位：<text>{{ form.content.memberName }}</text> </view>
			</view>
			<view class="vipData mt30" style="flex-wrap: wrap;">
				<view class="w50">
					团队会员合计：
					<text>{{ form.content.allCount }}个</text>
				</view>
				<view class="w50">
					新会员合计：
					<text>{{ form.content.newCount }}个</text>
				</view>
				<view class="w50">
					年限合计：
					<text>{{ form.content.renewYear }}年</text>
				</view>
				<view class="w50">
					费用合计：
					<text>{{ (form.content.allFee*1).toFixed(2) }}元</text>
				</view>
			</view>

			<!-- 成员 -->
			<view class="userlist">
				<view class="item" v-for="n in list">
					<view style="width: 100%">
						<view class="name">{{n.memberName}}</view>
						<view class="date">单位类型:
							<text v-if="n.deptType==2">一级协会</text>
							<text v-if="n.deptType==3">直属协会</text>
							<text v-if="n.deptType==4">二级协会</text>
							<text v-if="n.deptType==5">三级协会</text>
							<text v-if="n.deptType==6">职业性团体会员</text>
						</view>
						<view class="flexbox">
							<view>
								<view>
									原有效期
									<text>{{n.validityTime?.slice(0,10)}}</text>
								</view>
								<view>
									提交日期
									<text>{{n.commitTime?.slice(0,10)}}</text>
								</view>
							</view>
							<view>
								年限
								<text>{{n.renewYear}}</text>
								<view v-if="deptType==1">
									会员证
									<text v-if="form.content.sendJiaoFeiFlag==1" class="text-success">已下发</text>
									<text v-else class="text-warning">未下发</text>
								</view>
							</view>
							<view>
								单价
								<text>¥{{n.unitPrice}}</text>
								<view>总价
									<text>¥{{n.allFee}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="h3-padding">审核记录</view>
		<view class="wBox">
			<view class="stepItem" v-for="(n,index) in auditList">
				<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" class="text-primary"> 审核中</text>
						<text v-if="n.auditStatus==3" class="text-warning">已撤回</text>
						<text v-if="n.auditStatus==100" class="text-primary">审核中</text>

					</view>
					<!-- <view class="name">第 {{index+1}} 步</view> -->
					<view class="deptName">{{n.handlerDeptName}}</view>
					<view v-if="n.reason">
						备注：{{n.reason||'/' }}
					</view>
				</view>
			</view>
		</view>

<!-- 		<view class="fixedBottom" v-if="(deptType == 1)&&form.auditStatus == 0">
			<button class="btn-red-kx" @click="audit(form.id,'2')">拒绝</button>
			<button class="btn-red" @click="audit(form.id,'1')">同意</button>
		</view>

		<view class="fixedBottom" v-if="(deptType == 2 || deptType == 3)&&form.auditStatus == 0">
			<button class="btn-red-kx" @click="audit(form.id,'2')">拒绝</button>
			<button class="btn-red" @click="audit(form.id,'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({
		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))
		}
		list.value = form.content?.certifiedSimpleList || []
		listArr.value = form.content?.certifiedSimpleList || []
		queryParams.value.recordId = form.value.recordId
		console.log(form.value)
		if (app.globalData.isLogin) {
			init()
		} else {

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

	})

	function init() {
		deptType.value = app.globalData.deptType
		getForm()
	}

	function getForm() {
		uni.showLoading({
			title: '加载中'
		})
		api.getDetailList(queryParams.value).then(res => {
			uni.hideLoading()
			list.value = res.rows
			list.value[0].rangeId == 0 ? id.value = list.value[0].certId : id.value = list.value[0].rangeId
			if (id.value) {
				auditFN()
			}
		})
	}

	function auditFN() {
		api.getGroupHistoryByRelateId(id.value).then(res => {
			auditList.value = res.data
		})
	}

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

	function doApproval(rangeId, flag, reason) {
		var obj = {
			flag: flag,
			reason: reason || '',
			rangeIds: rangeIds
		}
		console.log(obj)
		api.mobilizeAudit(obj).then((res) => {
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})
			uni.navigateBack()
		})
	}
</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-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>