<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt" v-if="isLoad">

            <view v-for="(question,q_index) in questions" :key="q_index" class="question uni-flex uni-column">
                <text class="title uni-center">{{question.question}}</text>
                <radio-group>
                    <label class="uni-list-cell uni-list-cell-pd" v-for="(answer,a_index) in question.answers" :key="a_index">
                        <view>
                            <radio :value="a_index"/>
                        </view>
                        <view>{{answer}}</view>
                    </label>
                </radio-group>
            </view>

            <view class="uni-flex uni-row button-group question">
                <view class="flex-item">
                    <button type="primary" @click="submit">提交答卷</button>
                </view>
                <view class="flex-item">
                    <button type="primary" class="reset" @click="reset">重置答卷</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "question",
        data: function () {
            return {
                title: "垃圾百科测验",
                questions:[],
                isLoad:false
            }
        },
        methods:{
            reset:function () {
                uni.reLaunch({
                    url: 'question'
                });
            },
            submit:function () {
                console.info("提交答卷")
            }
        },
        onShow:function(){
            console.info("加载试题中")
            uni.showLoading({
                title:"加载试题中"
            })
            let _this=this
            console.info(_this)
            setTimeout(function () {
                _this.questions=[
                    {
                        question: "测试问题?",
                        answers: ["答案1", "答案2", "答案3", "答案4"]
                    },
                    {
                        question: "测试问题?",
                        answers: ["答案1", "答案2", "答案3", "答案4"]
                    },
                    {
                        question: "测试问题?",
                        answers: ["答案1", "答案2", "答案3", "答案4"]
                    }
                ]
                _this.isLoad=true
                uni.hideLoading()
            },1000)
        }
    }
</script>

<style scoped>
    .uni-list-cell {
        justify-content: flex-start
    }
    .question{
        margin-top:10px;
    }
    .reset{
        margin-left: 20px;
    }
    .button-group{
        justify-content: center;
    }
</style>