<template>
  <el-form
    v-if="questions.length>0"
    ref="globalReviewForm"
    v-loading="loading"
    :model="form"
    size="small"
  >
    <div class="base-dialog-body">
      <el-form-item
        v-for="qs in questions"
        :key="`${qs.QuestionId}${qs.QuestionName}`"
        :label="qs.QuestionName"
      >
        <!-- 下拉框 -->
        <el-select
          v-if="qs.Type==='select'"
          v-model="form[!qs.QuestionId?'Reason':qs.QuestionId]"
        >
          <el-option
            v-for="val in qs.TypeValue.split('|')"
            :key="val"
            :label="val"
            :value="val"
            :disabled="getBeforeAnswer(qs.QuestionName) === val"
          />
        </el-select>
        <!-- 单选 -->
        <el-radio-group
          v-if="qs.Type==='radio'"
          v-model="form[!qs.QuestionId?'Reason':qs.QuestionId]"
        >
          <el-radio
            v-for="val in qs.TypeValue.split('|')"
            :key="val"
            :label="val"
            :disabled="getBeforeAnswer(qs.QuestionName) === val"
          >
            {{ val }}
          </el-radio>
        </el-radio-group>
        <el-input :maxLength="$inputMax"
          v-if="qs.Type==='input'"
          v-model="form[!qs.QuestionId?'Reason':qs.QuestionId]"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
        />
      </el-form-item>
    </div>
    <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
      <el-form-item style="text-align:right;">
        <el-button size="small" type="primary" @click="handleClose">
          {{ $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 { saveGlobalReadingInfo } from '@/api/trials'
export default {
  name: 'EditGlobalForm',
  props: {
    globalTaskId: {
      type: String,
      required: true
    },
    visitTaskId: {
      type: String,
      required: true
    },
    questionList: {
      type: Array,
      default() {
        return []
      }
    },
    subjectId: {
      type: String,
      required: true
    },
    trialId: {
      type: String,
      required: true
    },
    beforeQuestionList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      questions: [],
      form: {},
      loading: false
    }
  },
  mounted() {
    this.questionList.map(v => {
      if (!v.QuestionId) {
        this.$set(this.form, 'Reason', v.Answer)
      } else {
        this.$set(this.form, v.QuestionId, v.Answer)
      }
    })
    this.questions = this.questionList
  },
  methods: {
    handleSave() {
      this.loading = true
      var questionList = []
      for (const i in this.form) {
        questionList.push(
          {
            questionId: i === 'Reason' ? null : i,
            visitTaskId: this.visitTaskId,
            answer: this.form[i]
          }
        )
      }
      var param = {
        globalTaskId: this.globalTaskId,
        subjectId: this.subjectId,
        trialId: this.trialId,
        questionList: questionList
      }
      saveGlobalReadingInfo(param).then(res => {
        this.loading = false
        this.$message.success(this.$t('common:message:savedSuccessfully'))
        this.$emit('getList')
        this.$emit('close')
      }).catch(() => {
        this.loading = false
      })
    },
    handleClose() {
      this.$emit('close')
    },
    getBeforeAnswer(qs) {
      var i = this.beforeQuestionList.findIndex(item => item.QuestionName === qs)
      if (i > -1) {
        return this.beforeQuestionList[i].Answer
      } else {
        return ''
      }
    }

  }
}
</script>
