<template>
  <div>
    <div
      v-if="!!question.GroupName && (questionForm[question.ParentId] === question.ParentTriggerValue) || question.ParentId===''||question.ParentId===null"
      style="font-weight: bold;font-size: 16px;margin: 5px 0px;"
    >
      {{ question.GroupName }}
    </div>
    <el-form-item
      v-if="(questionForm[question.ParentId] === question.ParentTriggerValue) || question.ParentId===''||question.ParentId===null"
      :label="`${question.QuestionName}`"
      :prop="question.Id"
      :rules="[
        { required: question.IsRequired && question.Type!=='group' && question.Type!=='summary',
          message: this.$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
      ]"
      :class="[question.Type==='group'?'mb':'']"
    >

      <!-- 输入框 -->
      <el-input
        v-if="question.Type==='input'"
        v-model="questionForm[question.Id]"
        :disabled="auditState >= 2"
        style="max-width:300px"
      />
      <!-- 多行文本输入框 -->
      <el-input
        v-if="question.Type==='textarea'"
        v-model="questionForm[question.Id]"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        :disabled="auditState >= 2"
        style="max-width:300px"
      />
      <!-- 下拉框 -->
      <el-select
        v-if="question.Type==='select'"
        v-model="questionForm[question.Id]"
        :disabled="auditState >= 2"
        clearable
        @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]"
        :disabled="auditState >= 2"
        @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]"
        :disabled="auditState >= 2"
      >
        <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"
      :audit-state="auditState"
      :question-form="questionForm"
      @resetFormItemData="resetFormItemData"
    />
  </div>
</template>
<script>
export default {
  name: 'FormItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    },
    auditState: {
      type: Number,
      required: true
    }
  },
  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)
        }
      })
    },
    resetFormItemData(v) {
      this.$emit('resetFormItemData', v)
    }
  }
}
</script>
<style lang="scss" scoped>
.mb{
  margin-bottom: 0px;
}
</style>
