<template>
	<view class="audit-page">
		<view class="form-section">
			<view class="section-header">
				<uni-icons type="edit" size="18" color="#AD181F"></uni-icons>
				<text class="section-title">审核信息</text>
			</view>
			<view class="form-card">
				<view class="form-item">
					<text class="form-label">审批结果</text>
					<radio-group @change="onFlagChange">
						<view class="radio-group">
							<label class="radio-item" :class="{ selected: form.flag == '1' }">
								<radio value="1" :checked="form.flag == '1'" color="#C4121B" />
								<text>审批通过</text>
							</label>
							<label class="radio-item" :class="{ selected: form.flag == '0' }">
								<radio value="0" :checked="form.flag == '0'" color="#C4121B" />
								<text>审批拒绝</text>
							</label>
						</view>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="form-label">备注</text>
					<textarea
						v-model="form.reason"
						class="textarea"
						placeholder="请输入备注信息（拒绝时必填）"
						:maxlength="500"
					/>
				</view>
			</view>
		</view>

		<view class="submit-wrap">
			<button class="btn-cancel" @click="goBack">取消</button>
			<button class="btn-submit" @click="doSubmit" :disabled="submitting">
				<text v-if="!submitting">确认提交</text>
				<text v-else>提交中...</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'

	const ids = ref('')
	const submitting = ref(false)

	const form = ref({
		flag: '1',
		reason: ''
	})

	onLoad((options) => {
		if (options.ids) ids.value = options.ids
	})

	function goBack() {
		uni.navigateBack()
	}

	function onFlagChange(e) {
		form.value.flag = e.detail.value
	}

	function doSubmit() {
		if (form.value.flag == '0' && !form.value.reason) {
			uni.showToast({ title: '请输入拒绝理由', icon: 'none' })
			return
		}
		if (submitting.value) return
		submitting.value = true
		const params = {
    ids: ids.value,
    flag: form.value.flag,
    reason: form.value.reason || ''
  }
  if(!form.value.reason ){
    delete params.reason
  }
		api.auditDuanExam(params).then(res => {
			uni.showToast({ title: '操作成功', icon: 'success' })
			setTimeout(() => { uni.navigateBack() }, 1500)
		}).catch(err => {
			console.error('审核失败', err)
			uni.showToast({ title: '操作失败', icon: 'none' })
			submitting.value = false
		})
	}
</script>

<style lang="scss" scoped>
.audit-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
	box-sizing: border-box;
}

.form-section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;

	.section-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		margin-left: 10rpx;
	}
}

.form-card {
	.form-item {
		margin-bottom: 30rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.form-label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;
			font-weight: 500;
		}

		.radio-group {
			display: flex;
			gap: 24rpx;
		}

		.radio-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
			border-radius: 12rpx;
			border: 2rpx solid #eee;
			background: #fafafa;

			&.selected {
				color: #C4121B;
				border-color: #C4121B;
				background: #fff5f5;
				font-weight: 500;
			}

			radio {
				transform: scale(0.8);
			}
		}

		.textarea {
			width: 100%;
			height: 200rpx;
			border: 1rpx solid #eee;
			border-radius: 12rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333;
			background-color: #fafafa;
			box-sizing: border-box;
		}
	}
}

.submit-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 110rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30rpx;
	padding: 0 30rpx;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);

	button {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		border-radius: 40rpx;
		border: none;
	}

	.btn-cancel {
		background-color: #f5f5f5;
		color: #666;
	}

	.btn-submit {
		background: #C4121B;
		color: #fff;

		&[disabled] {
			background: #ccc;
		}
	}
}
</style>