<template>
    <div class="questionnaire">
        <van-nav-bar
            title="调查问卷"
            left-text=""
            right-text="提交"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
        <div class="main">
            <van-form>
                <van-field name="radio" label="单选框">
                    <template #input>
                        <van-radio-group v-model="form.radio" direction="horizontal">
                            <van-radio name="1">单选框 1</van-radio>
                            <van-radio name="2">单选框 2</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="checkboxGroup" label="复选框组">
                    <template #input>
                        <van-checkbox-group v-model="form.checkboxGroup" direction="horizontal">
                            <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
                            <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
                        </van-checkbox-group>
                    </template>
                </van-field>
                <van-field name="switch" label="开关">
                    <template #input>
                        <van-switch v-model="form.switchChecked" size="20" />
                    </template>
                </van-field>
                <van-field
                    v-model="form.text"
                    name="文本"
                    label="文本"
                    placeholder="请输入文本"
                />
                <van-field
                    v-model="form.message"
                    rows="3"
                    autosize
                    label="留言"
                    type="textarea"
                    placeholder="请输入留言"
                />
            </van-form>
        </div>
    </div>
</template>

<script>
import { Form, RadioGroup, Radio } from 'vant';
export default {
    components: {
        [Form.name]: Form,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
    },
    data() {
        return {
            form: {
                radio: "1",
                checkboxGroup: [],
                text: "",
                message: "",
                switchChecked: false
            }
        };
    },
    created() {

    },
    mounted() {},
    methods: {
        onClickLeft(value) {
            console.log(value)
        },
        onClickRight() {
            console.log(this.form)
        }
    }
};
</script>
<style scoped lang="scss">
    @import './scss/index.scss';
</style>
