<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> -->
    <div
      v-if="!!question.GroupName && question.Type==='group'"
      style="font-weight: bold;font-size: 16px;margin: 5px 0px;"
    >
      {{ question.GroupName }}
    </div>
    <template v-else>
      <el-form-item
        v-if="(question.ShowQuestion===1 && questionForm[question.ParentId] === question.ParentTriggerValue) || question.ShowQuestion===0"
        :label="`${question.QuestionName}`"
        :prop="question.Id"
        :rules="[
          { required: (question.IsRequired === 0 || (question.IsRequired ===1 && question.RelevanceId && (question.RelevanceValueList.includes(isNaN(parseFloat(questionForm[question.RelevanceId])) ? questionForm[question.RelevanceId] : questionForm[question.RelevanceId].toString())))) && question.Type!=='group' && question.Type!=='summary',
            message: $t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
        ]"
        :class="[question.Type==='group'?'mb':question.Type==='upload'?'uploadWrapper':'']"
      >

        <!-- 输入框 -->
        <el-input
          v-if="question.Type==='input'"
          v-model="questionForm[question.Id]"
          :disabled="readingTaskState >= 2"
        />
        <!-- 多行文本输入框 -->
        <el-input
          v-if="question.Type==='textarea'"
          v-model="questionForm[question.Id]"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          :disabled="readingTaskState >= 2"
        />
        <!-- 下拉框 -->
        <!--        <el-select-->
        <!--          v-if="question.Type==='select'"-->
        <!--          v-model="questionForm[question.Id]"-->
        <!--          :disabled="readingTaskState >= 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-select
          v-if="question.Type==='select'"
          v-model="questionForm[question.Id]"
          filterable
          :placeholder="$t('common:placeholder:select')"
          :disabled="readingTaskState >= 2"
          @change="((val)=>{formItemChange(val, question)})"
        >
          <template v-if="question.DictionaryCode">
            <el-option
              v-for="item of $d[question.DictionaryCode]"
              :key="item.id"
              :value="item.value.toString()"
              :label="item.label"
            />
          </template>
          <template v-else-if="question.TypeValue">
            <el-option
              v-for="val in question.TypeValue.split('|')"
              :key="val.trim()"
              :label="val.trim()"
              :value="val.trim()"
            />
          </template>
        </el-select>
        <!-- 单选 -->
        <el-radio-group
          v-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="item.value.toString()"
            >
              {{ item.label }}
            </el-radio>
          </template>
          <template v-else-if="question.TypeValue">
            <el-radio
              v-for="val in question.TypeValue.split('|')"
              :key="val.trim()"
              :label="val.trim()"
            >
              {{ val.trim() }}
            </el-radio>
          </template>
        </el-radio-group>
        <!-- 复选框 -->
        <el-checkbox-group
          v-if="question.Type==='checkbox'"
          v-model="questionForm[question.Id]"
          :disabled="readingTaskState >= 2"
        >
          <el-checkbox
            v-for="val in question.TypeValue.split('|')"
            :key="val.trim()"
            :label="val.trim()"
          >
            {{ val.trim() }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 数值 -->
        <!-- :precision="2" :step="0.1" :max="10" -->
        <template v-if="question.Type==='number'">
          <!-- 数值 -->
          <el-select
            v-if="question.TypeValue"
            v-model="questionForm[question.Id]"
            clearable
            @change="(val) => { formItemNumberChange(val, question) }"
          >
            <el-option
              v-for="val in question.TypeValue.split('|')"
              :key="val"
              :label="val.trim()"
              :value="val.trim()"
            />
          </el-select>
          <el-input
            type="number"
            v-if="question.DataSource !== 1"
            @change="(val) => { formItemNumberChange(val, question) }"
            onblur="value=parseFloat(value).toFixed(parseInt(localStorage.getItem('digitPlaces')));"
            @input="limitInput($event, questionForm, question.Id)"
            v-model="questionForm[question.Id]"
          >
            <template slot="append" v-if="question.Unit !== 0">{{question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit}}</template>
            <template slot="append" v-else-if="question.ValueType === 2">%</template>
          </el-input>
          <el-input
            type="number"
            v-if="question.DataSource === 1"
            onblur="value=parseFloat(value).toFixed(parseInt(localStorage.getItem('digitPlaces')));"
            @input="limitInput($event, questionForm, question.Id)"
            :disabled="question.DataSource === 1"
            v-model="questionForm[question.Id]"
          >
            <template slot="append" v-if="question.Unit !== 0">{{question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit}}</template>
            <template slot="append" v-else-if="question.ValueType === 2">%</template>
          </el-input>
        </template>
        <!-- 自动分类 -->
        <el-input
          v-if="question.Type === 'class' && question.ClassifyShowType === 1"
          v-model="questionForm[question.Id]"
          :disabled="!question.ClassifyEditType"
        />
        <el-select
          v-if="question.Type === 'class' && question.ClassifyShowType === 2"
          v-model="questionForm[question.Id]"
          :disabled="!question.ClassifyEditType"
          @change="(val) => { formItemChange(val, question) }"
        >
          <el-option
            v-for="val in question.TypeValue.split('|')"
            :key="val"
            :label="val.trim()"
            :value="val.trim()"
          />
        </el-select>
        <el-radio-group
          v-if="question.Type === 'class' && question.ClassifyShowType === 3"
          v-model="questionForm[question.Id]"
          :disabled="!question.ClassifyEditType"
          @change="(val) => { formItemChange(val, question) }"
        >
          <el-radio
            v-for="item of question.TypeValue.split('|')"
            :key="item.trim()"
            :label="item.trim()"
          >
            {{ item.trim() }}
          </el-radio>
        </el-radio-group>
        <el-input
          v-if="question.Type === 'class' && question.ClassifyShowType === 4"
          type="number"
          :disabled="!question.ClassifyEditType"
          v-model="questionForm[question.Id]"
          @change="(val) => { formItemNumberChange(val, question) }"
        />
        <!-- 上传图像 -->
        <el-upload
          v-if="question.Type==='upload'"
          action
          :accept="accept"
          :limit="question.ImageCount"
          :on-preview="handlePictureCardPreview"
          :before-upload="handleBeforeUpload"
          :http-request="uploadScreenshot"
          list-type="picture-card"
          :on-remove="handleRemove"
          :file-list="fileList"
          :class="{disabled:fileList.length >= question.ImageCount}"
          :disabled="readingTaskState >= 2"
        >
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="OSSclientConfig.basePath + file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in" />
              </span>

              <span
                v-if="readingTaskState < 2"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog
          append-to-body
          :visible.sync="imgVisible"
          width="600px"
        >
          <el-image :src="OSSclientConfig.basePath + imageUrl" width="100%">
            <div slot="placeholder" class="image-slot">
              {{ $t('trials:readingUnit:qsList:message:loading') }}<span class="dot">...</span>
            </div>
          </el-image>
        </el-dialog>
      </el-form-item>
    </template>

    <FormItem
      v-for="(item) in question.Childrens"
      :key="item.Id"
      :question="item"
      :reading-task-state="readingTaskState"
      :question-form="questionForm"
      :visit-task-id="visitTaskId"
      :calculationList="calculationList"
      @setFormItemData="setFormItemData"
      @resetFormItemData="resetFormItemData"
      @formItemNumberChange="formItemNumberChange"
    />
  </div>
</template>
<script>
// import { uploadReadingAnswerImage } from '@/api/trials'
export default {
  name: 'FormItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    },
    readingTaskState: {
      type: Number,
      required: true
    },
    visitTaskId: {
      type: String,
      default: ''
    },
    calculationList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      fileList: [],
      accept: '.png,.jpg,.jpeg',
      imgVisible: false,
      imageUrl: '',
      urls: [],
      digitPlaces: null,
    }
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: true,
      handler(v, oldv) {
        try {
          if (!v || !v[this.question.Id] || !oldv || !oldv[this.question.Id])
            return
        } catch (e) {
          console.log(e, v)
        }
        if (this.question.Type === 'class') {
          this.$emit("setFormItemData", { key: this.question.Id, val: v[this.question.Id], question: v })
        }
        this.formItemNumberChange(this.question.Id, false)
      }
    }
  },
  mounted() {
    if (this.question.Type === 'upload') {
      if (this.questionForm[this.question.Id]) {
        this.urls = this.questionForm[this.question.Id].split('|')
        this.fileList = []

        this.urls.map(url => {
          this.fileList.push({ name: '', url: `${url}` })
        })
      }
    }
    this.digitPlaces = localStorage.getItem('digitPlaces') ? parseInt(localStorage.getItem('digitPlaces')) : 0
  },
  methods: {
    limitInput(value, a, b) {
      if (value.indexOf('.') > -1) {
        if (value.split('.')[1].length >= this.digitPlaces) {
          this.$set(a, b, parseFloat(value).toFixed(this.digitPlaces))
        }
      }
    },
    logic(rules, num = 0) {
      try {
        if (rules.CalculateQuestionList.length === 0) {
          return false
        }
        let dataArr = []
        rules.CalculateQuestionList.forEach((o, i) => {
          if (i === 0) {
            if (rules.CustomCalculateMark > 4 && rules.CustomCalculateMark < 10) {
              switch (rules.CustomCalculateMark) {
                case 5:
                  this.questionForm[o.QuestionId].forEach((q, qi) => {
                    if (qi === 0) {
                      num = parseFloat(q[o.TableQuestionId])
                    } else {
                      num *= parseFloat(q[o.TableQuestionId])
                    }
                  })
                  break;
                case 6:
                  this.questionForm[o.QuestionId].forEach((q, qi) => {
                    if (qi === 0) {
                      num = parseFloat(q[o.TableQuestionId])
                    } else {
                      num += parseFloat(q[o.TableQuestionId])
                    }
                  })
                  break;
                case 7:
                  this.questionForm[o.QuestionId].forEach((q, qi) => {
                    if (qi === 0) {
                      num = parseFloat(q[o.TableQuestionId])
                    } else {
                      num += parseFloat(q[o.TableQuestionId])
                    }
                  })
                  num = this.questionForm[o.QuestionId].length === 0 ? 0 : num / this.questionForm[o.QuestionId].length
                  break;
                case 8:
                  var arr = []
                  this.questionForm[o.QuestionId].forEach(q => {
                    arr.push(q[o.TableQuestionId])
                  })
                  num = arr.length === 0 ? 0 : Math.max(...arr)
                  break;
                case 9:
                  var arr = []
                  this.questionForm[o.QuestionId].forEach(q => {
                    arr.push(q[o.TableQuestionId])
                  })
                  num = arr.length === 0 ? 0 : Math.min(...arr)
                  break;
              }
            } else {
              num = parseFloat(this.questionForm[o.TableQuestionId])
              if (!isNaN(num)) {
                dataArr.push(num)
              }
            }
          } else {
            switch (rules.CustomCalculateMark) {
              case 1:
                num += parseFloat(this.questionForm[o.TableQuestionId])
                break;
              case 2:
                num -= parseFloat(this.questionForm[o.TableQuestionId])
                break;
              case 3:
                num *= parseFloat(this.questionForm[o.TableQuestionId])
                break;
              case 4:
                if (parseFloat(this.questionForm[o.TableQuestionId]) === 0) {
                  num = 0
                } else {
                  num /= parseFloat(this.questionForm[o.TableQuestionId])
                }
                break;
              case 10:
                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
                }
                num = dataArr.length === 0 ? 0 : dataArr.reduce((acc, curr) => {
                    return acc + (typeof curr === "number" ? curr : 0);
                  }, 0) / dataArr.length;
                break;
              case 11:
                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
                }
                num = Math.max(...dataArr);
                break;
              case 12:
                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
                }
                num = Math.min(...dataArr);
                break;
              case 13:
               if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
                }
                num = dataArr.length === 0 ? 0 : dataArr.reduce((acc, curr) => acc && curr) ? 1 : 0
                break;
              case 14:
                if (!isNaN(parseFloat(this.questionForm[o.TableQuestionId]))) {
                  dataArr.push(parseFloat(this.questionForm[o.TableQuestionId]))
                }
                num = dataArr.length === 0 ? 0 : dataArr.reduce((acc, curr) => acc || curr, 0) ? 1 : 0;
                break;
            }
          }
        })
      } catch (e) {
        console.log(e)
      }
      var digitPlaces = parseInt(localStorage.getItem('digitPlaces'))
      if (rules.ValueType === 2) {
        num = num * 100
      }
      if (rules.CustomCalculateMark === 13 || rules.CustomCalculateMark === 14) {
        return num
      } else {
        return num.toFixed(digitPlaces)
      }
      
    },
    formItemNumberChange(questionId, isTable) {
      if (isTable) {
        this.calculationList.forEach((v, i) => {
          var find = v.CalculateQuestionList.filter(o => {
            return o.QuestionId === questionId
          })
          // find的自动计算值number
          if (find) {
            var num = this.logic(v)
            if (num !== false) {
              this.$emit('setFormItemData', { key: v.QuestionId, val: num, question: v })
            }
          }
        })
      } else {
        this.calculationList.forEach(v => {
          var find = v.CalculateQuestionList.filter(o => {
            return o.TableQuestionId === questionId
          })
          // find的自动计算值number
          if (find) {
            var num = this.logic(v)
            if (num !== false) {
              this.$emit('setFormItemData', { key: v.QuestionId, val: num, question: v })
            }
          }
        })
      }
    },
    formItemChange(v, question) {
      if (question.Childrens.length > 0) {
        this.resetChild(question.Childrens)
      } else {
        this.$emit('setFormItemData', { key: question.Id, val: v, question: question})
      }
    },
    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)
    },
    async uploadScreenshot(param) {
      if (!this.visitTaskId) return
      const loading = this.$loading({
        target: document.querySelector('.ecrf-wrapper'),
        fullscreen: false,
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      })
      var file = await this.fileToBlob(param.file)
      const res = await this.OSSclient.put(`/${this.trialId}/ReadAttachment/${this.subjectId}/${this.visitTaskId}/${param.file.name}`, file)
      this.fileList.push({ name: param.file.name, url: this.$getObjectName(res.url) })
      this.urls.push(this.$getObjectName(res.url))
      this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '' })
      loading.close()
    },
    handleBeforeUpload(file) {
      // 检测文件类型是否符合要求
      if (this.checkFileSuffix(file.name)) {
        // this.fileList = []
        return true
      } else {
        this.$alert(`必须是 ${this.accept} 格式`)
        return false
      }
    },
    checkFileSuffix(fileName) {
      var index = fileName.lastIndexOf('.')
      var suffix = fileName.substring(index + 1, fileName.length)
      if (this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === -1) {
        return false
      } else {
        return true
      }
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.imageUrl = this.OSSclientConfig.basePath + file.url
      this.imgVisible = true
    },
    // 删除图片
    handleRemove(file, fileList) {
      this.imageUrl = ''
      this.fileList.splice(this.fileList.findIndex(f => f.url === file.url), 1)
      this.urls.splice(this.fileList.findIndex(f => f === file.url), 1)
      this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '' })
    }
  }
}
</script>
<style lang="scss" scoped>
.mb{
  margin-bottom: 0px;
}
.disabled{
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
.uploadWrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>
