<template>
  <div v-loading="loading" style="min-height:400px;">
    <template v-if="questions.length>0">
      <el-form
        v-if="isRender"
        ref="questions"
        size="small"
        :model="questionForm"
      >
        <FormItem
          v-for="question of questions"
          :key="question.Id"
          :question="question"
          :question-form="questionForm"
          :audit-state="0"
          @resetFormItemData="resetFormItemData"
        />
      </el-form>
    </template>
    <template v-else>
      <div style="min-height:400px;">
        <!-- 暂无数据 -->
        <p>{{ $t('trials:medicalFeedbackCfg:message:msg3') }}</p>
      </div>

    </template>

  </div>

</template>
<script>
import { getMedicineQuestionPreview } from '@/api/trials'
import FormItem from './FormItem'
export default {
  name: 'QuestionTpl',
  components: {
    FormItem
  },
  props: {
    readingCategory: {
      type: Number,
      required: true
    },
    trialReadingCriterionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      questionForm: {},
      isRender: false,
      trialId: '',
      readingTaskState: 0
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.getQuestions()
  },
  methods: {

    getQuestions() {
      this.loading = true
      var param = {
        trialId: this.trialId,
        readingCategory: this.readingCategory,
        TrialReadingCriterionId: this.trialReadingCriterionId
      }
      getMedicineQuestionPreview(param).then(res => {
        var questions = []
        res.Result.map((v) => {
          if (v.Type === 'group' && v.Childrens.length === 0) return
          questions.push(v)
          if (v.Type !== 'group' && v.Type !== 'summary') {
            this.$set(this.questionForm, v.Id, v.Answer ? v.Answer : '')
          }
          if (v.Childrens.length > 0) {
            this.setChild(v.Childrens)
          }
        })
        this.questions = questions
        // this.questions.map(q => {
        //   if (q.Type !== 'group' && q.Type !== 'summary') {
        //     this.$set(this.questionForm, q.Id, q.Answer ? q.Answer : '')
        //     if (q.Childrens.length > 0) {
        //       this.setChild(q.Childrens)
        //     }
        //   }
        // })
        this.isRender = true
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    setChild(obj) {
      obj.forEach(i => {
        if (i.Type !== 'group' && i.Type !== 'summary') {
          this.$set(this.questionForm, i.Id, i.Answer)
        }

        if (i.Childrens && i.Childrens.length > 0) {
          this.setChild(i.Childrens)
        }
      })
    },
    resetFormItemData(v) {
      this.questionForm[v] = null
    }
  }
}
</script>
