<template>
	<view class="content">

		<view class="app">
			<view class="item" v-for="(item, index) in questiondata.subjectResultList" :key="index">
				<view class="title">
					{{Number(index)+1}}、{{item.questionName}}
					<span v-if="item.questionType == 'MULTIPLE_CHOICE'">（单选题）</span>
					<span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'">（多选题）</span>
					<span v-if="item.questionType == 'SCORING_QUESTIONS'">（打分题）</span>
					<span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'">（组合单选题）</span>
					<span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'">（组合多选题）</span>
					<span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'">（组合填空题）</span>
					<span v-if="item.questionType == 'FILL_IN_THE_BLANKS'">（填空题）</span>
					<span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'">（组合打分题）</span>
					<span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'">（日期填空题）</span>
					<span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">（时间填空题）</span>
				</view>
				<!-- 单选。组合单选 -->
				<u-radio-group v-if="
                item.questionType == 'MULTIPLE_CHOICE' ||
                item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
                item.questionType == 'SCORING_QUESTIONS' ||
                item.questionType == 'COMBINATION_SCORING_SUBJECT'
              " v-model="item.checked" @change="radioGroupChange($event,item)">
					<u-radio  @change="radioChange($event,aitem,index)"
						v-for="(aitem, aindex) in item.optionResults" :key="aindex" :name="aitem.id">
						{{aitem.optionName}}
					</u-radio>
				</u-radio-group>
				<!-- 多选 -->
				<u-checkbox-group @change="checkboxGroupChange" v-if="
				    item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
				    item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
				  ">
					<u-checkbox  @change="checkboxChange" v-model="aitem.checked"
						v-for="(aitem, aindex) in item.optionResults" :key="aindex"
						:name="aitem.id">{{aitem.optionName}}</u-checkbox>
				</u-checkbox-group>
				<!-- 填空题、组合填空 -->
				<view class="" v-if="
				    item.questionType == 'FILL_IN_THE_BLANKS' ||
				    item.questionType == 'COMBINATION_BLANKS_SUBJECT'
				  ">
					<u-input placeholder="请输入" v-model="item.fillBlanksAnswer" type="textarea" :height="100"
						:customStyle="{lineHeight: '30px'}" placeholder-style="color: #8E8E8E" />
				</view>
				<!-- 日期填空题、 -->
				<view class="datatime" v-if="item.questionType == 'DATE_BLANKS_SUBJECT'">
					<text v-if="!item.fillBlanksAnswer">请选择出生日期</text>
					<text v-else class="testitem">{{item.fillBlanksAnswer}}</text>
					<image src="@/static/huijiantou.png" mode=""></image>
				</view>
				<!-- 时间填空题 -->
				<view class="datatime" v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">
					<text v-if="!item.fillBlanksAnswer">请选择时间</text>
					<text v-else class="testitem">{{item.fillBlanksAnswer}}</text>
					<image src="@/static/huijiantou.png" mode=""></image>
				</view>

				<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
				<u-picker mode="time" @confirm="Changepicker" :value="index" :params="params" v-model="showtime">
				</u-picker>

			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
	</view>
</template>

<script>
	import {
		selectQuestionSubmit
	} from '@/api/questionnaire/questionnaire.js'
	export default {
		data() {
			return {
				questiondata: {},
				checkeddata: [],
				checked: false,
				params: {
					//    year: true,
					// month: true,
					// day: true,
					hour: true,
					minute: true,
					// second: true,
					// timestamp: true
				},
				time: '',

				showtime: false,

				show: false,
				mode: 'date',
				value: '',
				list: [{
						name: 'apple',
						disabled: false
					},
					{
						name: 'banner',
						disabled: false
					},
					{
						name: 'orange',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				questions: null,
				timer: null,
			};
		},
		onLoad(options) {
			this.patientQuestionSubmitResultId = options.patientQuestionSubmitResultId
			console.log('this.patientQuestionSubmitResultId')
			this.selectScriptInfodata()

		},
		methods: {
			selectScriptInfodata() {
				console.log('9999999999999')
				selectQuestionSubmit(this.patientQuestionSubmitResultId).then(res => {
					this.questiondata = res.data
					this.questiondata.subjectResultList.forEach((e) => {
						e.optionResults.forEach((el) => {
							if (
								(el.optionChooseSign == "0" &&
									(e.questionType == "MULTIPLE_CHOICE") ||
									e.questionType == "COMBINATION_RADIO_SUBJECT")
							) {
								e.checked = el.id;
							} else if (
								el.optionChooseSign == "0" &&
								e.questionType == "MULTIPLE_CHOICE_QUESTIONS"
							) {
								el.checked = true;
								// this.checkeddata.push(el.id);
							} else if (
								el.optionChooseSign == "0" &&
								e.questionType == "SCORING_QUESTIONS"
							) {
								e.checked = el.id;
							} else if (
								e.questionType == "COMBINATION_MULTIPLE_SUBJECT" &&
								el.optionChooseSign == "0"
							) {
								el.checked = true;

								// this.checkeddata.push(el.id);
							}
						});
						console.log(this.questiondata, 'this.questiondata')
					});


				})
			},
			// 日期
			change(e) {
				// this.show=true
				console.log(e);
			},
			// 时间
			Changepicker(e, item) {
				// console.log(e,item,'909090')
				this.time = e.hour + ':' + e.minute
				console.log(this.time, '909090')
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e, item, index) {
				console.log(e, item, index)
				this.list.answers[index].optionId = item.id
				console.log(this.list, '---')
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		},

	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		background-color: #F7F5F5;
		padding: 30rpx 0 0 0;
		overflow: scroll;

		.app {
			pointer-events: none;
			width: 96%;
			margin: 16rpx auto;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			padding-bottom: 200rpx;

			.btns {
				width: 90%;
				margin: 100rpx auto;
				background-color: #26A888;
				text-align: center;
				line-height: 60rpx;
				height: 60rpx;
				color: #fff;
			}

			.item {
				width: 90%;
				margin: 0 auto;
				// padding: 30rpx 0;

				.datatime {
					width: 636rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					border-radius: 5rpx;
					display: flex;
					position: relative;

					.testitem {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					}

					text {
						padding-left: 20rpx;
						line-height: 63rpx;
						font-size: 22rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #8E8E8E;
					}

					image {
						width: 9rpx;
						height: 17rpx;
						position: absolute;
						right: 40rpx;
						top: 50%;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
					}
				}

				::v-deep .u-input__textarea.data-v-fdbb9fe6 {
					background: #F6F6F6 !important;
					padding-left: 10rpx;
				}

				::v-deep .u-input {
					width: 636rpx;
					// height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					border: none;
					border-radius: 5rpx;

				}

				::v-deep .u-input__input.data-v-fdbb9fe6 {
					font-size: 26rpx !important;
				}


				::v-deep .u-radio-group {
					display: inline-grid;
				}

				::v-deep .u-checkbox-group {
					display: inline-grid;
				}

				::v-deep .u-checkbox {
					padding: 20rpx;

				}

				::v-deep .u-radio {
					padding: 20rpx;
				}

				.title {
					padding: 40rpx 0 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>