<template>
  <BaseContainer class="medical-feedback-ir">
    <el-tabs v-if="TrialReadingCriterionId" v-model="TrialReadingCriterionId" type="border-card">
      <el-tab-pane v-for="i of trialCriterionList" :key="i.TrialReadingCriterionId" :label="i.TrialReadingCriterionName" :name="i.TrialReadingCriterionId">
        <div v-if="TrialReadingCriterionId === i.TrialReadingCriterionId">
          <div slot="search-container">
            <el-form :inline="true">
              <!-- 是否加急 -->
              <el-form-item
                style="margin-bottom:10px"
                :label="$t('trials:medicalFeedback:table:isUrgent')"
              >
                <el-select
                  v-model="searchData.IsUrgent"
                  clearable
                  style="width:120px;"
                >
                  <el-option
                    v-for="item of $d.YesOrNo"
                    :key="'IsUrgent' + item.label"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
              <!-- 受试者编号 -->
              <el-form-item v-if="otherInfo && otherInfo.IsReadingTaskViewInOrder !== 0" :label="$t('trials:medicalFeedback:table:subjectCode')">
                <el-input
                  v-model="searchData.SubjectCode"
                  style="width:130px;"
                  clearable
                />
              </el-form-item>
              <!-- 盲态任务标识 -->
              <el-form-item
                style="margin-bottom:10px"
                :label="$t('trials:medicalFeedback:table:taskBlindName')"
              >
                <el-input
                  v-model="searchData.TaskBlindName"
                  style="width:100px;"
                  clearable
                />
              </el-form-item>
              <!-- 任务类型 -->
              <el-form-item
                style="margin-bottom:10px"
                :label="$t('trials:medicalFeedback:table:readingCategory')"
              >
                <el-select
                  v-model="searchData.ReadingCategory"
                  clearable
                  style="width:120px;"
                >
                  <el-option
                    v-for="item of $d.ReadingCategory"
                    :key="'ReadingCategory' + item.label"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
              <!-- 审核状态 -->
              <el-form-item
                style="margin-bottom:10px"
                :label="$t('trials:medicalFeedback:table:auditState')"
              >
                <el-select
                  v-model="searchData.AuditState"
                  clearable
                  style="width:120px;"
                >
                  <el-option
                    v-for="item of $d.MedicalReviewAuditState"
                    :key="'AuditState' + item.label"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
              <!-- 审核结论 -->
              <el-form-item
                style="margin-bottom:10px"
                :label="$t('trials:medicalFeedback:button:isQuestions')"
              >
                <el-select
                  v-model="searchData.IsHaveQuestion"
                  clearable
                  style="width:120px;"
                >
                  <el-option
                    v-for="item of $d.IsPass"
                    :key="'IsPass' + item.label"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>
              <!-- 医学审核建议 -->
              <!-- <el-form-item
                style="margin-bottom:10px"
                :label="$t('trials:medicalFeedback:table:auditAdvice')"
              >
                <el-select
                  v-model="searchData.AuditAdviceEnum"
                  clearable
                  style="width:120px;"
                >
                  <el-option
                    v-for="item of $d.AuditAdvice"
                    :key="'AuditAdvice' + item.label"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item> -->

              <!-- 是否认可 -->
              <el-form-item
                style="margin-bottom:10px"
                :label="$t('trials:medicalFeedback:table:doctorUserIdea')"
              >
                <el-select
                  v-model="searchData.DoctorUserIdeaEnum"
                  clearable
                  style="width:120px;"
                >
                  <el-option
                    v-for="item of $d.MedicalReviewDoctorUserIdea"
                    :key="'MedicalReviewDoctorUserIdea' + item.label"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </el-form-item>

              <el-form-item>
                <!-- 查询 -->
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">
                  {{ $t('common:button:search') }}
                </el-button>
                <!-- 重置 -->
                <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
                  {{ $t('common:button:reset') }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div slot="main-container">
            <el-table
              :ref="TrialReadingCriterionId"
              v-adaptive="{bottomOffset:75}"
              v-loading="loading"
              :data="list"
              stripe
              height="100"
              @sort-change="handleSortChange"
            >
              <el-table-column type="index" width="40" align="left" />
              <!-- 是否加急 -->
              <el-table-column
                prop="IsUrgent"
                min-width="100"
                :label="$t('trials:medicalFeedback:table:isUrgent')"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.IsUrgent" type="danger">{{ $fd('YesOrNo', scope.row.IsUrgent) }}</el-tag>
                  <el-tag v-else type="primary">{{ $fd('YesOrNo', scope.row.IsUrgent) }}</el-tag>
                </template>
              </el-table-column>

              <!-- 受试者编号 -->
              <el-table-column
                v-if="otherInfo && otherInfo.IsReadingTaskViewInOrder !== 0"
                prop="SubjectCode"
                min-width="100"
                :label="$t('trials:medicalFeedback:table:subjectCode')"
                show-overflow-tooltip
                sortable="custom"
              />

              <!-- 盲态任务标识 -->
              <el-table-column
                prop="TaskBlindName"
                min-width="100"
                :label="$t('trials:medicalFeedback:table:taskBlindName')"
                show-overflow-tooltip
                sortable="custom"
              />
              <!-- 阅片标准 -->
              <!-- <el-table-column
                prop="TrialReadingCriterionName"
                :label="$t('trials:medicalFeedback:table:criterionName')"
                min-width="140"
                show-overflow-tooltip
                sortable="custom"
              /> -->
              <!-- 任务类型 -->
              <el-table-column
                prop="ReadingCategory"
                :label="$t('trials:medicalFeedback:table:readingCategory')"
                min-width="110"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.ReadingCategory === 1" type="primary">
                    {{ $fd('ReadingCategory', scope.row.ReadingCategory) }}
                  </el-tag>
                  <el-tag v-if="scope.row.ReadingCategory === 2" type="info">
                    {{ $fd('ReadingCategory', scope.row.ReadingCategory) }}
                  </el-tag>
                  <el-tag v-if="scope.row.ReadingCategory === 4" type="danger">
                    {{ $fd('ReadingCategory', scope.row.ReadingCategory) }}
                  </el-tag>
                  <el-tag v-if="scope.row.ReadingCategory === 5" type="warning">
                    {{ $fd('ReadingCategory', scope.row.ReadingCategory) }}
                  </el-tag>
                </template>
              </el-table-column>
              <!-- 阅片任务状态 -->
              <!-- <el-table-column
                prop="TaskState"
                :label="$t('trials:medicalFeedback:table:taskState')"
                min-width="100"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.TaskState === 0" type="primary">{{ $fd('TaskState', scope.row.TaskState) }}</el-tag>
                  <el-tag v-if="scope.row.TaskState === 1" type="info">{{ $fd('TaskState', scope.row.TaskState) }}</el-tag>
                  <el-tag v-if="scope.row.TaskState === 3" type="danger">{{ $fd('TaskState', scope.row.TaskState) }}</el-tag>
                  <el-tag v-if="scope.row.TaskState === 4" type="warning">{{ $fd('TaskState', scope.row.TaskState) }}</el-tag>
                  <el-tag v-if="scope.row.TaskState === 5" type="danger">{{ $fd('TaskState', scope.row.TaskState) }}</el-tag>
                </template>
              </el-table-column> -->
              <!-- 审核状态 -->
              <el-table-column
                prop="AuditState"
                :label="$t('trials:medicalFeedback:table:auditState')"
                min-width="100"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.AuditState === 0" type="warning">
                    {{ $fd('MedicalReviewAuditState', scope.row.AuditState) }}
                  </el-tag>
                  <el-tag v-if="scope.row.AuditState === 1" type="primary">
                    {{ $fd('MedicalReviewAuditState', scope.row.AuditState) }}
                  </el-tag>
                  <el-tag v-if="scope.row.AuditState === 2" type="danger">
                    {{ $fd('MedicalReviewAuditState', scope.row.AuditState) }}
                  </el-tag>
                </template>
              </el-table-column>
              <!-- 首次质询时间 -->
              <el-table-column
                prop="FirstReplyTime"
                min-width="120"
                :label="$t('trials:medicalFeedback:table:firstReplyTime')"
                show-overflow-tooltip
                sortable="custom"
              />
              <!-- 最近回复时间 -->
              <el-table-column
                prop="LastReplyTime"
                min-width="120"
                :label="$t('trials:medicalFeedback:table:lastReplyTime')"
                show-overflow-tooltip
                sortable="custom"
              />
              <!-- 审核结论 -->
              <el-table-column
                prop="IsHaveQuestion"
                :label="$t('trials:medicalFeedback:button:isQuestions')"
                min-width="120"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ $fd('IsPass',scope.row.IsHaveQuestion) }}
                </template>
              </el-table-column>
              <!-- 医学审核建议 -->
              <el-table-column
                prop="AuditAdviceEnum"
                :label="$t('trials:medicalFeedback:table:auditAdvice')"
                min-width="120"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ $fd('AuditAdvice',scope.row.AuditAdviceEnum) }}
                </template>
              </el-table-column>
              <!-- 是否认可 -->
              <el-table-column
                prop="DoctorUserIdeaEnum"
                min-width="120"
                :label="$t('trials:medicalFeedback:table:doctorUserIdea')"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="scope">
                  {{ $fd('MedicalReviewDoctorUserIdea',scope.row.DoctorUserIdeaEnum) }}
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('common:action:action')"
                min-width="100"
              >
                <template slot-scope="scope">
                  <!-- 查看 -->
                  <el-button
                    :disabled="!scope.row.IsHaveQuestion || scope.row.IsInvalid"
                    circle
                    :title="$t('trials:medicalFeedback:table:view')"
                    icon="el-icon-view"
                    @click="handleReadMecialAudit(scope.row)"
                  />
                  <!-- 回复:disabled="!scope.row.IsHaveQuestion || scope.row.IsInvalid" -->
                  <el-button

                    circle
                    :title="$t('trials:medicalFeedback:table:reply')"
                    icon="el-icon-chat-dot-round"
                    @click="handleReply(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      v-if="chatForm.visible"
      :visible.sync="chatForm.visible"
      :close-on-click-modal="false"
      custom-class="base-dialog-wrapper"
      :title="chatForm.title"
      width="600px"
    >
      <ChatForm
        :task-medical-review-id="currentRow.Id"
        :visit-task-id="currentRow.VisitTaskId"
        @getList="getList"
        @close="chatForm.visible = false"
      />
    </el-dialog>

    <!-- 医学审核详情 -->
    <el-dialog
      v-if="auditVisible"
      :visible.sync="auditVisible"
      :close-on-click-modal="false"
      :fullscreen="true"
      :title="$t('trials:medicalFeedback:title:mfDetail')"
    >
      <MedicalAudit
        :task-medical-review-id="currentRow.Id"
        :visit-task-id="currentRow.VisitTaskId"
        :row-data="currentRow"
        @getList="getList"
        @close="auditVisible=false"
        @nextTask="nextTask"
      />
    </el-dialog>
  </BaseContainer>
</template>
<script>
import { getIRMedicalFeedbackList, getNextIRMedicalFeedback } from '@/api/trials'
import { getTrialCriterionList } from '@/api/trials/reading'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import ChatForm from './components/ChatForm'
import MedicalAudit from '@/views/trials/trials-panel/reading/mim-medical-audit/components/MedicalAudit'
const searchDataDefault = () => {
  return {
    IsUrgent: null,
    SubjectCode: '',
    TaskBlindName: '',
    ReadingCategory: null,
    AuditState: null,
    AuditAdviceEnum: null,
    DoctorUserIdeaEnum: null,
    IsHaveQuestion: null,
    PageIndex: 1,
    PageSize: 20
  }
}
export default {
  name: 'ReadTask',
  components: { BaseContainer, Pagination, ChatForm, MedicalAudit },
  data() {
    return {
      searchData: searchDataDefault(),
      list: [],
      total: 0,
      loading: false,
      trialId: '',
      currentRow: {},
      chatForm: { visible: false, title: '' }, // 质询记录
      auditVisible: false,
      trialCriterionList: [],
      TrialReadingCriterionId: '',
      otherInfo: null
    }
  },
  watch: {
    TrialReadingCriterionId(v) {
      if (v) {
        this.searchData = searchDataDefault()
        this.getList()
      }
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.getTrialCriterionList()
  },
  methods: {
    getTrialCriterionList() {
      getTrialCriterionList(this.trialId).then(res => {
        this.trialCriterionList = res.Result
        this.TrialReadingCriterionId = this.trialCriterionList[0].TrialReadingCriterionId
      }).catch(() => {})
    },
    getList() {
      this.loading = true
      this.searchData.TrialId = this.trialId
      this.searchData.TrialReadingCriterionId = this.TrialReadingCriterionId
      getIRMedicalFeedbackList(this.searchData).then(res => {
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
        this.otherInfo = res.OtherInfo
        this.loading = false
        this.$nextTick(() => {
          this.$refs[this.TrialReadingCriterionId][0].doLayout()
        })
      }).catch(() => { this.loading = false })
    },
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    handleReadMecialAudit(row) {
      this.currentRow = { ...row }
      this.auditVisible = true
    },
    handleReply(row) {
      this.currentRow = { ...row }
      if (this.otherInfo && this.otherInfo.IsReadingTaskViewInOrder !== 0) {
        this.chatForm.title = `${this.$t('trials:medicalFeedback:title:qaRecord')} (${row.SubjectCode} ${row.TaskBlindName})`
      } else {
        this.chatForm.title = `${this.$t('trials:medicalFeedback:title:qaRecord')} (${row.TaskBlindName})`
      }
      this.chatForm.visible = true
    },
    async nextTask(taskMedicalReviewId) {
      try {
        const params = {
          trialId: this.trialId,
          trialReadingCriterionId: this.TrialReadingCriterionId,
          taskMedicalReviewId: taskMedicalReviewId
        }
        const res = await getNextIRMedicalFeedback(params)
        if (res.IsSuccess) {
          this.auditVisible = false
          this.currentRow = res.Result
          this.$nextTick(() => {
            this.auditVisible = true
          })
        }
      } catch (e) {
        this.auditVisible = false
        console.log(e)
      }
    },
    // 排序
    handleSortChange(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.searchData.PageIndex = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .medical-feedback-ir{
    ::v-deep .search {
      padding: 0px !important;
    }
  }
</style>
