<template>
	<view class="form-container">
		<view class="form-item">
			<label>01 按时上下班并做好值班工作（10分）</label>
			<view class="bottom">
				<input @blur="onLimitInput($event,'dutyWorkScoring',10)" type="number"
					v-model="formData.dutyWorkScoring" placeholder="请输入分值" placeholder-class="input-placeholder" />
			</view>
		</view>
		<view class="form-item">
			<label>02 按要求参加辅导员各项会议、培训（10分）</label>
			<view class="bottom">
				<input type="number" @blur="onLimitInput($event,'conferenceScoring',10)"
					v-model="formData.conferenceScoring" placeholder="请输入分值" placeholder-class="input-placeholder" />
				<text @tap="uploadMaterials">
					{{commitStatus==1?"查看材料":"上传材料"}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		limitInput
	} from "@/utils/limitInput.js"
	import {
		kpiFillingAMgtDetail
	} from "@/api/instructor/superintendent.js"
	export default {
		props: ["queryDetailParams", "commitStatus"],
		data() {
			return {
				formData: {
					dutyWorkScoring: "",
					conferenceScoring: "",
					id: ""
				}
			}
		},
		created() {
			kpiFillingAMgtDetail(this.queryDetailParams).then(res => {
				console.log(res);
				if (res.rows.length > 0) {
					const {
						dutyWorkScoring,
						conferenceScoring,
						id
					} = res.rows[0];
					this.formData = {
						...this.formData, // 保留 this.formData 中已有的其他属性  
						dutyWorkScoring,
						conferenceScoring,
						id
					};
				} else {
					console.log("第一次");
				}
			})
		},
		methods: {
			onLimitInput(event, name, max) {
				let result = limitInput(event.detail.value, max);
				this.formData[name] = result;
			},
			uploadMaterials() {
				const queryParams = new URLSearchParams({
					year: this.queryDetailParams.fillingYear,
					month: this.queryDetailParams.fillingMonth,
					commitStatus: this.commitStatus
				});
				uni.navigateTo({
					url: `/pages/instructor/performance-appraisal/performance-evaluation/instructor-attendance-material/list?${queryParams.toString()}`
				})
			},
			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;
			}

			.bottom {
				display: flex;
				align-items: center;

				input {
					flex: 1;
					border: 1px solid #E1E1E1;
					border-radius: 10rpx;
					height: 60rpx;
					padding-left: 30rpx;

					.input-placeholder {
						color: #b6b6b6;
					}
				}

				text {
					color: #1890FF;
					border-bottom: 2px solid #1890FF;
					margin-left: 40rpx;
					font-weight: bold;
					font-size: 26rpx;
				}
			}
		}
	}
</style>