<template>
  <el-form
    v-if="isRender"
    ref="questionForm"
    :model="questionForm"
    size="small"
    style="width:600px;"
  >
    <template v-for="item in answers">
      <el-form-item
        v-if="item.IsShow"
        :key="item.TrialQCQuestionConfigureId"
        :label="`${item.QuestionName}`"
        :prop="item.TrialQCQuestionConfigureId"
        :rules="{required: item.IsRequired, message: $t('common:ruleMessage:specify')}"
      >
        <!-- 输入框 -->
        <el-input
          v-if="item.Type==='input'"
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
          :disabled="!item.IsEnable || isAudit"
          style="width:500px"
        />
        <!-- 多行文本输入框 -->
        <el-input
          v-if="item.Type==='textarea'"
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          :disabled="!item.IsEnable || isAudit"
          style="width:500px"
        />
        <!-- 下拉框 -->
        <el-select
          v-if="item.Type==='select'"
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
          :disabled="!item.IsEnable || isAudit"
          @change="((val)=>{formItemChange(val, item)})"
        >
          <el-option
            v-for="val in item.TypeValue.split('|')"
            :key="val"
            :label="val"
            :value="val"
          />
        </el-select>
        <!-- 单选 -->
        <el-radio-group
          v-if="item.Type==='radio'"
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
          :disabled="!item.IsEnable || isAudit"
          @change="((val)=>{formItemChange(val, item)})"
        >
          <el-radio v-for="val in item.TypeValue.split('|')" :key="val" :label="val">{{ val }}</el-radio>
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group
          v-if="item.Type==='checkbox'"
          v-model="questionForm[item.TrialQCQuestionConfigureId]"
          :disabled="!item.IsEnable || isAudit"
          @change="((val)=>{formItemChange(val, item)})"
        >
          <el-checkbox v-for="val in item.TypeValue.split('|')" :key="val" :label="val">{{ val }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </template>
  </el-form>
</template>
<script>
export default {
  props: {
    answers: {
      type: Array,
      default() {
        return []
      }
    },
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      questionForm: {},
      isRender: false
    }
  },
  mounted() {
    this.formatAnswers()
  },
  methods: {
    formatAnswers() {
      this.answers.forEach((item, index) => {
        if (!item.IsChild || (item.IsChild && item.Answer !== '')) {
          this.$set(this.answers[index], 'IsShow', true)
          this.$set(this.questionForm, item.TrialQCQuestionConfigureId, item.Answer)
        } else {
          this.$set(this.answers[index], 'IsShow', false)
          this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
        }
      })
      this.isRender = true
    },
    formItemChange(val, currentFormItem) {
      // 设置触发项
      this.answers.forEach((item, index) => {
        // 显示触发项且重置Answer
        // 重置未触发项
        if (item.ParentId === currentFormItem.TrialQCQuestionConfigureId) {
          if (item.ParentTriggerValue === val) {
            this.$set(this.answers[index], 'Answer', '')
            this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
            this.$set(this.answers[index], 'IsShow', true)
          } else {
            this.$set(this.answers[index], 'Answer', '')
            this.$set(this.answers[index], 'IsShow', false)
            this.$set(this.questionForm, item.TrialQCQuestionConfigureId, '')
            // 判断是否有子问题如果有则设置为隐藏且清空值
            const scope = this
            this.removeChild(item.TrialQCQuestionConfigureId, scope)
          }
        }
      })
    },
    removeChild(trialQCQuestionConfigureId, scope) {
      if (scope.answers.length > 0) {
        scope.answers.forEach(function(v, i) {
          if (v.ParentId === trialQCQuestionConfigureId) {
            scope.$set(scope.answers[i], 'Answer', '')
            scope.$set(scope.answers[i], 'IsShow', false)
            scope.$set(scope.questionForm, v.TrialQCQuestionConfigureId, '')
            scope.removeChild(v.TrialQCQuestionConfigureId, scope)
          }
        })
      }
    },
    submit() {
      return new Promise((resolve, reject) => {
        this.$refs['questionForm'].validate(valid => {
          if (!valid) {
            this.$confirm(this.$t('trials:audit:message:specifyQuestions'), {
              type: 'warning',
              showCancelButton: false,
              callback: action => {}
            })
            reject()
          } else {
          // 设置当前节点的Answer
            this.answers.forEach((item, index) => {
              if (item.IsShow) {
                this.$set(this.answers[index], 'Answer', this.questionForm[item.TrialQCQuestionConfigureId])
              }
            })
            resolve(this.answers)
          }
        })
      })
    }
  }
}
</script>
