<template>
  <el-form v-if="globalForm.taskList.length > 0" ref="globalRuleForm" :model="globalForm" class="global-form">
    <el-table
      v-loading="loading"
      :data="globalForm.taskList"
    >
      <el-table-column
        prop="BlindName"
        :label="$t('trials:globalReview:table:visitName')"
        show-overflow-tooltip
        width="150"
      />
      <!-- 评估结果 -->
      <el-table-column
        :label="$t('trials:medicalFeedback:table:visitPointCount')"
        align="center"
        prop=""
      >
        <template>
          <el-table-column
            v-for="(qs,index) in globalInfo.evaluationQsList"
            :key="index"
            prop=""
            :label="qs"
            show-overflow-tooltip
            width="200"
          >
            <template slot-scope="scope">
              <template v-if="(scope.row.IsBaseLine && (scope.row.BeforeQuestionList[index].GlobalReadingShowType ===1 || scope.row.BeforeQuestionList[index].GlobalReadingShowType ===5)) || (!scope.row.IsBaseLine && (scope.row.BeforeQuestionList[index].GlobalReadingShowType ===2 || scope.row.BeforeQuestionList[index].GlobalReadingShowType ===6)) || (scope.row.BeforeQuestionList[index].GlobalReadingShowType ===0 || scope.row.BeforeQuestionList[index].GlobalReadingShowType ===4)">
                <div v-if="scope.row.BeforeQuestionList.length>index && scope.row.BeforeQuestionList[index].Answer">
                  <span v-if="scope.row.BeforeQuestionList[index].DictionaryCode">
                    {{ $fd(scope.row.BeforeQuestionList[index].DictionaryCode,parseInt(scope.row.BeforeQuestionList[index].Answer)) }}
                  </span>
                  <span v-else-if="scope.row.BeforeQuestionList[index].QuestionType === 22">{{ scope.row.BeforeQuestionList[index].Answer === '-1' ? $t('trials:readingReport:title:unknow') : scope.row.BeforeQuestionList[index].Answer }}</span>
                  <span v-else>{{ scope.row.BeforeQuestionList[index].Answer }}</span>
                </div>
              </template>
          </template>
          </el-table-column>
        </template>
      </el-table-column>

      <!-- 评估结果 -->
      <el-table-column
        :label="$t('trials:globalReview:table:evaluationRes')"
        align="center"
        prop=""
      >
        <template>
          <el-table-column
            v-for="(qs,index) in globalInfo.adjustedQsList"
            v-if="qs.isShow"
            :key="index"
            prop=""
            :label="qs.questionName"
            :width="index > 0 ? '300' : '200'"
          >
            <template slot-scope="scope">
              <div v-if="readingTaskState<2 && (scope.row.AfterQuestionList[index].GlobalReadingShowType === 0 || (scope.row.IsBaseLine && scope.row.AfterQuestionList[index].GlobalReadingShowType === 1) || (!scope.row.IsBaseLine && scope.row.AfterQuestionList[index].GlobalReadingShowType === 2))">
                <!-- <span v-if="(scope.row.IsBaseLine && scope.row.AfterQuestionList[index].LimitEdit === 2) || (!scope.row.IsBaseLine && scope.row.AfterQuestionList[index].LimitEdit === 1)">
                  {{ $fd(scope.row.AfterQuestionList[index].DictionaryCode, parseInt(scope.row.AfterQuestionList[index].VisitAnswer)) }}
                </span> -->
                <el-form-item
                  :prop="`${scope.$index}${scope.row.AfterQuestionList[index].QuestionId?scope.row.AfterQuestionList[index].QuestionId:scope.row.AfterQuestionList[index].GlobalAnswerType}`"
                  label=""
                  :rules="[
                    { required: parseInt(scope.row.AfterQuestionList[index].GlobalAnswerType) !== 1 || scope.row.AfterQuestionList[index].isChange,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
                  ]"
                >
                  <label v-if="scope.row.AfterQuestionList[index].GlobalAnswerType !== 1 || scope.row.AfterQuestionList[index].isChange" />
                  <template v-if="scope.row.AfterQuestionList[index].GlobalAnswerType === 0 ">
                    <!-- 下拉框 -->
                    <!-- cope.row.AfterQuestionList[index].Answer -->
                    <el-select
                      v-model="globalForm[`${scope.$index}${scope.row.AfterQuestionList[index].QuestionId?scope.row.AfterQuestionList[index].QuestionId:String(scope.row.AfterQuestionList[index].GlobalAnswerType)}`]"
                      style="width:90%;"
                      @change="(v) => {
                        selectChange(v, scope.row, index)
                      }"
                    >
                      <template v-if="scope.row.AfterQuestionList[index].TypeValue">
                        <el-option
                          v-for="val in scope.row.AfterQuestionList[index].TypeValue.split('|')"
                          :key="val"
                          :label="val"
                          :value="val"
                        />
                      </template>
                      <template v-if="scope.row.AfterQuestionList[index].DictionaryCode">
                        <el-option
                          v-for="item of $d[scope.row.AfterQuestionList[index].DictionaryCode]"
                          v-show="(scope.row.IsBaseLine && scope.row.AfterQuestionList[index].GlobalAnswerType === 0 && item.value === 5) || (!scope.row.IsBaseLine && scope.row.AfterQuestionList[index].GlobalAnswerType === 0 && item.value !== 5)"
                          :key="item.id"
                          :value="String(item.value)"
                          :label="item.label"
                        />
                      </template>
                    </el-select>
                  </template>
                  <!-- 全局阅片备注 GlobalAnswerType:1 -->
                  <el-input
                    v-if="scope.row.AfterQuestionList[index].GlobalAnswerType === 1"
                    v-model="globalForm[`${scope.$index}${scope.row.AfterQuestionList[index].QuestionId?scope.row.AfterQuestionList[index].QuestionId:String(scope.row.AfterQuestionList[index].GlobalAnswerType)}`]"
                    maxlength="300"
                    show-word-limit
                    type="textarea"
                    style="width:90%;"
                    :autosize="{ minRows: 2, maxRows: 4}"
                  />
                </el-form-item>
              </div>
              <div v-else>

                <span v-if="scope.row.AfterQuestionList[index].GlobalAnswerType === 3">
                  {{ getAssessType(scope.row.AfterQuestionList[index].Answer) }}
                </span>
                <span v-else-if="scope.row.AfterQuestionList[index].DictionaryCode">
                  {{ $fd(scope.row.AfterQuestionList[index].DictionaryCode,parseInt(scope.row.AfterQuestionList[index].Answer)) }}
                </span>
                <span v-else>{{ scope.row.AfterQuestionList[index].Answer }}</span>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('common:action:action')"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            circle
            :title="$t('trials:globalReview:table:view')"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          />
          <!-- v-if="readingTaskState < 2 && scope.row.AgreeOrNot[0].Answer==='0'" -->
          <!-- <el-button
            v-if="readingTaskState < 2 "
            circle
            title="调整"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          />
          <el-button
            v-if="readingTaskState < 2"
            circle
            title="保存"
            icon="el-icon-circle-check"
            @click="handleSave(scope.row)"
          /> -->
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
import { batchSubmitGlobalReadingInfo } from '@/api/trials'
export default {
  props: {
    globalInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    globalForm: {
      type: Object,
      default() {
        return {}
      }
    },
    readingTaskState: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      loading: false
    }
  },
  mounted() {
  },
  methods: {
    selectChange(v, row, index) {
      if (row.AfterQuestionList[index].VisitAnswer !== v && row.AfterQuestionList[index].VisitAnswer !== '') {
        row.AfterQuestionList.forEach(o => {
          if (o.GlobalAnswerType === 1) {
            this.$set(o, 'isChange', true)
          }
        })
      } else {
        row.AfterQuestionList.forEach(o => {
          if (o.GlobalAnswerType === 1) {
            this.$set(o, 'isChange', false)
          }
        })
      }
    },
    getBeforeAnswer(qsId, row) {
      var i = row.BeforeQuestionList.findIndex(item => item.QuestionName === qsId)

      if (i > -1 && row.BeforeQuestionList[i].Answer) {
        var answer = ''
        if (row.BeforeQuestionList[i].DictionaryCode) {
          answer = row.BeforeQuestionList[i].Answer
        } else {
          answer = row.BeforeQuestionList[i].Answer
        }
        return answer
      } else {
        return ''
      }
    },
    handleView(row) {
      this.$emit('handleView', row)
    },
    handleSave(isPrompt = true) {
      return new Promise(async (resolve, reject) => {
        try {
          let valid = await this.$refs['globalRuleForm'].validate()
          if (valid) {
            this.loading = true
            var visitTaskAnswerList = []
            this.globalForm.taskList.forEach((item, index) => {
              var answerList = []
              item.AfterQuestionList.map(i => {
                var obj = {}
                if (i.QuestionId) {
                  obj.questionId = i.QuestionId
                  obj.globalAnswerType = i.GlobalAnswerType
                  obj.answer = this.globalForm[ `${index}${i.QuestionId}`]
                } else {
                  obj.questionId = ''
                  obj.globalAnswerType = i.GlobalAnswerType
                  obj.answer = this.globalForm[ `${index}${i.GlobalAnswerType}`]
                }
                answerList.push(obj)
              })
              visitTaskAnswerList.push({ visitTaskId: item.VisitTaskId, answerList: answerList })
            })
            var params = {
              globalTaskId: this.globalInfo.visitTaskId,
              subjectId: this.globalInfo.subjectId,
              trialId: this.globalInfo.trialId,
              visitTaskAnswerList
            }
            await batchSubmitGlobalReadingInfo(params)
            this.loading = false
            if (isPrompt) {
              this.$message.success(this.$t('common:message:savedSuccessfully'))
            }
            this.$emit('getGlInfo')
            resolve(true)
            
          } else {
            resolve(false)
          }
        } catch(e) {
          console.log(e)
          this.loading = false
          resolve(false)
        } 
        
        
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item label:before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
}
::v-deep .el-form-item--medium .el-form-item__content{
  display: flex;
}
.global-form{
  ::v-deep .el-form-item__content{
    padding-bottom: 10px;
  }
  ::v-deep .form-item .el-form-item__error{
    top: 60%;
  }
}
</style>
