<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		useStore
	} from '@/store'
	import QuestionComponent from './question.vue'
	const $emit = defineEmits(['setValue'])
	const $store = useStore()
	const $props = defineProps({
		info: {
			type: Object,
			default: () => {
				return {
					id: 0
				}
			}
		},
		index: {
			type: String,
			default: ''
		}
	});

	const mountedAction = () => {

	}

	const selectClick = (e) => {
		if ($props.info.value === e) {
			$emit('setValue', $props.index, '')
		} else {
			$emit('setValue', $props.index, e)
		}
	}

	const setValue = (index, value) => {
		$emit('setValue', index, value)
	}

	onMounted(() => {
		mountedAction()
	})
</script>
<template>
	<view>
		<view v-for="(i,k) in $props.info.select" :key="k" class="question_select_item_wrapper" @click="selectClick(k)">
			<view class="select_checkbox_wrapper" :class="[
				$props.info.value === k ? 'active' : ''
			]"><uni-icons color="#ffffff" type="checkmarkempty" size="20"></uni-icons>
			</view>
			<text class="question_content_wrapper">{{ i.content }}</text>
		</view>
		<view v-if="$props.info.value !== '' && $props.info.select[$props.info.value].children.length !== 0">
			<view class="bind_tip_wrapper">请回答以下关联问题</view>
			<view v-for="(ii,ik) in $props.info.select[$props.info.value].children" :key="ik">
				<view class="children_break_wrapper"></view>
				<QuestionComponent @setValue="setValue" :info="ii" :index="`${$props.index}-${String(ik + 1)}`">
				</QuestionComponent>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.children_break_wrapper {
		height: 20rpx;
	}

	.bind_tip_wrapper {
		font-weight: 400;
		font-size: 26rpx;
		color: #828282;
		line-height: 60rpx;
		margin-top: 32rpx;
	}

	.question_content_wrapper {
		width: calc(100% - 40rpx - 15rpx);
		margin-left: 15rpx;
	}

	.question_select_item_wrapper {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.select_checkbox_wrapper {
		width: 36rpx;
		height: 36rpx;
		background: #FFFFFF;
		color: #ffffff;
		border-radius: 50%;
		border: 2px solid #D9D9D9;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select_checkbox_wrapper.active {
		width: 36rpx;
		height: 36rpx;
		background: #239EA3;
		border-radius: 50%;
		border: 2px solid #239EA3;
	}
</style>