<template>
	<view class="hasfixedbottom">
		<view class="wBox">
			<view class="tt">{{form.name}}</view>

			<!-- 成员 -->
			<view class="userlist">
				<view class="item" v-for="n in list">
					<view class="photobox">
						<view class="colorful">{{n.perName?.slice(0,1)}}</view>
					</view>
					<view>
						<view class="name">{{n.perName}}</view>
						<view class="date">申请调入一级协会 {{n.sourceShenDeptName||'--'}}</view>
						<view class="date">申请调入单位 {{n.targetDeptName||'--'}}</view>
					</view>
				</view>
			</view>

		</view>

		<view class="h3-padding">审核流程</view>
		<view class="wBox">
			<view class="stepItem" v-for="(n,index) in auditLog">
				<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>
					</view>
					<!-- <view class="name">第 {{index+1}} 步</view> -->
					<view class="deptName">{{n.auditDeptName}}</view>
					<view v-if="n.auditResult==2">
						备注：{{n.auditMsg||'/' }}
					</view>
				</view>
			</view>
		</view>
       
		<view class="fixedBottom" v-if="(deptType == 1)&&form.ztxRes == 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.shenRes == 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({})

	const form = ref({})
	const list = ref([])
	const auditLog = ref([])
	const feelList = ref([])
	const total = ref(0)
	const totalYear = ref(0)
	const deptType = ref()
	let rangeId = ''
	onLoad((option) => {
		rangeId = option.rangeId
		if ('auditLog' in option) {
			auditLog.value = JSON.parse(decodeURIComponent(option.auditLog))
		}
		if ('form' in option) {
			form.value = JSON.parse(decodeURIComponent(option.form))
		}
		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.getTransferList({
			rangeId: rangeId
		}).then(res => {
			uni.hideLoading()
			list.value = res.rows
		})
	}

	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)
		uni.showLoading({
			title: '加载中'
		})
		api.mobilizeAudit(obj).then((res) => {
			uni.hideLoading()
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})
			uni.navigateBack()
		})
	}
</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>