<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="访视名称"
        show-overflow-tooltip
        width="150"
      />
      <!-- 评估结果 -->
      <el-table-column
        label="访视点计数"
        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">
                <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' ? '未知' : 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
        label="评估结果"
        align="center"
        prop=""
      >
        <template>
          <el-table-column
            v-for="(qs,index) in globalInfo.adjustedQsList"
            :key="index"
            prop=""
            :label="qs"
            show-overflow-tooltip
            :width="index > 0 ? '300' : '150'"
          >
            <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
                  :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)}`]"
                      @change="(v) => {
                        selectChange(v, scope.row, index)
                        }"
                      style="width:90%;"
                    >
                      <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 :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)}`]"
                    maxlength="100"
                    show-word-limit
                    type="textarea"
                    style="width:90%;"
                    :autosize="{ minRows: 2, maxRows: 4}"
                  />
                </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="200"
      >
        <template slot-scope="scope">
          <el-button
            circle
            title="查看详情"
            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
    }
  },
  mounted() {
    console.log(this.globalInfo.adjustedQsList)
  },
  data() {
    return {
      loading: false
    }
  },
  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((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)
              })
              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) {
                this.$message.success(this.$t('common:message:savedSuccessfully'))
              }
              this.$emit('getGlInfo')
              resolve()
            }).catch(() => {
              this.loading = false
              reject()
            })
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-form-item label:before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
}
</style>
