<template>
  <div>
    <el-form ref="questions" size="small" style="width:600px;" :model="questionForm">
      <div v-for="question of questions" :key="question.id">
        <div style="font-weight: bold;padding: 5px 0;">{{ question.group }}</div>
        <FormItem
          v-for="q of question.questions"
          :key="q.id"
          :question="q"
          :question-form="questionForm"
          @resetFormItemData="resetFormItemData"
        />
      </div>
      <el-form-item>
        <el-button>取消</el-button>
        <el-button @click="submit">提交</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import FormItem from './FormItem'
export default {
  name: 'Home',
  components: {
    FormItem
  },
  data() {
    return {
      questions: [
        {
          id: '01',
          group: '图像质量',
          questions: [
            {
              id: '001',
              parentId: '',
              question: '问题1',
              type: 'select',
              typeValue: 'A|B|C',
              value: '',
              isRequired: true,
              childrens: [
                {
                  id: '002',
                  parentId: '001',
                  triggleValue: 'A',
                  question: '问题1.1',
                  type: 'input',
                  typeValue: '',
                  value: '',
                  childrens: []
                }
              ]
            }
          ]
        },
        {
          id: '02',
          group: '质控问题',
          questions: [
            {
              id: '003',
              parentId: '',
              question: '问题2',
              type: 'radio',
              typeValue: 'Yes|No',
              value: '',
              childrens: [
                {
                  id: '004',
                  parentId: '003',
                  triggleValue: 'Yes',
                  question: '问题2.1',
                  type: 'input',
                  typeValue: '',
                  value: '',
                  childrens: []
                },
                {
                  id: '005',
                  parentId: '003',
                  triggleValue: 'No',
                  question: '问题2.2',
                  type: 'radio',
                  typeValue: '是|否',
                  value: '',
                  childrens: [
                    {
                      id: '006',
                      parentId: '005',
                      triggleValue: '是',
                      question: '问题2.2.1',
                      type: 'input',
                      typeValue: '',
                      value: '',
                      childrens: []
                    },
                    {
                      id: '007',
                      parentId: '005',
                      triggleValue: '否',
                      question: '问题2.2.2',
                      type: 'input',
                      typeValue: '',
                      value: '',
                      childrens: []
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      questionForm: {
        '001': '',
        '002': '',
        '003': '',
        '004': '',
        '005': '',
        '006': '',
        '007': ''
      }
    }
  },
  methods: {
    submit() {
      this.$refs['questions'].validate((valid) => {
        if (!valid) return
      })
    },
    resetFormItemData(v) {
      this.questionForm[v] = ''
    }
  }
}
</script>
