    <template>
    <div class="home">
        <nav-bar />
        <van-form @submit="postFrom">
        <!-- {{ indexData }} -->
        <div v-for="(item, i) in indexData" :key="i">
            <p v-if="item.question_type !== '03' && item.grading_type == null"><label>*</label>{{ item.question_title }}</p>
            <van-field :rules="formRyles.rulesRadio" v-if="item.question_type !== '03' && item.grading_type == null">
            <template #input>
                <van-radio-group v-if="item.question_type === '01'" v-model="result[i].value" class="radio_dx">
                <van-cell-group>
                    <van-cell v-for="(itemV, itemK) in JSON.parse(item.question_content)" :key="itemK">
                    <van-radio :name="itemK">{{ itemV }}</van-radio>
                    <span v-if="itemV === '其他'">
                        <van-field v-if="result[i].value === itemK" type="text" border placeholder="请输入"></van-field>
                    </span>
                    <van-radio-group v-if="itemV === '是' && result[i].value == 1" v-model="xxx">
                        <van-cell-group v-for="(child, index) in indexData" :key="index">
                        <span v-if="child.pid == item.question_id && child.grading_type == 2">
                            <p><label>*</label>{{ child.question_title }}</p>
                            <van-cell v-for="(itemV, itemK) in JSON.parse(child.question_content)" :key="itemK">
                            <van-radio :name="itemK">{{ itemV }}</van-radio>
                            <span v-if="itemV === '其他'">
                                <van-field v-if="xxx === itemK" type="text" border placeholder="请输入"></van-field>
                            </span>
                            </van-cell>
                        </span>
                        </van-cell-group>
                    </van-radio-group>
                    </van-cell>
                </van-cell-group>
                </van-radio-group>
                <!-- 问题类型是多选类型 -->
                <van-checkbox-group v-if="item.question_type === '02'" v-model="result[i].value" class="radio_dx" :max="3">
                <van-cell-group>
                    <van-cell v-for="(itemV, itemK) in JSON.parse(item.question_content)" :key="itemK">
                    <van-checkbox :name="itemK">{{ itemV }}---{{ itemK }}</van-checkbox>
                    <span v-if="itemV === '其他'">
                        <van-field v-if="itemV === itemK" type="text" border placeholder="请输入"
                        v-model="result[i].value"></van-field>
                    </span>
                    </van-cell>
                </van-cell-group>
                </van-checkbox-group>
            </template>
            </van-field>
            <!-- 问题类型是输入框类型 -->
            <van-field v-if="
            item.question_type === '03' &&
            item.question_title.includes('手机号')
            " type="number" placeholder="请输入" :v-model="result[i].value" maxlength="11"></van-field>
            <van-field v-else-if="
            item.question_type === '03' &&
            !item.question_title.includes('手机号')
            " type="text" placeholder="请输入" v-model="result[i].value" :rules="formRyles.rulesField"></van-field>
        </div>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
        </van-form>
    </div>
    </template>

    <script>
    import Vue from "vue";
    import { Tab, Tabs, Toast } from "vant";
    import { Form } from "vant";
    import { Field } from "vant";
    import { getQuestions } from "@/request/api";

    export default {
    name: "mz_test.vue",
    data () {
        return {
        indexData: [],
        result: [],
        check_jqmz: [],
        xxx: '',
        formRyles: {
            mobile: [
            { required: true, message: "请填正确的手机号" },
            {
                pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
                message: "手机格式错误",
            },
            ],
            rulesRadio: [{ required: true, message: "请选择选项" }],
            rulesField: [{ required: true, message: "请输入内容" }],
        },
        };
    },
    mounted () {
        let params = {
        type_id: "101",
        };
        getQuestions(params).then((res) => {
        if (res.code === 200) {
            this.indexData = res.data;
            console.log(this.indexData);
            let result = [];
            if (!this.indexData.length) {
            result = [{}];
            } else {
            for (let i = 0; i < this.indexData.length; i++) {
                if (this.indexData[i].question_type === "02") {
                result.push({ index: i + 1, value: [] });
                } else {
                result.push({ index: i + 1, value: "" });
                }
            }
            }
            this.result = result;
        } else {
            Toast(res.message);
        }
        });
    },
    methods: {
        //定位未填写的必填项第一项
        goVanFieldControl () {
        //延迟获取error标签数据组，放外面会导致获取过快导致null
        setTimeout(() => {
            let isError = document.getElementsByClassName("van-field--error"); // 获取错误内容标签
            if (isError.length !== 0) {
            isError[0].scrollIntoView({
                behavior: "smooth",
                block: "start",
                inline: "start",
            }); // 只定位到第一个必填项位置
            }
        }, 500);
        },
        mz_radio_sf_change (val) {
        if (val !== "11") {
            this.mz_sf_field_show = false;
            this.mz_sf_field = "";
        } else {
            this.mz_sf_field_show = true;
        }
        },
        mz_radio_kbyy_change (val) {
        if (val !== "9") {
            this.mz_kbyy_field_show = false;
            this.mz_kbyy_field = "";
        } else {
            this.mz_kbyy_field_show = true;
        }
        },
        check_jqmz_change (val) {
        if (val.includes("7")) {
            this.mz_jqmz_field_show = false;
            this.mz_jqmz_field = "";
        } else {
            this.mz_jqmz_field_show = true;
        }
        },
        postFrom (value) {
        console.log(); //连接后端接口，发送数据
        },
    },
    };
    </script>

    <style scoped>
    .radio_dx {
    margin: 0.2rem 0.2rem 0.2rem 0.2rem;
    width: 100%;
    }

    p {
    background-color: #e5f4fb;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    font-size: large;
    color: #333333;
    }

    p label {
    color: red;
    }
    </style>
