<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="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: '请注明', trigger: ['blur', 'change']},
        ]"
        :class="[question.Type==='group'?'mb':question.Type==='upload'?'uploadWrapper':'']"
      >
        <!-- 输入框 -->
        <el-input :maxLength="$inputMax"
          v-if="question.Type==='input'"
          v-model="questionForm[question.Id]"
          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !IsBaseline && questionForm.IsCurrentTaskAdd === 'False')"
        />
        <!-- 多行文本输入框 -->
        <el-input :maxLength="$inputMax"
          v-if="question.Type==='textarea'"
          v-model="questionForm[question.Id]"
          type="textarea"
          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !IsBaseline && questionForm.IsCurrentTaskAdd === 'False')"
          :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.IsCopy && type === 'edit' && !IsBaseline && questionForm.IsCurrentTaskAdd === 'False')"
          @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]"
          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !IsBaseline && questionForm.IsCurrentTaskAdd === 'False')"
          @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'"
          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !IsBaseline && questionForm.IsCurrentTaskAdd === 'False')"
          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 :maxLength="$inputMax"
          v-if="question.Type==='calculation'"
          v-model="questionForm[question.Id]"
          oninput="value=value.replace(/^\D*(\d*(?:.\d{0,2})?).*$/g, '$1')"
          disabled
        />
        <!-- 自增 -->
        <el-input :maxLength="$inputMax"
          v-if="question.Type==='increment'"
          v-model="questionForm[question.Id]"
          disabled
        />
        <!-- 数值 -->
        <!-- :precision="2" :step="0.1" :max="10" -->
        <el-input :maxLength="$inputMax"
          type="number"
          v-if="question.Type === 'number' && question.DataSource !== 1"
          :disabled="question.TableQuestionType === 2 || (question.IsCopy && type === 'edit' && !IsBaseline && questionForm.IsCurrentTaskAdd === 'False')"
          @change="((val)=>{formItemNumberChange(val, question)})"
          onblur="value=parseFloat(value).toFixed(parseInt(localStorage.getItem('digitPlaces')))"
          @input="limitInput($event, question)"
          v-model="questionForm[question.Id]"
        >
          <template slot="append" v-if="question.Unit !== 0">{{question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit}}</template>
        </el-input>
        <el-input :maxLength="$inputMax"
          type="number"
          v-if="question.Type === 'number' && question.DataSource === 1"
          :disabled="question.DataSource === 1"
          onblur="value=parseFloat(value).toFixed(parseInt(localStorage.getItem('digitPlaces')))"
          @input="limitInput($event, question)"
          v-model="calculationValue"
        >
          <template slot="append" v-if="question.Unit !== 0">{{question.Unit !== 4 ? $fd('ValueUnit', question.Unit) : question.CustomUnit}}</template>
        </el-input>
        <!-- 上传图像 -->
        <el-upload
          v-if="question.Type==='upload'"
          :action="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}"
        >
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="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>
  </div>
</template>
<script>
import { uploadReadingAnswerImage, getTrialOrganList, getCustomTableQuestionPreview } from '@/api/trials'
export default {
  name: 'QuestionFormItem',
  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: ''
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  computed: {
    calculationValue: {
      get() {
        return this.questionForm[this.question.Id]
      },
      set() {

      }
    }
  },
  data() {
    return {
      addOrEdit: { visible: false, title: '' },
      fileList: [],
      accept: '.png,.jpg,.jpeg',
      imgVisible: false,
      imageUrl: '',
      urls: [],
      organList: [],
      QuestionsList: [],
      QuestionsForm: {},
      digitPlaces: 0
    }
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: true,
      handler(v) {

      }
    }
  },
  mounted() {
    this.digitPlaces = localStorage.getItem('digitPlaces') ? parseInt(localStorage.getItem('digitPlaces')) : 0
    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.type === 'edit') return
    if (this.question.Type === 'number') {
      console.log(this.questionForm)
      this.$set(this.questionForm, this.question.Id, null)
    } else {
      this.$set(this.questionForm, this.question.Id, '')
    }
  },
  methods: {
    save() {
    },
    openAddTableCol(row) {
      this.addOrEdit.visible = true
      this.addOrEdit.title = row.QuestionName + '表格问题'
      this.QuestionsList = row.TableQuestions.Questions
      this.AnswersList = row.TableQuestions.Answers
      this.QuestionsForm = {}
      console.log(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.Childrens && 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 })
        })
      }
    },
    limitInput(value, q) {
      console.log(value)
      if (value.indexOf('.') > -1) {
        if (value.split('.')[1].length >= this.digitPlaces) {
          this.$set(this.questionForm, q.Id, parseFloat(value).toFixed(this.digitPlaces))
        }
      } else {
      }
    },
    formItemNumberChange(v, question) {
      this.$emit('formItemTableNumberChange', v, 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) {
      if (!this.visitTaskId) return
      const loading = this.$loading({
        target: document.querySelector('.el-dialog'),
        fullscreen: false,
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      })
      const formData = new FormData()
      formData.append('file', param.file)
      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)
          console.log(this.urls)
          this.$emit('setFormTableItemData', this.question.Id, this.urls.length > 0 ? this.urls.join('|') : '')
          // this.questionForm[this.question.Id] = this.urls.length > 0 ? this.urls.join('|') : ''
          // console.log(this.questionForm)
          // this.$emit('setFormItemData', { key: this.question.Id, val: this.urls.length > 0 ? this.urls.join('|') : '' })
        }
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    handleBeforeUpload(file) {
      // 检测文件类型是否符合要求
      if (this.checkFileSuffix(file.name)) {
        // this.fileList = []
        return true
      } else {
        this.$message.error(`必须是 ${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 = 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('setFormTableItemData', this.question.Id, this.urls.length > 0 ? this.urls.join('|') : '')
    }
  }
}
</script>
<style lang="scss" scoped>
.my_dialog{
  .criterion-form-item{
    >>>.el-form-item__content{
      width: auto;
    }
  }
}
.criterion-form-item{
  .el-form-item{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  >>>.el-form-item__content{
    width: 500px;
  }
  .el-input{
    width:100%;
  }
  .mb{
    margin-bottom: 0px;
  }
  .disabled{
    >>>.el-upload--picture-card {
      display: none;
    }
  }
  .uploadWrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
