<template>
  <div class="criterion-form-item">
    <div
      v-if="!!question.GroupName && question.Type==='group'"
      style="font-weight: bold;font-size: 16px;margin: 5px 0px;color:#fff;"
    >
      {{ question.GroupName }}
    </div>
    <div
      v-if=" question.Type==='table'"
      style="font-weight: bold;font-size: 14px;margin: 5px 0px;"
    >
      <div style="display: flex;justify-content: space-between;align-items: center;color:#fff;margin: 10px 0 5px">
        <span>{{ question.QuestionName }}</span>
        <el-button size="mini" v-if="readingTaskState<2" @click="openAddTableCol(question)">
          {{ $t('common:button:add') }}
        </el-button>
      </div>
      <el-table
        :data="questionForm[question.Id]">
        <el-table-column
          :prop="item.Id"
          :label="item.QuestionName"
          :key="item.Id"
          v-for="item of question.TableQuestions.Questions"
          show-overflow-tooltip
          :render-header="renderHeader"
        >
          <template slot-scope="scope">
            <span v-if="item.Type === 'upload'">
              {{scope.row[item.Id] === '' ? '' : scope.row[item.Id].split('|').length}}
            </span>
            <span v-else-if="item.Type === 'number'">
              {{scope.row[item.Id] ? parseFloat(scope.row[item.Id]).toFixed(digitPlaces) : null}}
            </span>
            <span v-else>
              {{scope.row[item.Id]}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            :label="$t('common:action:action')"
            show-overflow-tooltip
            width="100px"
            v-if="readingTaskState < 2"
            fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openAddTableCol(question, scope.$index)">
              {{$t('common:button:edit')}}
            </el-button>
            <el-button type="text" size="mini" v-if="scope.row.IsCurrentTaskAdd === 'True' || !question.IsCopyLesions || IsBaseline" @click="deleteTableCol(question, scope.$index)">
              {{$t('common:button:delete')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template v-else>
      <el-form-item
        v-if="(question.ShowQuestion===1 && question.ParentTriggerValueList.includes(questionForm[question.ParentId])) || question.ShowQuestion===0"
        :label="`${question.QuestionName}`"
        :prop="question.Id"
        :rules="[
          { required: (question.IsRequired === 0 || (question.IsRequired ===1 && question.RelevanceId && (question.RelevanceValueList.includes(questionForm[question.RelevanceId])))) && 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="question.TableQuestionType === 2"
        />
        <!-- 多行文本输入框 -->
        <el-input
          v-if="question.Type==='textarea'"
          v-model="questionForm[question.Id]"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
        />
        <!-- 下拉框 -->
        <el-select
          v-if="question.Type==='select'"
          v-model="questionForm[question.Id]"
          clearable
          :disabled="(question.TableQuestionType === 2 || question.QuestionGenre === 2) && !!question.DictionaryCode"
          @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="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="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)})"
        >
          <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]"
        >
          <el-checkbox
            v-for="val in question.TypeValue.split('|')"
            :key="val"
            :label="val"
          >
            {{ val }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 自动分类 -->
        <el-input
          v-if="question.Type === 'class'"
          v-model="questionForm[question.Id]"
          disabled
        />
        <!-- 自动计算 -->
        <!-- :precision="2" :step="0.1" :max="10" -->
        <el-input
          v-if="question.Type==='calculation'"
          v-model="questionForm[question.Id]"
          @input="value=value.replace(/^\D*(\d*(?:.\d{0,2})?).*$/g, '$1')"
          disabled
        />
        <!-- 自增 -->
        <el-input
          v-if="question.Type==='increment'"
          v-model="questionForm[question.Id]"
          disabled
        />
        <!-- 数值 -->
        <!-- :precision="2" :step="0.1" :max="10" -->

        <el-input
          type="number"
          v-if="question.Type === 'number' && question.DataSource !== 1"
          @change="((val)=>{formItemNumberChange(val, question)})"
          onblur="value=parseFloat(value).toFixed(parseInt(localStorage.getItem('digitPlaces')));console.log(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.Type === 'number' && question.DataSource === 1"
          onblur="value=parseFloat(value).toFixed(parseInt(localStorage.getItem('digitPlaces')));console.log(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>
        <!-- 上传图像 -->
        <el-upload
          v-if="question.Type==='upload'"
          :action="question.FileType"
          :limit="question.ImageCount"
          :on-preview="handlePictureCardPreview"
          :before-upload="(file) => {return handleBeforeUpload(file, question.FileType)}"
          :http-request="uploadScreenshot"
          :on-remove="handleRemove"
          :file-list="fileList"
          :class="{disabled:fileList.length >= question.ImageCount}"
        >
          <el-button slot="default" class="el-icon-plus">
            {{this.$t('common:button:upload')}}
          </el-button>
<!--          <div slot="file" slot-scope="{file}">-->
<!--            <div class="el-upload-list__item-name"></div>-->
<!--&lt;!&ndash;            <img&ndash;&gt;-->
<!--&lt;!&ndash;              class="el-upload-list__item-thumbnail"&ndash;&gt;-->
<!--&lt;!&ndash;              :src="OSSclientConfig.basePath + file.url"&ndash;&gt;-->
<!--&lt;!&ndash;              alt=""&ndash;&gt;-->
<!--&lt;!&ndash;            >&ndash;&gt;-->
<!--            <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-if="question.Childrens && question.Childrens.length>0 && question.Type !== 'table'">
      <CustomizeQuestionFormItem
        v-for="(item) in question.Childrens"
        :key="item.Id"
        :question="item"
        :IsBaseline="IsBaseline"
        :reading-task-state="readingTaskState"
        :question-form="questionForm"
        :visit-task-id="visitTaskId"
        :criterion-id="criterionId"
        :CalculationList="CalculationList"
        @formItemNumberChange="formItemNumberChange"
        @setFormItemData="setFormItemData"
        @resetFormItemData="resetFormItemData"
      />
    </template>
    <base-model :config="addOrEdit"
      class="my_dialog"
      :close-on-click-modal="false"
      width="400px"
      append-to-body
    >
      <template slot="dialog-body">
        <el-form
            ref="tableQsForm"
            :model="QuestionsForm"
            v-loading="loading"
            size="small"
        >
          <QuestionTableFormItem
              v-for="(item) in QuestionsList"
              :key="item.Id"
              :question="item"
              :IsBaseline="IsBaseline"
              :reading-task-state="readingTaskState"
              :question-form="QuestionsForm"
              :visit-task-id="visitTaskId"
              :criterion-id="criterionId"
              :type="addOrEdit.type"
              :CalculationList="CalculationList"
              @formItemTableNumberChange="formItemTableNumberChange"
              @setFormItemData="setFormItemData"
              @resetFormItemData="resetFormItemData"
              @setFormTableItemData="setFormTableItemData"
          />
        </el-form>
      </template>
      <template slot="dialog-footer">
        <el-button
            size="small"
            @click="addOrEdit.visible = false"
        >
          {{ $t('common:button:cancel') }}
        </el-button>
        <!-- 保存 -->
        <el-button size="small" class="my_upload_btn" @click="handleSave">
          {{ $t('common:button:save') }}
        </el-button>
      </template>
    </base-model>
  </div>
</template>
<script>
import { uploadReadingAnswerImage, getTrialOrganList, deleteReadingRowAnswer, getCustomTableQuestionPreview, getQuestionCalculateRelation, submitTableQuestion } from '@/api/trials'
import QuestionTableFormItem from './CustomizeQuestionTableFormItem'
import BaseModel from '@/components/BaseModel'
import DicomEvent from './../components/DicomEvent'
export default {
  name: 'CustomizeQuestionFormItem',
  components: { QuestionTableFormItem, BaseModel },
  props: {
    IsBaseline: {
      type: Boolean,
      required: true
    },
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return []
      }
    },
    criterionId: {
      type: String,
      required: true
    },
    readingTaskState: {
      type: Number,
      required: true
    },
    visitTaskId: {
      type: String,
      default: ''
    },
    CalculationList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      addOrEdit: { visible: false, title: '', width: '400px' },
      fileList: [],
      accept: '.png,.jpg,.jpeg',
      imgVisible: false,
      imageUrl: '',
      urls: [],
      organList: [],
      QuestionsList: [],
      QuestionsForm: {},
      AnswersList: [],
      loading: false,
      RowIndex: 0,
      RowId: null,
      digitPlaces: 0
    }
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: true,
      handler(v, oldv) {
        try {
          if (!v[this.question.Id] || !oldv[this.question.Id]) return
        } catch (e) {
        }
        this.formItemNumberChange(this.question.Id, false)
      }
    },
  },
  mounted() {
    this.digitPlaces = localStorage.getItem('digitPlaces') ? parseInt(localStorage.getItem('digitPlaces')) : 0
    if (this.question.Type === 'class') {
      this.ClassifyAlgorithmsList = JSON.parse(this.question.ClassifyAlgorithms)
    }
    setInterval(()=> {
      if (this.question.Type === 'class') {
        let o = this.ClassifyAlgorithmsList.find(v => {
          return this.questionForm[this.question.ClassifyQuestionId] >= v.gt && this.questionForm[this.question.ClassifyQuestionId] < v.lt
        })
        if (this.questionForm[this.question.ClassifyQuestionId]) {
          this.questionForm[this.question.Id] = o ? o.label : null
        } else {
          this.questionForm[this.question.Id] = null
        }
      }
    }, 300)
    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, index) => {
          this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${index + 1}`, url: `${url}` })
        })
      }
    }
    if (this.question.Type === 'table') {
      // this.getQuestionCalculateRelation()
      if (this.questionForm[this.question.Id]) {
        this.QuestionsForm = {}
        this.question.TableQuestions.Questions.forEach(v => {
          if (v.Type === 'number') {
            this.$set(this.QuestionsForm, v.Id, 0)
          } else {
            this.$set(this.QuestionsForm, v.Id, '')
          }
        })
      }
    }
  },
  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))
        }
      } else {
      }
    },
    deleteTableCol(row, index) {
      console.log(row)
      this.$confirm(this.$t('trials:uploadNonDicoms:message:msg1')).then(() => {
        const loading = this.$loading({ fullscreen: true })
        var param = {
          visitTaskId: this.visitTaskId,
          questionId: row.Id,
          rowId: this.questionForm[row.Id][index].RowId
        }
        deleteReadingRowAnswer(param)
          .then(async res => {
            if (res.IsSuccess) {
              this.$message.success('删除成功')
              DicomEvent.$emit('reGetQuestionAnswer')
            }
            loading.close()
          }).catch(() => {
          loading.close()
        })
      })

    },
    setFormTableItemData(id, url) {
      this.$set(this.QuestionsForm, id, url)
    },
    handleSave() {
      console.log(this.QuestionsForm)
      this.$refs.tableQsForm.validate(valid => {
        if (!valid) return
        const loading = this.$loading({ fullscreen: true })
        var answers = []
        var reg = new RegExp(/^[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}$/)
        for (const k in this.QuestionsForm) {
          if (reg.test(k)) {
            if (answers.findIndex(i => i.tableQuestionId === k) === -1) {
              console.log(this.QuestionsForm)
              answers.push({ tableQuestionId: k, answer: this.QuestionsForm[k] })
            }
          }
        }
        if (this.addOrEdit.type === 'edit') {
          var params = {
            questionId: this.question.Id,
            RowIndex: parseInt(this.QuestionsForm.RowIndex),
            RowId: this.QuestionsForm.RowId,
            visitTaskId: this.visitTaskId,
            trialId: this.$route.query.trialId,
            answerList: answers,
          }
        } else {
          var params = {
            questionId: this.question.Id,
            RowIndex: this.questionForm[this.question.Id].length + 1,
            visitTaskId: this.visitTaskId,
            trialId: this.$route.query.trialId,
            answerList: answers,
          }
          this.QuestionsForm.RowIndex = this.questionForm[this.question.Id].length + 1
        }
        submitTableQuestion(params).then(async res => {
          this.$message.success(this.$t('common:message:savedSuccessfully'))
          this.QuestionsForm.RowId = res.Result.RowId
          this.save()
          loading.close()
        }).catch(() => { loading.close() })
      })
    },
    renderHeader(h, obj) {
      let span = document.createElement('span')
      span.style.fontSize = '14px'
      span.innerText = obj.column.label
      document.body.appendChild(span)
      obj.column.realWidth = span.getBoundingClientRect().width + 40
      document.body.removeChild(span)
      return h('span', obj.column.label)
    },
    getQuestionCalculateRelation() {
      getQuestionCalculateRelation({
        TrialReadingCriterionId: this.criterionId,
        ReadingQuestionId: this.question.Id
      }).then(res => {
        this.CalculationList = res.Result
      })
    },
    save() {
      console.log(this.$refs.tableQsForm, this.QuestionsForm)
      this.$refs['tableQsForm'].validate((valid) => {
        console.log(valid)
        if (!valid) return
        if (this.addOrEdit.type === 'add') {
          this.AnswersList.push(this.QuestionsForm)
        } else {
          var index = this.AnswersList.findIndex(v => v.RowId === this.QuestionsForm.RowId)
          this.AnswersList.splice(index, 1, this.QuestionsForm)
        }
        this.$emit('setFormItemData', {key: this.question.Id, val: this.AnswersList})
        this.formItemNumberChange(this.question.Id, true)
        this.addOrEdit.visible = false
      })
    },
    logic(rules, num = 0) {
      try {
        if (rules.CalculateQuestionList.length === 0) {
          return false
        }
        rules.CalculateQuestionList.forEach((o, i) => {
          if (i === 0) {
            if (rules.CustomCalculateMark > 4) {
              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])
            }
          } 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;
            }
          }
        })
      } catch (e) {
        console.log(e)
      }
      var digitPlaces = parseInt(localStorage.getItem('digitPlaces'))
      if (rules.ValueType === 2) {
        num = num * 100
      }
      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 })
            }
          }
        })
      } 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 })
            }
          }
        })
      }
      // this.$emit('formItemNumberChange')
    },
    formItemTableNumberChange() {
      this.question.TableQuestions.Questions.forEach(v => {
        if (v.Type === 'number' && v.DataSource === 1) {
          var CalculateQuestions = JSON.parse(v.CalculateQuestions)
          var num
          CalculateQuestions.forEach((o, i) => {
            if (i === 0) {
              num = this.QuestionsForm[o.TableQuestionId]
            } else {
              switch (v.CustomCalculateMark) {
                case 1:
                  num += this.QuestionsForm[o.TableQuestionId]
                  break;
                case 2:
                  num -= this.QuestionsForm[o.TableQuestionId]
                  break;
                case 3:
                  num *= this.QuestionsForm[o.TableQuestionId]
                  break;
                case 4:
                  num /= this.QuestionsForm[o.TableQuestionId]
                  break;
              }
            }
          })
          this.$set(this.QuestionsForm, v.Id, num.toString())
        }
      })

    },
    openAddTableCol(row, index) {
      this.addOrEdit.visible = true
      this.addOrEdit.title = row.QuestionName + this.$t('trials:readingUnit:qsList:title:tableQs')
      this.QuestionsList = row.TableQuestions.Questions
      this.AnswersList = row.TableQuestions.Answers
      if (!index && index !== 0) {
        this.addOrEdit.type = 'add'
        this.QuestionsForm = {}
      } else {
        this.addOrEdit.type = 'edit'
        console.log(this.questionForm)
        this.QuestionsForm = Object.assign({}, this.questionForm[row.Id][index])
      }
    },
    getOrganInfoList() {
      var param = {
        trialId: this.$route.query.trialId,
        lesionType: this.question.LesionType,
        // systemCriterionId: this.criterionId,
        isEnable: true
      }
      getTrialOrganList(param).then(res => {
        this.organList = res.Result
      })
    },
    formNumberItemChange(v) {
      this.$emit('setFormItemData', { key: v.QuestionId, val: num })
    },
    formItemChange(v, question) {
      if (question.Childrens.length > 0) {
        this.resetChild(question.Childrens)
      }
      if (question.TableQuestionType === 1 && question.RelationQuestions.length > 0) {
        var index = this.organList.findIndex(item => item[question.DataTableColumn] === v)
        if (index < 0) return
        var selected = this.organList[index]
        this.question.RelationQuestions.map(qs => {
          var val = selected[qs.DataTableColumn]
          // if (typeof val === 'boolean') {
          //   // val = String(val)
          // }
          this.$emit('setFormItemData', { key: qs.Id, val: val })
        })
      }
    },
    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) {
      console.log('uploadScreenshot')
      if (!this.visitTaskId) return
      const loading = this.$loading({
        target: document.querySelector('.ecrf-wrapper'),
        fullscreen: false,
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      })
      var fileName = param.file.name
      let file = await this.fileToBlob(param.file)
      let res = await this.OSSclient.put(`/${this.$route.query.trialId}/Customize/${this.visitTaskId}/${fileName}`, file)
      this.fileList.push({ name: `${this.$t('trials:emailManageCfg:title:fileName')}${this.fileList.length + 1}`, url: this.$getObjectName(res.url) })
      console.log('fileList', this.fileList)
      this.urls.push(this.$getObjectName(res.url))
      this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '' })
      loading.close()
      // uploadReadingAnswerImage(this.$route.query.trialId, this.visitTaskId, formData).then(res => {
      //   if (res.IsSuccess) {
      //     this.fileList.push({ url: `/api/${res.Result.Path}` })
      //     this.urls.push(res.Result.Path)
      //     this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '' })
      //   }
      //   loading.close()
      // }).catch(() => {
      //   loading.close()
      // })
    },
    handleBeforeUpload(file, accept) {
      // 检测文件类型是否符合要求
      console.log('handleBeforeUpload', file)
      if (this.checkFileSuffix(file.name, accept) || accept === '-1') {
        return true
      } else {
        const msg = this.$t('trials:adReview:title:msg4').replace('xxx', accept)
        this.$alert(msg)
        return false
      }
      console.log(file)
    },
    checkFileSuffix(fileName, accept) {
      var index = fileName.lastIndexOf('.')
      var suffix = fileName.substring(index + 1, fileName.length)
      if (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) {
      console.log('handleRemove')
      if (file && file.status === "success") {
        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>
.my_dialog{
  .criterion-form-item{
    width: 100%;
    /deep/ .el-form-item__content{
      width: auto;
    }
    ///deep/ .el-input-goup__append{
    //  background-color: transparent;
    //  color: #ddd;
    //  border: 1px solid #5e5e5e;
    //}
  }
}
/deep/ .el-form-item__label{
  color: #c3c3c3;
}
/deep/ .el-radio__label{
  color: #c3c3c3;
}
/deep/ .el-input-group__append{
  background: #000;
  color: #ddd;
  border: 1px solid #5e5e5e;
}
/deep/ .el-input .el-input__inner{
  background-color: transparent;
  color: #ddd;
  border: 1px solid #5e5e5e;
}
.criterion-form-item{
  /deep/ .criterion-form-item .el-form-item{
    display: block;
    .el-form-item__label{
      display: block;
      color: #c8c8c8;
      float: none;
      text-align: left;
    }
  }
  .el-form-item{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  /deep/ .el-form-item__content{
  }
  .el-input{
    width:100%;
  }
.mb{
  margin-bottom: 0px;
}
.disabled{
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
.uploadWrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar{
  height: 10px!important;
}
/deep/ .el-table__fixed-right::before{
  display: none;
}
/deep/ .el-upload-list__item-name{
  color: #0a84ff;
  .el-icon-document{
    color: #0a84ff;
  }
}
</style>
