<template>
	<view class="form-container">
		<view class="form-item">
			<label>加分项（三选一，不选则不加分）</label>
			<view class="options">
				<radio-group @change="onOptionChange">
					<label class="option-item" v-for="(item, index) in options" :key="index">
						<radio :value="item.value" :checked="formData.bonusType === item.value" />
						<text>{{ item.label }} (+{{ item.score }}分)</text>
					</label>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		kpiFillingBonusPointsDetail
	} from "@/api/instructor/superintendent.js"
	export default {
		props: ["queryDetailParams", "commitStatus", "classType"],
		data() {
			return {
				options: [
					{ label: "1.获得上级部门或学校表扬，妥善处置学生事件并形成典型案例，积极建言献策且建议被采纳，发挥模范带头作用。", value: "option1", score: 10 },
					{ label: "2.在学校、学院阶段性重要任务推进过程中，主动担当作为，切实发挥作用。", value: "option2", score: 10 },
					{ label: "3.协助学校开展辅导员培训、会议和学生活动，在活动中担任工作人员。", value: "option3", score: 10 }
				],
			formData: {
				bonusType: "",
				bonusScoring: "",
				id: ""
			}
			}
		},
		created() {
			const params = {
				...this.queryDetailParams,
				classType: this.classType
			};
			kpiFillingBonusPointsDetail(params).then(res => {
				console.log(res);
				if (res && res.rows && res.rows.length > 0) {
					const {
						bonusType,
						bonusScoring,
						id
					} = res.rows[0];
					this.formData = {
						...this.formData,
						bonusType,
						bonusScoring,
						id
					};
				} else {
					console.log("第一次");
				}
			}).catch(err => {
				console.log("API调用失败", err);
			})
		},
		methods: {
			onOptionChange(e) {
				const value = e.detail.value;
				this.formData.bonusType = value;
				const selected = this.options.find(item => item.value === value);
				this.formData.bonusScoring = selected ? selected.score : 0;
			},
			getFormData() {
				return this.formData;
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-container {
		.form-item {
			padding: 22rpx 40rpx 40rpx 40rpx;
			background-color: white;
			margin-bottom: 40rpx;
			border-radius: 16rpx;

			label {
				margin-bottom: 20rpx;
				display: inline-block;
				font-size: 26rpx;
			}

			.options {
				radio-group {
					display: flex;
					flex-direction: column;
					
					.option-item {
						display: flex;
						align-items: center;
						padding: 20rpx 0;
						border-bottom: 1px solid #f0f0f0;
						
						&:last-child {
							border-bottom: none;
						}
						
						radio {
							margin-right: 20rpx;
						}
						
						text {
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
