<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-if="((question.QuestionType === 56) && question.IsBaseLineTask)" />
    <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' ? 'uploadWrapper' : '']">
        <template v-if="question.QuestionType === 51 || question.QuestionType === 52">
          <!-- question.QuestionType === 51 || question.QuestionType === 52 -->
          <div style="display: flex;flex-direction: row;justify-content: flex-start;">
            <div style="display: flex;justify-content: space-between;" v-if="question.Type === 'calculation'">
              <el-input v-model="questionForm[question.Id]" disabled style="width: 120px;">
                <template v-if="question.Unit" slot="append">
                  {{ $fd('ValueUnit', parseInt(question.Unit)) }}
                </template>
                <svg-icon v-if="question.ShowChartTypeEnum > 0" icon-class="readingChart"
                  class="svg-icon svg-readingChart" @click.stop="(e) => handleReadingChart({
                    e,
                    data: {
                      QuestionId: question.Id,
                      RowIndex: questionForm.RowIndex,
                      QuestionName: question.QuestionName
                    }
                  })" />
              </el-input>
            </div>

            <!-- 测量 -->
            <el-button
              v-if="(!questionForm[question.Id] && ((question.QuestionType === 51 && liverIsInsideVolume) || (question.QuestionType === 52 && lungIsInsideVolume)) && readingTaskState !== 2)"
              size="mini" type="text" @click="addAnnotation(question)">{{ $t('trials:lugano:button:addAnnotation')
              }}</el-button>
            <!-- 清除标记 -->
            <el-button
              v-if="(questionForm[question.Id] || (question.QuestionType === 51 && !liverIsInsideVolume) || (question.QuestionType === 52 && !lungIsInsideVolume)) && readingTaskState !== 2"
              size="mini" type="text" style="padding: 7px 5px;margin-left:5px;" @click="removeAnnotation(question)">{{
                $t('trials:lugano:button:clearAnnotation') }}</el-button>
            <!-- 定位 -->
            <el-button
              v-if="(questionForm[question.Id] || (question.QuestionType === 51 && !liverIsInsideVolume) || (question.QuestionType === 52 && !lungIsInsideVolume))"
              size="mini" type="text" style="padding: '7px 5px';margin-left:-5px;"
              @click="locateAnnotation(question)">{{
                $t('trials:lugano:button:locateAnnotation') }}</el-button>
            <!-- 保存 -->
            <el-button v-if="readingTaskState !== 2 && question.SaveEnum === 1" size="mini" type="text"
              style="padding: '7px 5px';margin-left:-5px;" @click="saveAnnotation(question)">
              <!-- 未保存 -->
              <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:unsaved')" placement="bottom">
                <i class="el-icon-warning" style="color:red" />
              </el-tooltip>
              {{ $t('common:button:save') }}
            </el-button>
            <el-button v-if="!question.IsBaseLineTask" size="mini" type="text"
              style="padding: '7px 5px';margin-left:-5px;" @click="viewAnnotations(question)">{{
                $t('trials:lugano:button:suvscreenshot') }}</el-button>
          </div>
        </template>
        <template v-else-if="question.QuestionType === 53">
          <div style="display: flex;justify-content: space-between;" v-if="question.Type === 'calculation'">
            <el-input v-model="questionForm[question.Id]" disabled>
              <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: {
                  QuestionId: question.Id,
                  RowIndex: questionForm.RowIndex,
                  QuestionName: question.QuestionName
                }
              })" />
          </div>

        </template>
        <template v-else-if="question.QuestionType === 55">
          <el-select v-model="questionForm[question.Id]" :disabled="readingTaskState >= 2" clearable
            @change="((val) => { formItemChange(val, question) })">
            <el-option-group
              :label="!isNaN(parseFloat(question.LastTaskAnswer)) ? `${$t('trials:dicomReading:tip:lastVisitStatus')} ${$fd(question.DictionaryCode, parseFloat(question.LastTaskAnswer))}` : ''">
              <template>
                <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="String(item.value)"
                  :label="item.label" />
              </template>
            </el-option-group>
          </el-select>
        </template>
        <template v-else-if="question.QuestionType === 56">
          <el-select v-model="questionForm[question.Id]" :disabled="readingTaskState >= 2" clearable
            @change="((val) => { formItemChange(val, question) })">
            <el-option-group
              :label="!isNaN(parseFloat(question.LastTaskAnswer)) ? `${$t('trials:dicomReading:tip:lastVisitStatus')} ${parseFloat(question.LastTaskAnswer) === 5 ? 'NA' : $fd(question.DictionaryCode, parseFloat(question.LastTaskAnswer))}` : ''">
              <template v-if="pet5PS * 1 === -1">
                <el-option v-for="item of $d[question.DictionaryCode]" v-show="item.value !== 4" :key="item.id"
                  :value="String(item.value)" :label="item.label" />
              </template>
              <template v-else>
                <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="String(item.value)"
                  :label="item.label" />
              </template>
            </el-option-group>
          </el-select>
        </template>
        <template v-else-if="question.QuestionType === 57">
          <el-select v-model="questionForm[question.Id]" :disabled="readingTaskState >= 2" clearable
            @change="((val) => { formItemChange(val, question) })">
            <el-option-group
              :label="!isNaN(parseFloat(question.LastTaskAnswer)) ? `${$t('trials:dicomReading:tip:lastVisitStatus')} ${$fd(question.DictionaryCode, parseFloat(question.LastTaskAnswer))}` : ''">
              <template v-if="pet5PS * 1 === -1">
                <el-option v-for="item of $d[question.DictionaryCode]" v-show="item.value !== 1" :key="item.id"
                  :value="String(item.value)" :label="item.label" />
              </template>
              <template v-else>
                <el-option v-for="item of $d[question.DictionaryCode]" :key="item.id" :value="String(item.value)"
                  :label="item.label" />
              </template>
            </el-option-group>
          </el-select>
        </template>
        <!-- 输入框 -->
        <el-input v-else-if="question.Type === 'input'" v-model="questionForm[question.Id]"
          :disabled="readingTaskState >= 2" />
        <!-- 多行文本输入框 -->
        <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" />
        <!-- 下拉框 -->
        <el-select v-else-if="question.Type === 'select'" v-model="questionForm[question.Id]"
          :disabled="readingTaskState >= 2 || ((question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode) || question.QuestionType === 50"
          clearable @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">
          <el-checkbox v-for="val in question.TypeValue.split('|')" :key="val" :label="val">
            {{ val }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 数值 -->

        <div style="display: flex;justify-content: space-between;"
          v-else-if="question.Type === 'calculation' || question.Type === 'number'">
          <el-input-number v-if="question.Type === 'number'" v-model="questionForm[question.Id]"
            :disabled="readingTaskState >= 2" />
          <el-input v-model="questionForm[question.Id]" disabled v-else />
          <svg-icon v-if="question.ShowChartTypeEnum > 0" icon-class="readingChart" class="svg-icon svg-readingChart"
            @click.stop="(e) => handleReadingChart({
              e,
              data: {
                QuestionId: question.Id,
                RowIndex: questionForm.RowIndex,
                QuestionName: question.QuestionName
              }
            })" />
        </div>

        <!-- 上传图像 -->
        <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 v-if="question.Type === 'upload'" append-to-body :visible.sync="imgVisible" width="600px">
          <el-image :src="imageUrl" width="100%">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </el-dialog>
      </el-form-item>
    </template>
    <template v-for="item of question.Childrens">
      <QuestionItem v-if="item.QuestionClassify === 0" :key="item.Id" :question="item"
        :reading-task-state="readingTaskState" :question-form="questionForm" :visit-task-id="visitTaskId"
        :pet5p-s="pet5PS" :lung-is-inside-volume="lungIsInsideVolume" :liver-is-inside-volume="liverIsInsideVolume"
        @setFormItemData="setFormItemData" @resetFormItemData="resetFormItemData"
        @handleReadingChart="handleReadingChart" />
    </template>
  </div>
</template>
<script>
// import { uploadReadingAnswerImage } from '@/api/trials'
import FusionEvent from './FusionEvent'
import { mapGetters } from 'vuex'
export default {
  name: 'QuestionItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    },
    readingTaskState: {
      type: Number,
      required: true
    },
    visitTaskId: {
      type: String,
      default: ''
    },
    lungIsInsideVolume: {
      type: Boolean,
      default: true
    },
    liverIsInsideVolume: {
      type: Boolean,
      default: true
    },
    pet5PS: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [],
      accept: '.png,.jpg,.jpeg',
      imgVisible: false,
      imageUrl: '',
      urls: []
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: true,
      handler(v) {
        // console.log(v)
      }
    },
    pet5PS: {
      deep: true,
      immediate: true,
      handler(v) {
        // console.log(v)
      }
    }
  },
  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: `/api/${url}` })
        })
      }
    }
  },
  methods: {
    handleReadingChart(e) {
      this.$emit('handleReadingChart', e)
    },
    formItemChange(v, question) {
      if (question.QuestionType === 55) {
        this.$emit('setFormItemData', { key: question.Id, val: v })
      }
      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)
    },
    addAnnotation(question) {
      FusionEvent.$emit('addAnnotation', question)
    },
    removeAnnotation(question) {
      FusionEvent.$emit('locateAnnotation', question)
      // 是否确认清除标记？
      this.$confirm(this.$t('trials:reading:warnning:msg47'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          FusionEvent.$emit('removeAnnotation', question)
        })
        .catch(() => { })
    },
    locateAnnotation(question) {
      FusionEvent.$emit('locateAnnotation', question)
    },
    saveAnnotation(question) {
      FusionEvent.$emit('saveAnnotation', question)
    },
    viewAnnotations(question) {
      FusionEvent.$emit('viewAnnotations', question)
    },
    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 {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}

.uploadWrapper {
  display: flex;
  flex-direction: column;
  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 5px;
}

::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>
