<template>
  <div>
    <div v-if="!!question.GroupName && question.Type === 'group'">
      <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
        {{ language === 'en' ? question.GroupEnName : question.GroupName }}
      </h4>
    </div>
    <template v-else>
      <el-form-item
        v-if="(question.ShowQuestion === 1 && question.ParentTriggerValueList.includes(String(questionForm[question.ParentId]))) || question.ShowQuestion === 0"
        :label="`${question.QuestionName}`" :prop="question.Id" :rules="[
          {
            required: (question.IsRequired === 0 || (question.IsRequired === 1 && question.RelevanceId && (questionForm[question.RelevanceId] === question.RelevanceValue))) && question.Type !== 'group' && question.Type !== 'summary',
            message: ['radio', 'select', 'checkbox'].includes(question.Type) ? $t('common:ruleMessage:select') : $t('common:ruleMessage:specify'), trigger: ['blur', 'change']
          },
        ]"
        :class="[question.Type === 'group' ? 'mb' : (question.Type === 'upload' || question.QuestionName.length > 15) ? 'uploadWrapper' : '']">
        <!-- 输入框 -->
        <el-input v-if="question.Type === 'input'" v-model="questionForm[question.Id]" :disabled="readingTaskState >= 2"
          @change="((val) => { formItemChange(val, question) })" />
        <!-- 多行文本输入框 -->
        <el-input v-else-if="question.Type === 'textarea'" v-model="questionForm[question.Id]" type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }" maxlength="500" :disabled="readingTaskState >= 2"
          @change="((val) => { formItemChange(val, question) })" />
        <!-- 下拉框 -->
        <el-select v-else-if="question.Type === 'select'" v-model="questionForm[question.Id]"
          :disabled="readingTaskState >= 2 || ((question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode)"
          clearable :multiple="question.OptionTypeEnum === 1" @change="((val) => { formItemChange(val, question) })">
          <template v-if="question.TableQuestionType === 1">
            <el-option v-for="item in organList" :key="item.Id" :label="item[question.DataTableColumn]"
              :value="item[question.DataTableColumn]" />
          </template>
          <template v-else-if="question.TableQuestionType === 3 || question.QuestionGenre === 3">
            <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="String(item.value)"
              :label="item.label" />
          </template>
          <template
            v-else-if="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && 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-else-if="question.Type === 'radio'" v-model="questionForm[question.Id]"
          :disabled="readingTaskState >= 2" @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-checkbox-group v-else-if="question.Type === 'checkbox'" v-model="questionForm[question.Id]"
          :disabled="readingTaskState >= 2" @change="((val) => { formItemChange(val, question) })">
          <el-checkbox v-for="val in question.TypeValue.split('|')" :key="val" :label="val">
            {{ val }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 数值 -->
        <!-- <template v-else-if="question.Type==='number'">
          <el-input-number
            v-if="question.ValueType === 0"
            v-model="questionForm[question.Id]"
            :precision="0"
            :disabled="readingTaskState >= 2"
            style="width: 100%"
            @change="((val)=>{formItemChange(val, question)})"
          />
          <el-input-number
            v-else-if="question.ValueType === 3"
            v-model="questionForm[question.Id]"
            :disabled="readingTaskState >= 2"
            style="width: 100%"
            @change="((val)=>{formItemChange(val, question)})"
          />
          <el-input-number
            v-else-if="question.ValueType === 1 || question.ValueType === 2"
            v-model="questionForm[question.Id]"
            :precision="digitPlaces"
            :disabled="readingTaskState >= 2"
            style="width: 100%"
            @change="((val)=>{formItemChange(val, question)})"
          />
        </template> -->
        <div style="display: flex;justify-content: space-between;"
          v-else-if="question.Type === 'calculation' || question.Type === 'number'">
          <!-- 数值类型 -->
          <el-input v-if="question.Type === 'number'" v-model="questionForm[question.Id]"
            :disabled="readingTaskState >= 2" type="number" @change="((val) => { formItemChange(val, question) })">
            <template v-if="question.Unit" slot="append">
              {{ $fd('ValueUnit', parseInt(question.Unit)) }}
            </template>
          </el-input>

          <el-input v-else-if="question.Type === 'calculation'" v-model="questionForm[question.Id]" disabled
            @change="((val) => { formItemChange(val, question) })">
            <template v-if="question.Unit" slot="append">
              {{ $fd('ValueUnit', parseInt(question.Unit)) }}
            </template>
          </el-input>
          <svg-icon v-if="question.ShowChartTypeEnum > 0" icon-class="readingChart" class="svg-icon svg-readingChart"
            @click.stop="(e) => handleReadingChart({
              e,
              data: {
                TableQuestionId: question.Id,
                RowIndex: questionForm.RowIndex,
                QuestionName: question.QuestionName
              }
            })" />
        </div>

      </el-form-item>
    </template>

    <QuestionTableFormItem v-for="item in question.Childrens" :key="item.Id" :question="item"
      :question-form="questionForm" :reading-task-state="readingTaskState" @setFormItemData="setFormItemData"
      @resetFormItemData="resetFormItemData" @handleReadingChart="handleReadingChart" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'QuestionTableFormItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    },
    questions: {
      type: Array,
      default() {
        return []
      }
    },
    readingTaskState: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      digitPlaces: 2
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  mounted() {
    this.digitPlaces = Number(localStorage.getItem('digitPlaces'))
  },
  methods: {
    handleReadingChart(e) {
      this.$emit('handleReadingChart', e)
    },
    formItemChange(v, question) {
      if (question.Childrens && question.Childrens.length > 0) {
        this.resetChild(question.Childrens)
      } else {
        if (question.Type === 'number') {
          v = this.limitBlur(question.ValueType, v)
        }
        this.$emit('setFormItemData', { key: question.Id, val: v })
      }
      this.resetChildValue(question, this.questions)
    },
    resetChild(obj) {
      obj.forEach(i => {
        this.$emit('resetFormItemData', i.Id)
        if (i.Childrens && i.Childrens.length > 0) {
          this.resetChild(i.Childrens)
        }
      })
    },
    resetChildValue(obj, arr) {
      arr.some(item => {
        if (item.ParentId === obj.Id) {
          this.$emit('resetFormItemData', item.Id)
        }
        if (item.Childrens && item.Childrens.length > 0) {
          this.resetChildValue(obj, item.Childrens)
        }
        return item.ParentId === obj.Id
      })
    },
    limitBlur(valueType, value) {
      if (isNaN(parseInt(value))) {
        value = null
      } else {
        if (valueType === 0) {
          value = parseInt(value)
        } else if (valueType === 3) {
          value = parseFloat(value)
        } else {
          value = this.numberToFixed(value)
        }
      }
      return value
    },
    numberToFixed(v) {
      if (this.digitPlaces > -1) {
        return isNaN(parseFloat(v)) ? null : `${parseFloat(v).toFixed(this.digitPlaces)}`
      } else {
        return v
      }
    },
    resetFormItemData(v) {
      this.$emit('resetFormItemData', v)
    },
    setFormItemData(obj) {
      this.$emit('setFormItemData', obj)
    },
    limitNumbersEvent(e) {
      // 通过正则保留两位小数点
      let val = e.target.value
      if (val.length > 6) val = val.slice(0, 6)
      e.target.value = (val.match(/^\d*(\.?\d{0,3})/g)[0]) || null
    }
  }
}
</script>
<style lang="scss" scoped>
.mb {
  margin-bottom: 0px;
}

.disabled {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}

.uploadWrapper {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start;
}

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #646464a1;
}

::v-deep .el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}

::v-deep .el-form-item__content {
  width: 100%;
}

::v-deep .el-select.is-disabled .el-input__inner {
  background-color: #646464a1;
}

::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #428bca;
  border-color: #428bca;
}
</style>
