<template>
  <el-form v-if="globalForm.taskList.length > 0" ref="globalRuleForm" :model="globalForm">
    <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:globalReview:table:evaluationRes')"
        align="center"
        prop=""
      >
        <template>
          <el-table-column
            v-for="(qs,index) in globalInfo.evaluationQsList"
            :key="index"
            prop=""
            :label="qs"
            show-overflow-tooltip
            width="150"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.BeforeQuestionList.length>index && scope.row.BeforeQuestionList[index].Answer" :style="{color: scope.row.BeforeQuestionList[index].IsGlobalAnswer ? '#f66' : null}">
                <span v-if="scope.row.BeforeQuestionList[index].DictionaryCode">
                  {{ $fd(scope.row.BeforeQuestionList[index].DictionaryCode,parseInt(scope.row.BeforeQuestionList[index].Answer)) }}
                </span>
                <span v-else>{{ scope.row.BeforeQuestionList[index].Answer }}</span>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
      <!-- 是否同意访视结果 -->
      <el-table-column
        prop=""
        :label="$t('trials:globalReview:table:isAgreeEvaluationRes')"
        show-overflow-tooltip
        width="170"
      >
        <template slot-scope="scope">
          <div v-if="readingTaskState<2 ">
            <el-form-item
              :prop="`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`"
              label=""
              :rules="[
                { required:true,message: $t('common:ruleMessage:select'), trigger: ['change','blur']},
              ]"
            >
              <el-radio-group
                v-model="globalForm[`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`]"
                @change="handleAgreeOrNotChange(scope.$index,scope.row.AgreeOrNot[0].GlobalAnswerType)"
              >
                <el-radio
                  v-for="item of $d.ReadingYesOrNo"
                  :key="'AgreeOrNot' + item.value"
                  :label="String(item.value)"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-tag v-else-if="scope.row.AgreeOrNot.length > 0 && parseInt(scope.row.AgreeOrNot[0].Answer) === 1" type="primary">
            {{ $fd('ReadingYesOrNo',parseInt(scope.row.AgreeOrNot[0].Answer)) }}
          </el-tag>
          <el-tag v-else-if="scope.row.AgreeOrNot.length > 0 && parseInt(scope.row.AgreeOrNot[0].Answer) === 0" type="danger"> {{ $fd('ReadingYesOrNo',parseInt(scope.row.AgreeOrNot[0].Answer)) }}</el-tag>
          <span v-else />
        </template>
      </el-table-column>

      <!-- 调整后结果 -->
      <el-table-column
        :label="$t('trials:globalReview:table:adjustedRes')"
        align="center"
        prop=""
      >
        <template>
          <el-table-column
            v-for="(qs,index) in globalInfo.adjustedQsList"
            :key="index"
            prop=""
            :label="qs"
            show-overflow-tooltip
            :min-width="index === 3 ? '200' : '200'"
          >
            <template slot-scope="scope">
              <div v-if="readingTaskState<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
                  v-else
                  style="margin-bottom: 0;"
                  :prop="`${scope.$index}${scope.row.AfterQuestionList[index].QuestionId?scope.row.AfterQuestionList[index].QuestionId:scope.row.AfterQuestionList[index].GlobalAnswerType}`"
                  label=""
                  :rules="[
                    { required:parseInt(globalForm[`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`]) === 0,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
                  ]"
                >
                  <label v-if="parseInt(globalForm[`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`]) === 0" />
                  <!-- 裁判问题 -->
                  <template v-if="scope.row.AfterQuestionList[index].GlobalAnswerType === 0 ">
                    <el-tooltip class="item" effect="dark" v-if="getText(globalForm[`${scope.$index}${scope.row.AfterQuestionList[index].QuestionId?scope.row.AfterQuestionList[index].QuestionId:String(scope.row.AfterQuestionList[index].GlobalAnswerType)}`], scope.row.AfterQuestionList[index])" :content="getText(globalForm[`${scope.$index}${scope.row.AfterQuestionList[index].QuestionId?scope.row.AfterQuestionList[index].QuestionId:String(scope.row.AfterQuestionList[index].GlobalAnswerType)}`], scope.row.AfterQuestionList[index])" placement="top-start">
                      <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%;"
                        :disabled="parseInt(globalForm[`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`]) !== 0"
                      >
                        <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-else-if="scope.row.AfterQuestionList[index].DictionaryCode && scope.row.AfterQuestionList[index].QuestionType === 13">
                          <el-option
                            v-for="item of $d[scope.row.AfterQuestionList[index].DictionaryCode]"
                            v-show="item.value!==-1"
                            :key="item.id"
                            :value="String(item.value)"
                            :label="item.label"
                            :disabled="String(getBeforeAnswer(scope.row.AfterQuestionList[index].QuestionName,scope.row)) === String(item.value)"
                          />
                        </template>
                        <template v-else-if="scope.row.AfterQuestionList[index].DictionaryCode">
                          <el-option
                            v-for="item of $d[scope.row.AfterQuestionList[index].DictionaryCode]"
                            :key="item.id"
                            :value="String(item.value)"
                            :disabled="String(getBeforeAnswer(scope.row.AfterQuestionList[index].QuestionName,scope.row)) === String(item.value)"
                            :label="item.label"
                          />
                        </template>
                      </el-select>
                    </el-tooltip>
                    <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%;"
                      v-else
                      :disabled="parseInt(globalForm[`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`]) !== 0"
                    >
                      <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-else-if="scope.row.AfterQuestionList[index].DictionaryCode && scope.row.AfterQuestionList[index].QuestionType === 13">
                        <el-option
                          v-for="item of $d[scope.row.AfterQuestionList[index].DictionaryCode]"
                          v-show="item.value!==-1"
                          :key="item.id"
                          :value="String(item.value)"
                          :label="item.label"
                          :disabled="String(getBeforeAnswer(scope.row.AfterQuestionList[index].QuestionName,scope.row)) === String(item.value)"
                        />
                      </template>
                      <template v-else-if="scope.row.AfterQuestionList[index].DictionaryCode">
                        <el-option
                          v-for="item of $d[scope.row.AfterQuestionList[index].DictionaryCode]"
                          :key="item.id"
                          :value="String(item.value)"
                          :disabled="String(getBeforeAnswer(scope.row.AfterQuestionList[index].QuestionName,scope.row)) === String(item.value)"
                          :label="item.label"
                        />
                      </template>
                    </el-select>
                  </template>
                  <!-- 评估更新类型 GlobalAnswerType:3 -->
                  <template v-if="scope.row.AfterQuestionList[index].GlobalAnswerType === 3">
                    <el-tooltip class="item" effect="dark" v-if="getText(globalForm[`${scope.$index}${scope.row.AfterQuestionList[index].GlobalAnswerType}`], scope.row.AfterQuestionList[index], scope.row.AfterQuestionList[index].GlobalAnswerType)" :content="getText(globalForm[`${scope.$index}${scope.row.AfterQuestionList[index].GlobalAnswerType}`], scope.row.AfterQuestionList[index], scope.row.AfterQuestionList[index].GlobalAnswerType)" placement="top-start">
                      <el-select
                        v-model="globalForm[`${scope.$index}${scope.row.AfterQuestionList[index].GlobalAnswerType}`]"
                        style="width:90%;"
                        :disabled="parseInt(globalForm[`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`]) !== 0"
                      >
                        <el-option
                          v-for="val in globalInfo.assessTypeList"
                          v-show="(scope.row.IsBaseLine && val.IsBaseLineUse) || (!scope.row.IsBaseLine && !val.IsBaseLineUse)"
                          :key="val.Code"
                          :label="language === 'en'?val.Value:val.ValueCN"
                          :value="val.Code"
                        />
                      </el-select>
                    </el-tooltip>
                    <el-select
                      v-else
                      v-model="globalForm[`${scope.$index}${scope.row.AfterQuestionList[index].GlobalAnswerType}`]"
                      style="width:90%;"
                      :disabled="parseInt(globalForm[`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`]) !== 0"
                    >
                      <el-option
                        v-for="val in globalInfo.assessTypeList"
                        v-show="(scope.row.IsBaseLine && val.IsBaseLineUse) || (!scope.row.IsBaseLine && !val.IsBaseLineUse)"
                        :key="val.Code"
                        :label="language === 'en'?val.Value:val.ValueCN"
                        :value="val.Code"
                      />
                    </el-select>
                  </template>
                  <el-input :maxLength="$inputMax"
                    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)}`]"
                    type="textarea"
                    maxlength="100"
                    show-word-limit
                    style="width:90%;"
                    :autosize="{ minRows: 2 }"
                    :disabled="parseInt(globalForm[`${scope.$index}${scope.row.AgreeOrNot[0].GlobalAnswerType}`]) !== 0"
                  />
                </el-form-item>
              </div>
              <div v-else-if="scope.row.AfterQuestionList.length>index && scope.row.AfterQuestionList[index].Answer">

                <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="100"
      >
        <template slot-scope="scope">
          <el-button
            circle
            :title="$t('trials:globalReview:table:view')"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
import { getToken } from '@/utils/auth'
import { batchSubmitGlobalReadingInfo } from '@/api/trials'
import { mapGetters } from 'vuex'
export default {
  props: {
    globalInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    globalForm: {
      type: Object,
      default() {
        return {}
      }
    },
    readingTaskState: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      assessTypes: []
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  mounted() {
    this.assessTypes = this.globalInfo.assessTypeList.filter(i => i.IsBaseLineUse === this.isBaseline)
  },
  methods: {
    getText(val, row, type) {
      var text
      if (type === 3) {
        var o = this.globalInfo.assessTypeList.find(v => {
          return parseInt(v.Code) === parseInt(val)
        })
        if (!o) {
          return ''
        }
        return this.language === 'en' ? o.Value : o.ValueCN
      } else if (row.TypeValue) {
        return val
      } else if (row.DictionaryCode) {
        return this.$fd(row.DictionaryCode, parseInt(val))
      }
    },
    handleView(row) {
      var token = getToken()
      var visitTaskId = row.VisitTaskId
      var criterionType = this.$router.currentRoute.query.criterionType
      var readingTool = this.$router.currentRoute.query.readingTool
      readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool)
      var isReadingTaskViewInOrder = this.$router.currentRoute.query.isReadingTaskViewInOrder
      var path = ''
      if (readingTool === 0) {
        path = `/readingDicoms?trialId=${this.globalInfo.trialId}&subjectCode=${this.globalInfo.subjectCode}&subjectId=${this.globalInfo.subjectId}&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}`
      } else {
        path = `/noneDicomReading?trialId=${this.globalInfo.trialId}&subjectCode=${this.globalInfo.subjectCode}&subjectId=${this.globalInfo.subjectId}&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}`
      }
      const routeData = this.$router.resolve({ path })
      window.open(routeData.href, '_blank')
    },
    handleSave(isPrompt = true) {
      return new Promise((resolve, reject) => {
        this.$refs['globalRuleForm'].validate(valid => {
          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)
              })
              answerList.push({ questionId: '', globalAnswerType: item.AgreeOrNot[0].GlobalAnswerType,
                answer: this.globalForm[ `${index}${item.AgreeOrNot[0].GlobalAnswerType}`] })

              visitTaskAnswerList.push({ visitTaskId: item.VisitTaskId, answerList: answerList })
            })
            var params = {
              globalTaskId: this.globalInfo.visitTaskId,
              subjectId: this.globalInfo.subjectId,
              trialId: this.globalInfo.trialId,
              visitTaskAnswerList
            }
            batchSubmitGlobalReadingInfo(params).then(res => {
              this.loading = false
              if (isPrompt) {
                console.log(isPrompt)
                this.$message.success(this.$t('common:message:savedSuccessfully'))
              }
              this.$emit('getGlInfo')
              resolve()
            }).catch(() => {
              this.loading = false
              reject()
            })
          } else {
            reject()
          }
        })
      })
    },
    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 ''
      }
    },
    handleAgreeOrNotChange(index, globalAnswerType) {
      var agreeOrNot = parseInt(this.globalForm[`${index}${globalAnswerType}`])
      if (agreeOrNot === 1) {
        var qsList = this.globalForm.taskList[index].AfterQuestionList
        qsList.map(v => {
          if (v.QuestionId) {
            this.globalForm[`${index}${v.QuestionId}`] = ''
          } else if (v.GlobalAnswerType !== globalAnswerType) {
            this.globalForm[`${index}${v.GlobalAnswerType}`] = ''
          }
        })
      }
    },
    getAssessType(v) {
      console.log(this.language)
      var i = this.globalInfo.assessTypeList.findIndex(i => String(i.Code) === String(v))
      if (i > -1) {
        return this.language === 'en' ? this.globalInfo.assessTypeList[i].Value : this.globalInfo.assessTypeList[i].ValueCN
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-form-item label:before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
}
>>>.el-textarea .el-input__count{
  background: rgba(0,0,0,0);
  line-height: normal;
}
>>>.el-form-item{
  margin-bottom: 0px;
}
</style>
