<template>
	<div class="download-paper-wrap" ref="childRef">
		<div class="dp-top">
			<p class="dp-top-title">{{ paperItem.name }}</p>
		</div>
		<div class="dp-content">
			<div class="dp-group-item" v-for="(gItem,gIndex) in groupList">
				<p v-show="gItem.list.length" class="dp-group-title">
					<span>{{ numberConvertToUppercase(gIndex + 1) }} : {{ exersicesType[gItem.type] }}</span>
					<span style="font-size: 14px;">（{{ gItem.score || 0 }}{{$t('evaluation.paperList.score')}}） </span>
				</p>
					<div class="dp-item" v-for="(item,index) in gItem.list">
						<span class="dp-item-order">{{ index + 1 }}、({{ item.score }}分) </span>
						<div>
							<span class="dp-item-question" v-html="item.question"></span>
							<div class="dp-item-options">
								<!-- 选项部分 -->
								<div v-for="(option,optionIndex) in item.option" :key="optionIndex" class="dp-item-options">
									<div class="item-option-content">
										<div class="item-option-order">{{String.fromCharCode(64 + parseInt(optionIndex+1))}} :</div>
										<div class="item-option-text" v-html="option.value"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					
			</div>
			
		</div>
	</div>
</template>
<script>
	export default {
		name: 'DownloadPaper',
		props: {
			paper: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				exersicesType: this.$GLOBAL.EXERCISE_TYPES(),
				paperItem:{
					name:'',
					item:[]
				},
				typeList: ['single', 'multiple', 'judge', 'complete', 'subjective', 'connector', 'correct', 'compose'],
				groupList:[]
			}
		},
		created() {
			

		},
		methods: {
			doGroupPaper(paper){
				/* 处理试卷内题目按照题型排序 */
				let that = this
				let groupList = []
				this.typeList.forEach(item => {
					this._.mapKeys(this._.groupBy(paper.item, 'type'), function(value, key) {
						if (key === item) { /* 按照题型排序，并且计算每种题型的总分 */
							groupList.push({
								type: key,
								list: value,
								score: value.reduce((p, e) => parseInt(p) + parseInt(e.score), 0)
							})
						}
					})
				});
				return groupList
			},
			
			/**
			 * 数字与中文转换
			 * @param num
			 */
			numberConvertToUppercase(num) {
				num = Number(num)
				var upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万', '亿']
				var length = String(num).length
				if (length === 1) {
					return upperCaseNumber[num]
				} else if (length === 2) {
					if (num === 10) {
						return upperCaseNumber[num]
					} else if (num > 10 && num < 20) {
						return '十' + upperCaseNumber[String(num).charAt(1)]
					} else {
						return upperCaseNumber[String(num).charAt(0)] + '十' + upperCaseNumber[String(num).charAt(1)].replace('零', '')
					}
				}
			},

		},

		watch: {
			paper: {
				handler(n) {
					if(n){
						this.groupList = this.doGroupPaper(n)
						this.paperItem = n
					}
				}
			},
			
		}

	}
</script>


<style lang="less" scoped>
	.download-paper-wrap{
		.dp-top{
			padding: 20px 0;
			&-title{
				text-align: center;
				font-size: 24px;
				font-weight: bold;
			}
		}
		
		.dp-content{
			.dp-group-title{
				font-size: 16px;
				margin: 20px 0;
			}
			.dp-item{
				display: flex;
				font-size: 14px;
				margin-top: 20px;
				&-order{
					min-width: 50px;
				}
				&-question{
					flex:1;
					padding-left: 10px;
				}
			}
			
			.dp-item-options{
				.item-option-content{
					display: flex;
					margin: 10px 0;
				}
			}
		}
	}
</style>
