<template>
    <div class="question-form">
        <span ref="top"></span>
        <van-form label-width="100%" ref="form">
            <template v-for="(item, index) in formData" :key="index">
                <div class="px-4 py-2 title">{{item.title}}</div>
                <van-field :name="q.key" v-for="(q, i) in item.issue" :key="i"
                    :label="q.title"
                    :rules="[{ required: true, message: '请选择' }]">
                    <template #input>
                        <van-radio-group v-model="q.value" @change="onChange($event, item)" class="pl-2">
                            <van-radio v-for="a in q.answer.cont" shape="dot" class="mt-2"
                                :name="a.value" :key="a.value">{{a.name}}</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="highRisk" label="筛查结论" label-width="4.5em">
                    <template #input>
                        <van-radio-group v-model="item.highRisk" direction="horizontal">
                            <van-radio v-for="r in store.getDict('DC00071')" shape="dot"
                                :name="r.value" :key="r.value">{{r.name}}</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <div class="remark" v-if="item.remark && item.highRisk === 1">
                    {{ item.remark }}
                </div>
            </template>
        </van-form>
    </div>
</template>

<script>
import { getQuestion } from '../config.js'
import { useStore } from '@/tumour/store/index.js'

export default {
    props: {
        // 筛查癌种 获取对应的问卷
        species: Array
    },
    data() {
        return {
            formData: [],
        }
    },
    setup() {
        const store = useStore()
        return { store }
    },
    created() {
        this.init()
    },
    mounted() {
        const dom = this.$refs['top']
        if (!dom) return
        dom.scrollIntoView()
    },
    methods: {
        init() {
            if (!this.species) return
            this.species.forEach(e => {
                this.formData.push(getQuestion(e))
            })
            console.log(this.formData)
        },
        onChange(val, item) {
            // console.log(val, item)
            // console.log('高危判断', item.check())
            item.highRisk = item.check() ? 1 : 2
        },
        submit() {
            return new Promise((resolve) => {
                this.$refs.form.validate().then(res => {
                    console.log(res, this.formData)
                    const result = {}
                    this.formData.forEach(e => {
                        const issue = {}
                        e.issue.forEach(i => {
                            issue[i.key] = i.value
                        })
                        result[e.key] = {
                            highRisk: e.highRisk,
                            ...issue
                        }
                    })
                    resolve(result)
                }).catch(err => {
                    console.warn(err)
                })
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import '@/tumour/utils/common.less';
.remark {
    border: 1px solid #F0F0F0;
    padding: 10px;
    color: #595959;
    background-color: #FAFAFA;
    margin: 10px 16px;
    line-height: 1.5;
}
</style>