<template>
  <el-form
    v-if="isRender"
    ref="assessmentForm"
    :model="form"
    size="small"
  >
    <div class="base-dialog-body">
      <!-- <div v-for="qs in questions" :key="qs.Id">
        <h4 v-if="qs.Type === 'group'">{{ qs.GroupName }}</h4>
        <el-form-item
          v-else
          :label="language==='en'?qs.QuestionEnName:qs.QuestionName"
          :prop="qs.Id"
          :rules="[
            { required: true,message:$t('common:ruleMessage:select'), trigger: ['blur','change']},
          ]"
        >

          <el-radio-group v-if="qs.Type === 'radio'" v-model="form[qs.Id]">
            <el-radio
              v-for="item of $d[qs.DictionaryCode]"
              :key="qs.Id + item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>

          <el-select
            v-if="qs.Type === 'select'"
            v-model="form[qs.Id]"
            filterable
          >
            <el-option
              v-for="item of $d[qs.DictionaryCode]"
              :key="item.id"
              :value="item.value"
              :label="item.label"
            />

          </el-select>
        </el-form-item>
      </div> -->
      <AssessmentFormItem
        v-for="question of questions"
        :key="question.Id"
        :question="question"
        :question-form="form"
        @setFormItemData="setFormItemData"
        @resetFormItemData="resetFormItemData"
      />

    </div>
    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
      <el-form-item style="text-align:right;">
        <el-button size="small" @click="handleCancel">
          {{ $t('common:button:cancel') }}
        </el-button>
        <el-button
          size="small"
          type="primary"
          @click="handleSave"
        >
          {{ $t('common:button:save') }}
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
import { submitTaskAdditionalQuestion } from '@/api/trials'
import { mapGetters } from 'vuex'
import AssessmentFormItem from './AssessmentFormItem.vue'
export default {
  name: 'AdditionalAssessment',
  components: { AssessmentFormItem },
  props: {
    visitTaskId: {
      type: String,
      required: true
    },
    questions: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      form: {},
      isRender: false
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  mounted() {
    // this.questions.map(i => {
    //   this.$set(this.form, i.Id, isNaN(parseInt(i.Answer)) ? i.Answer : parseInt(i.Answer))
    // })
    this.questions.map((v) => {
      if (v.Type !== 'group' && v.Type !== 'summary') {
        this.$set(this.form, v.Id, v.Answer ? v.Answer : null)
      }
      if (v.Childrens.length > 0) {
        this.setChild(v.Childrens)
      }
    })
    this.isRender = true
  },
  methods: {
    async handleSave() {
      const valid = await this.$refs.assessmentForm.validate()
      if (!valid) return
      const loading = this.$loading({ fullscreen: true })
      try {
        var answers = []
        for (const k in this.form) {
          answers.push({ questionId: k, answer: this.form[k] })
        }
        var params = {
          visitTaskId: this.visitTaskId,
          answerList: answers
        }
        const res = await submitTaskAdditionalQuestion(params)
        if (res.IsSuccess) {
          this.$emit('sign')
        }
        loading.close()
      } catch (e) {
        console.log(e)
        loading.close()
      }
    },
    handleCancel() {
      this.$emit('close')
    },
    setChild(obj) {
      obj.forEach(i => {
        if (i.Type !== 'group' && i.Type !== 'summary' && i.Id) {
          this.$set(this.form, i.Id, i.Answer ? i.Answer : null)
        }
        if (i.Childrens && i.Childrens.length > 0) {
          this.setChild(i.Childrens)
        }
      })
    },
    resetFormItemData(v) {
      this.form[v] = null
    },
    setFormItemData(obj) {
      this.form[obj.key] = obj.val
    }
  }
}
</script>
