<template>
  <div class="table-question-form">
    <div style="display: flex;justify-content: space-between;">
      <h3 v-if="qsForm.LesionName" style="color: #ddd;padding: 5px 0px;margin: 0;">
        {{ qsForm.LesionName }}
      </h3>
      <!-- 关闭 -->
      <div>
        <i class="el-icon-circle-close" style="font-size: 25px;cursor: pointer;" @click="close" />
      </div>
    </div>
    <el-form-item :label="$t('trials:reading:title:lesionType')" prop="LesionType" :rules="[
      { required: true, message: $t('common:ruleMessage:select'), trigger: ['blur'] },
    ]">
      <!-- 下拉框 -->
      <el-select v-model="qsForm.LesionType" filterable
        :disabled="!isCurrentTask || readingTaskState >= 2 || !isBaseLineTask"
        @change="((val) => { lesionTypeChange(val) })">

        <el-option v-for="item of $d.LesionType" v-show="!(isBaseLineTask && item.value === 2)" :key="item.id"
          :value="item.value" :label="item.label" />

      </el-select>
    </el-form-item>
    <el-form-item v-for="qs in questions" v-show="qs.ShowQuestion !== 2" :key="qs.Id" :label="`${qs.QuestionName}`"
      :prop="qs.Id" :rules="[
        {
          required: (qs.IsRequired === 0 || (qs.IsRequired === 1 && qs.RelevanceId && (questionForm[qs.RelevanceId] === qs.RelevanceValue)) || (qs.QuestionMark === 6 && questionForm.IsCanEditPosition === true) || (questionForm.IsCanEditPosition && qs.QuestionMark === 10)) && qs.Type !== 'group' && qs.Type !== 'summary',
          message: ['radio', 'select', 'checkbox'].includes(qs.Type) ? $t('common:ruleMessage:select') : $t('common:ruleMessage:specify'), trigger: ['blur', 'change']
        },
      ]">
      <!-- 输入框 -->
      <template v-if="qs.Type === 'input' || qs.Type === 'number'">
        <div style="display: flex;justify-content: space-between;">
          <el-input v-if="qs.Type === 'input' || qs.Type === 'number'" v-model="qsForm[qs.Id]"
            :disabled="!isCurrentTask || readingTaskState >= 2 || qs.QuestionMark === 0 || qs.QuestionMark === 1 || qs.QuestionMark === 2 || qs.QuestionMark === 5 || (qs.QuestionMark === 6 && (isCurrentTaskAdd === 'False' || (isCurrentTaskAdd === 'True' && !questionForm.IsCanEditPosition) || !!answer.SplitOrMergeLesionName)) || (qs.QuestionMark === 8 && (isCurrentTaskAdd === 'False' || !!answer.SplitOrMergeLesionName) && lesionType !== 2) || (qs.QuestionMark === 10 && (isCurrentTaskAdd === 'False' || !!answer.SplitOrMergeLesionName))"
            @change="((val) => { formItemChange(val, qs) })">
            <template v-if="(qs.QuestionMark === 0 || qs.QuestionMark === 1) && qs.Unit" slot="append">
              {{ $fd('ValueUnit', parseInt(qs.Unit)) }}
            </template>
          </el-input>
          <svg-icon v-if="qs.ShowChartTypeEnum > 0" icon-class="readingChart" class="svg-icon svg-readingChart"
            @click.stop="(e) => handleReadingChart({
              e,
              data: {
                TableQuestionId: qs.Id,
                RowIndex: qsForm.RowIndex,
                QuestionName: qs.QuestionName
              }
            })" />
        </div>
      </template>
      <!-- 多行文本输入框 -->
      <el-input v-if="qs.Type === 'textarea'" v-model="qsForm[qs.Id]" type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }" :disabled="!isCurrentTask || readingTaskState >= 2"
        @change="((val) => { formItemChange(val, qs) })" />
      <!-- 下拉框 -->
      <el-select v-if="qs.Type === 'select'" v-model="qsForm[qs.Id]" filterable
        :placeholder="qs.QuestionMark === 8 ? $t('common:placeholder:selectorsearch') : qs.QuestionMark === 2 ? '' : $t('common:placeholder:select')"
        :disabled="!isCurrentTask || readingTaskState >= 2 || qs.QuestionMark === 0 || qs.QuestionMark === 1 || qs.QuestionMark === 2 || qs.QuestionMark === 5 || (qs.QuestionMark === 7 && (qsForm.SplitOrMergeType === '3' || qsForm.SplitOrMergeType === '1')) || (qs.QuestionMark === 6 && (isCurrentTaskAdd === 'False' || (isCurrentTaskAdd === 'True' && !questionForm.IsCanEditPosition) || !!answer.SplitOrMergeLesionName)) || (qs.QuestionMark === 8 && (isCurrentTaskAdd === 'False' || !!answer.SplitOrMergeLesionName)) || (qs.QuestionMark === 10 && (isCurrentTaskAdd === 'False' || (isCurrentTaskAdd === 'True' && !questionForm.IsCanEditPosition) || !!answer.SplitOrMergeLesionName))"
        @change="((val) => { formItemChange(val, qs) })">
        <template v-if="qs.QuestionMark === 8" #prefix>
          <span style="padding-left: 5px;">
            <i class="el-icon-search" />
          </span>
        </template>
        <template v-if="qs.TableQuestionType === 1">
          <el-option v-for="item in organList" :key="item.Id" :label="item[qs.DataTableColumn]"
            :value="item[qs.DataTableColumn]" />
        </template>
        <template v-else-if="qs.DictionaryCode && qs.QuestionMark === 7 && isBaseLineTask">
          <el-option v-for="item of $d[qs.DictionaryCode]"
            v-show="(lesionType === 0 && item.value === 0) || (lesionType === 1 && (item.value === 0))" :key="item.id"
            :value="item.value" :label="item.label" />
        </template>
        <template v-else-if="qs.DictionaryCode && qs.QuestionMark === 7 && !isBaseLineTask">
          <el-option-group
            :label="!isNaN(parseFloat(answer.LastTaskState)) ? `${$t('trials:dicomReading:tip:lastVisitStatus')} ${$fd(qs.DictionaryCode, parseFloat(answer.LastTaskState))}` : ''">
            <!-- 首次分裂的病灶只能选择存在 -->
            <template v-if="answer.IsFristAdd === 'True' && answer.SplitOrMergeType === '0'">

              <el-option v-for="item of $d[qs.DictionaryCode]" v-show="item.value === 0" :key="item.id"
                :value="item.value" :label="item.label" />
            </template>
            <!-- 首次添加的新病灶不能为无法评估和消失 -->
            <template v-else-if="isCurrentTaskAdd === 'True' && lesionType === 2">
              <el-option v-for="item of $d[qs.DictionaryCode]" v-show="item.value === 0 || item.value === 1"
                :key="item.id" :value="item.value" :label="item.label" />
            </template>
            <template v-else>
              <el-option v-for="item of filterState($d[qs.DictionaryCode])" :key="item.id" :value="item.value"
                :label="item.label" />
            </template>
          </el-option-group>
        </template>
        <template v-else-if="qs.DictionaryCode && qs.QuestionMark !== 7">
          <el-option v-for="item of $d[qs.DictionaryCode]" :key="item.id" :value="item.value" :label="item.label" />
        </template>
        <template v-else>
          <el-option v-for="val in qs.TypeValue.split('|')" :key="val" :label="val" :value="val" />
        </template>

      </el-select>
      <!-- 单选 -->
      <el-radio-group v-if="qs.Type === 'radio'" v-model="qsForm[qs.id]"
        :disabled="!isCurrentTask || readingTaskState >= 2">
        <el-radio v-for="val in qs.options.split('|')" :key="val" :label="val">
          {{ val }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: 'TableQuestionFormItem',
  props: {
    tableInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    answer: {
      type: Object,
      default() {
        return {}
      }
    },
    questionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    organs: {
      type: Array,
      default() {
        return []
      }
    },
    readingTaskState: {
      type: Number,
      required: true
    },
    isBaseLineTask: {
      type: Boolean,
      required: true
    },
    isCurrentTask: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      isCurrentTaskAdd: null,
      lesionType: null,
      questions: [],
      organList: [],
      qsForm: {}
    }
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: true,
      handler(v) {
        if (v.MeasureData) {
          const { markTool } = v.MeasureData
          if (markTool === 'Bidirectional') {
            this.getOrganList(1)
          } else if (markTool === 'Length') {
            this.getOrganList(0)
          } else {
            this.getOrganList()
          }
        } else {
          this.getOrganList()
        }
        for (const key in v) {
          this.$set(this.qsForm, key, v[key])
        }
        this.isCurrentTaskAdd = v.IsCurrentTaskAdd
      }
    },
    tableInfo: {
      deep: true,
      immediate: true,
      handler(v) {
        if (v) {
          this.lesionType = v.LesionType
          this.questions = v.TableQuestions.Questions
        }
      }
    }
  },
  methods: {
    handleReadingChart(row) {
      this.$emit('handleReadingChart', row)
    },
    lesionTypeChange(v) {
      this.$emit('lesionTypeChange', { tableId: this.tableInfo.Id, rowIndex: this.answer.RowIndex, newLesionType: v })
    },
    formItemChange(v, qs) {
      const updateArr = []
      if (qs.QuestionMark === 8 && qs.RelationQuestions.length > 0) {
        // 当选择部位时，联动器官、位置、是否淋巴结问题答案
        const index = this.organList.findIndex(item => item[qs.DataTableColumn] === v)
        if (index > -1) {
          const selected = this.organList[index]
          qs.RelationQuestions.map(q => {
            const val = selected[q.DataTableColumn]
            updateArr.push({ questionId: q.Id, val: val, questionMark: q.QuestionMark })
          })
          updateArr.push({ questionId: 'OrganInfoId', val: selected.OrganInfoId })
          updateArr.push({ questionId: 'IsCanEditPosition', val: selected.IsCanEditPosition })
        } else {
          qs.RelationQuestions.map(q => {
            updateArr.push({ questionId: q.Id, val: '', questionMark: q.QuestionMark })
          })
        }
      }
      this.$emit('update', { tableId: this.tableInfo.Id, rowIndex: this.answer.RowIndex, questionMark: qs.QuestionMark, questionId: qs.Id, val: v, updateArr })
    },
    getOrganList(isLymphNodes = null) {
      const idx = this.organs.findIndex(i => i.LesionType === this.questionForm.LesionType)
      if (idx > -1) {
        const arr = this.organs[idx].OrganList

        if (!isNaN(parseInt(isLymphNodes))) {
          this.organList = arr.filter((item) => item.IsLymphNodes === parseInt(isLymphNodes))
        } else {
          this.organList = arr
        }
      }
    },
    filterState(arr) {
      if (!this.isBaseLineTask) {
        const isLymphLesion = this.questionForm.IsLymphNodes
        const lesionLength = this.questionForm.LesionLength
        const lesionShort = this.questionForm.LesionShort
        const bLesionL = !isNaN(parseFloat(this.questionForm.BaseLineMajorAxis)) ? parseFloat(this.questionForm.BaseLineMajorAxis) : 0
        const bLesionS = !isNaN(parseFloat(this.questionForm.BaseLineShortAxis)) ? parseFloat(this.questionForm.BaseLineShortAxis) : 0
        if (this.lesionType === 1 && isLymphLesion === 1 && this.questionForm.MeasureData && this.questionForm.MeasureData.markTool === 'Bidirectional' && lesionShort < bLesionS) {
          arr = arr.filter(i => i.value !== 1)
        } else if (this.lesionType === 1 && isLymphLesion === 1 && this.questionForm.MeasureData && this.questionForm.MeasureData.markTool === 'Bidirectional' && lesionShort >= 10 && lesionShort > bLesionS) {
          arr = arr.filter(i => i.value === 0 || i.value === 1)
        } else if (this.lesionType === 1 && isLymphLesion === 0 && this.questionForm.MeasureData && (this.questionForm.MeasureData.markTool === 'Length' || this.questionForm.MeasureData.markTool === 'Bidirectional') && lesionLength < bLesionL) {
          arr = arr.filter(i => i.value !== 1)
        }
        return arr
      } else {
        return arr
      }
    },
    close() {
      this.$emit('close', { tableId: this.tableInfo.Id, rowIndex: this.answer.RowIndex })
    }
  }
}
</script>
<style lang="scss" scoped>
.table-question-form {
  ::v-deep .el-form-item__label {
    color: #c3c3c3;
  }

  ::v-deep .el-input .el-input__inner {
    background-color: transparent;
    color: #ddd;
    border: 1px solid #5e5e5e;
  }

  ::v-deep .el-form-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  ::v-deep .el-form-item__content {
    flex: 1;
  }

  ::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #646464a1;
  }

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

  ::v-deep .el-button--mini,
  .el-button--mini.is-round {
    padding: 7px 10px;
  }

  .el-form-item__content .el-select {
    width: 100%;
  }

  .input-width1 {
    width: calc(100% - 60px) !important;
  }

  .input-width2 {
    width: 100% !important;
  }
}
</style>
