<template>
  <div>
    <el-form-item
      v-if="(questionForm[question.parentId] === question.triggleValue) || question.parentId===''"
      :label="`${question.question}`"
      :prop="question.id"
      :rules="[
        { required: question.isRequired, message: '请注明', trigger: ['blur', 'change']},
      ]"
    >
      <!-- 输入框 -->
      <el-input :maxLength="$inputMax"
        v-if="question.type==='input'"
        v-model="questionForm[question.id]"
        style="width:500px"
      />
      <!-- 多行文本输入框 -->
      <el-input :maxLength="$inputMax"
        v-if="question.type==='textarea'"
        v-model="questionForm[question.id]"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        style="width:500px"
      />
      <!-- 下拉框 -->
      <el-select
        v-if="question.type==='select'"
        v-model="questionForm[question.id]"
        @change="((val)=>{formItemChange(val, question)})"
      >
        <el-option
          v-for="val in question.typeValue.split('|')"
          :key="val"
          :label="val"
          :value="val"
        />
      </el-select>
      <!-- 单选 -->
      <el-radio-group
        v-if="question.type==='radio'"
        v-model="questionForm[question.id]"
        @change="((val)=>{formItemChange(val, question)})"
      >
        <el-radio v-for="val in question.typeValue.split('|')" :key="val" :label="val">{{ val }}</el-radio>
      </el-radio-group>
      <!-- 复选框 -->
      <el-checkbox-group
        v-if="question.type==='checkbox'"
        v-model="questionForm[question.id]"
      >
        <el-checkbox v-for="val in question.typeValue.split('|')" :key="val" :label="val">{{ val }}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <FormItem v-for="(item) in question.childrens" :key="item.id" :question="item" :question-form="questionForm" />
  </div>
</template>
<script>
export default {
  name: 'FormItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: true,
      handler(v) {
        // console.log(v)
      }
    }
  },
  mounted() {
  },
  methods: {
    formItemChange(v, question) {
      if (question.childrens.length > 0) {
        this.resetChild(question.childrens)
      }
    },
    resetChild(obj) {
      obj.forEach(i => {
        this.$emit('resetFormItemData', i.id)
        if (i.childrens && i.childrens.length > 0) {
          this.resetChild(i.childrens)
        }
      })
    }
  }
}
</script>
