<template>
	<u-popup :show="show" mode="center" round="40rpx" zIndex="10080" @close="$emit('close')">
		<view class="lottery-popup live-quiz-lottery-popup">
			<view class="lottery-content">
				<view class="lottery-close-section">
					<view class="close-button-wrapper">
						<view class="close-button" @click="$emit('close')">
							<u-icon class="close-icon" name="close" color="#fff" size="20" />
						</view>
					</view>
				</view>
				<view class="lottery-main-content">
					<view class="live-quiz-popup-question">{{ quiz.title || '课堂答题' }}</view>
					<view v-if="Number(quiz.type) === 2" class="live-quiz-popup-type-tip">可多选</view>
					<view class="live-quiz-popup-options">
						<view v-for="(quizOpt, idx) in optionList" :key="idx"
							:class="isSelected(quizOpt) ? 'live-quiz-popup-opt live-quiz-popup-opt-active' : 'live-quiz-popup-opt'"
							@click="$emit('select-option', quizOpt)">
							<view class="quiz-opt-key">{{ numberToLetter(idx) }}.</view>
							<view class="quiz-opt-label">{{ quizOpt.name }}</view>
						</view>
					</view>
					<view class="lottery-action-button"
						:class="{ 'live-quiz-popup-submit-disabled': !canSubmit || !hasSelection }"
						@click="$emit('submit')">参与答题</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'LiveQuizPanel',
	props: {
		show: { type: Boolean, default: false },
		quiz: { type: Object, default: () => ({}) },
		optionList: { type: Array, default: () => [] },
		canSubmit: { type: Boolean, default: true },
		hasSelection: { type: Boolean, default: false },
		isOptionSelected: { type: Function, required: true }
	},
	methods: {
		numberToLetter(index) {
			return String.fromCharCode(65 + index)
		},
		isSelected(opt) {
			return typeof this.isOptionSelected === 'function' ? this.isOptionSelected(opt) : false
		}
	}
}
</script>

<style scoped lang="scss">
.lottery-popup {
	position: relative;
	border-radius: 40rpx;

	.lottery-content {
		position: relative;
		z-index: 2;
		padding: 24rpx 0 68rpx;

		.lottery-close-section {
			display: flex;
			justify-content: flex-end;
			margin-right: 20rpx;

			.close-button {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.lottery-main-content {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
}

.live-quiz-lottery-popup {
	.live-quiz-popup-question {
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 1.45;
		padding: 0 28rpx 12rpx;
		max-height: 160rpx;
		overflow-y: auto;
	}

	.live-quiz-popup-type-tip {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.88);
		margin-bottom: 16rpx;
	}

	.live-quiz-popup-options {
		max-height: 340rpx;
		width: 100%;
		padding: 0 28rpx;
		box-sizing: border-box;
	}

	.live-quiz-popup-opt {
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		margin-bottom: 14rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.96);
		border: 2rpx solid transparent;
		box-sizing: border-box;

		&.live-quiz-popup-opt-active {
			border-color: #ffeb66;
			background: #fffef0;
		}

		.quiz-opt-key {
			width: 48rpx;
			font-weight: 600;
			flex-shrink: 0;
		}

		.quiz-opt-label {
			flex: 1;
			font-size: 28rpx;
		}
	}

	.lottery-action-button {
		margin-top: 30rpx;
		width: 520rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(180deg, #fff4d6 0%, #ffeb66 100%);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #f4410b;
		text-align: center;

		&.live-quiz-popup-submit-disabled {
			opacity: 0.45;
		}
	}
}
</style>
