<template>
  <div>
    <div
      v-if="!!question.GroupName && question.Type==='group'"
    >
      <h4 style="color: #ddd;padding: 5px 0px;margin: 0;font-size: 15px;">
        {{ language==='en'?question.GroupEnName:question.GroupName }}
      </h4>
    </div>
    <template v-else>
      <el-form-item
        :label="`${language==='en'?question.QuestionEnName:question.QuestionName}`"
        :prop="question.Id"
        :rules="[
          { required: true,
            message: $t('common:ruleMessage:select'), trigger: ['blur', 'change']},
        ]"
        :class="[question.Type==='group'?'mb':'']"
      >
        <!-- 下拉框 -->
        <el-select
          v-if="question.Type==='select'"
          v-model="questionForm[question.Id]"
          clearable
          @change="((val)=>{formItemChange(val, question)})"
        >
          <template v-if="question.DictionaryCode">
            <el-option
              v-for="item of $d[question.DictionaryCode]"
              :key="item.id"
              :value="String(item.value)"
              :label="item.label"
            />
          </template>
          <template v-else>
            <el-option
              v-for="val in question.TypeValue.split('|')"
              :key="val"
              :label="val"
              :value="val"
            />
          </template>
        </el-select>
        <!-- 单选 -->
        <el-radio-group
          v-if="question.Type==='radio'"
          v-model="questionForm[question.Id]"
          @change="((val)=>{formItemChange(val, question)})"
        >
          <template v-if="question.DictionaryCode">
            <el-radio
              v-for="item of $d[question.DictionaryCode]"
              :key="item.id"
              :label="String(item.value)"
            >
              {{ item.label }}
            </el-radio>
          </template>
          <template v-else-if="question.TypeValue">
            <el-radio
              v-for="val in question.TypeValue.split('|')"
              :key="val"
              :label="val"
            >
              {{ val }}
            </el-radio>
          </template>
        </el-radio-group>
      </el-form-item>
    </template>

    <AssessmentFormItem
      v-for="(item) in question.Childrens"
      :key="item.Id"
      :question="item"
      :question-form="questionForm"
      @setFormItemData="setFormItemData"
      @resetFormItemData="resetFormItemData"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'AssessmentFormItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  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)
    },
    setFormItemData(obj) {
      this.$emit('setFormItemData', obj)
    }
  }
}
</script>
<style lang="scss" scoped>
.mb{
  margin-bottom: 0px;
}
</style>
