<template>
  <div class="criterion-form-item">

    <el-form-item
      v-if="(question.ShowQuestion === 1 && !!~question.ParentTriggerValueList.indexOf(questionForm[question.ParentId])) || question.ShowQuestion === 0"
      :label="`${question.QuestionName}`" :prop="questionForm[question.Id]" :rules="[
        {
          required: (question.IsRequired === 0 || (question.IsRequired === 1 && question.RelevanceId && !!~question.RelevanceValueList.indexOf(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>

      <!-- 自动计算 -->
      <!-- :precision="2" :step="0.1" :max="10" -->
      <el-input v-if="question.Type === 'calculation'" v-model="questionForm[question.Id]" disabled />
      <!-- 自动计算 -->
      <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 === 'increment'" v-model="questionForm[question.Id]" disabled />
      <!-- 数值 -->
      <!-- :precision="2" :step="0.1" :max="10" -->
      <el-select v-if="question.Type === 'number' && question.TypeValue" v-model="questionForm[question.Id]" clearable
        @change="((val) => { formItemChange(val, question) })">
        <el-option v-for="val in question.TypeValue.split('|')" :key="val" :label="val" :value="val" />
        <template v-if="question.Unit !== 0" slot="prefix">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
          question.CustomUnit }}</template>
        <template v-else-if="question.ValueType === 2" slot="prefix">%</template>
      </el-select>
      <el-input v-else-if="question.Type === 'number' && question.DataSource !== 1" v-model="questionForm[question.Id]"
        type="number" @change="((val) => { formItemNumberChange(val, question) })">
        <template v-if="question.Unit !== 0" slot="append">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) :
          question.CustomUnit }}</template>
        <template v-else-if="question.ValueType === 2" slot="append">%</template>
      </el-input>
      <el-input
        v-else-if="question.Type === 'number' && question.DataSource === 1"
        v-model="questionForm[question.Id]"
        :disabled="question.DataSource === 1"
      >
        <template v-if="question.Unit !== 0" slot="append">{{ question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit }}</template>
        <template v-else-if="question.ValueType === 2" slot="append">%</template>
      </el-input>
      <!-- 上传图像 -->
      <el-upload v-if="question.Type === 'upload'" action :accept="question.FileType"
        :limit="question.ImageCount > 0 ? parseInt(question.ImageCount) : 100" :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 }">
        <i slot="default" class="el-icon-plus" />
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" crossorigin="anonymous" :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" crossorigin="anonymous" width="100%">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </el-dialog>
    </el-form-item>
  </div>
</template>
<script>
import { uploadReadingAnswerImage, getTrialOrganList, getCustomTableQuestionPreview } from '@/api/trials'
export default {
  name: 'QuestionFormItem',
  props: {
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    question: {
      type: Object,
      default() {
        return {}
      }
    },
    criterionId: {
      type: String,
      required: true
    },
    readingTaskState: {
      type: Number,
      required: true
    },
    visitTaskId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      addOrEdit: { visible: false, title: '' },
      fileList: [],
      accept: '.png,.jpg,.jpeg',
      imgVisible: false,
      imageUrl: '',
      urls: [],
      organList: [],
      QuestionsList: [],
      QuestionsForm: {}
    }
  },
  computed: {
    calculationValue: {
      get() {
        return this.questionForm[this.question.Id]
      },
      set() {

      }
    }
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: true,
      handler(v) {
        // console.log(v)
      }
    }
  },
  mounted() {
    if (this.question.Type === "class") {
      this.ClassifyAlgorithmsList = JSON.parse(
        this.question.ClassifyAlgorithms
      );
    }

    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}` })
        })
      }
    }
    // if (this.question.Type === 'number') {
    //   this.$set(this.questionForm, this.question.Id, 0)
    // } else {
    //   this.$set(this.questionForm, this.question.Id, null)
    // }
    if (this.question.TableQuestionType === 1 && this.question.LesionType !== null) {
      this.getOrganInfoList()
    }
  },
  methods: {
    save() {
    },
    openAddTableCol(row) {
      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
      this.QuestionsForm = {}
    },
    getOrganInfoList() {
      var param = {
        trialId: this.$route.query.trialId,
        lesionType: this.question.LesionType,
        isEnable: true
      }
      getTrialOrganList(param).then(res => {
        this.organList = res.Result
      })
    },
    formItemChange(v, question) {
      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, question: qs })
        })
      } else {
        this.$emit('setFormItemData', { key: question.Id, val: v, question: question })
      }
    },
    formItemNumberChange(v, question) {
      // this.$emit('formItemTableNumberChange', v, question)
      this.$emit('formItemTableNumberChange')
      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)
    },
    uploadScreenshot(param) {

    },
    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('|') : '', question: this.question })
    }
  }
}
</script>
<style lang="scss" scoped>
.my_dialog {
  .criterion-form-item {
    ::v-deep .el-form-item__content {
      width: auto;
    }
  }
}

::v-deep .el-select .el-input__prefix {
  left: calc(100% - 50px);
  cursor: pointer;
}

::v-deep .el-select .el-input__inner {
  padding-left: 15px;
  padding-right: 50px;
}

.criterion-form-item {
  .el-form-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  ::v-deep .el-form-item__content {
    width: 500px;
  }

  .el-input {
    width: 100%;
  }

  .mb {
    margin-bottom: 0px;
  }

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

  .uploadWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
