<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from 'vue'
	import {
		$api,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()

	const mountedAction = () => {
		getQuestionChoose()
	}
	const question_list = ref([])
	const getQuestionChoose = async () => {
		const response = await $api('QuestionChoose')
		$response(response, () => {
			question_list.value = response.data.list
		})
	}

	const toQuestion = (info) => {
		uni.navigateTo({
			url: '/pages/main/question/question/question?id=' + info.id
		})
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			mountedAction()
		}
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="question_list_wrapper">
			<view @click="toQuestion(i)" class="question_item_wrapper" v-for="(i,k) in question_list" :key="k">
				<view class="question_icon_wrapper">
					<image :src="$image(i.icon)"></image>
				</view>
				<view class="question_content_wrapper">
					<view class="question_title_wrapper">{{ i.title }}</view>
					<view class="question_desc_wrapper">{{ i.desc }}</view>
				</view>
				<view class="question_right_wrapper">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.question_right_wrapper {
		margin-right: 61rpx;
	}

	.question_content_wrapper {}

	.question_desc_wrapper {
		font-weight: 400;
		font-size: 22rpx;
		color: #5C5C5C;
		line-height: 1;
		margin-top: 19rpx;
	}

	.question_title_wrapper {
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		line-height: 1;
	}

	.question_icon_wrapper {
		width: 59rpx;
		height: 57rpx;
		margin-left: 56rpx;
	}

	.question_icon_wrapper image {
		width: 59rpx;
		height: 57rpx;
		display: block;
		object-fit: contain;
	}

	.question_item_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 550rpx;
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		margin: 60rpx auto 0;
	}

	.question_list_wrapper {
		margin-top: 65rpx;
	}
</style>