<template>
  <BaseContainer v-loading="loading" style="height:100%;background-color: #fff;">
    <el-tabs v-if="TrialReadingCriterionId" v-model="TrialReadingCriterionId" type="border-card">
      <el-tab-pane v-for="item of trialCriterionList" :key="item.TrialReadingCriterionId" :label="item.TrialReadingCriterionName" :name="item.TrialReadingCriterionId">
        <div v-if="isReadingTaskViewInOrder && TrialReadingCriterionId === item.TrialReadingCriterionId">
          <div slot="search-container">
            <el-form :inline="true">
              <!-- 受试者编号 -->
              <el-form-item :label="$t('trials:pendingReadingTasks:table:subjectCode')">
                <el-input
                  v-model="searchData.SubjectCode"
                  style="width:130px;"
                  clearable
                />
              </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
              v-adaptive="{bottomOffset:75}"
              :data="list"
              stripe
              height="100"
              @sort-change="handleSortChange"
            >
              <el-table-column type="index" width="40" align="left" />
              <el-table-column
                prop="IsUrgent"
                :label="$t('trials:consistencyCheck:table:isUrgent')"
                show-overflow-tooltip
                min-width="100"
                sortable="custom"
              >
                <template slot-scope="scope">
                  <el-tag :type="scope.row.UrgentColor === 1 ? 'danger' : scope.row.UrgentColor === 2 ? 'warning' : 'primary'">{{ $fd('YesOrNo', scope.row.IsUrgent) }}</el-tag>
                </template>
              </el-table-column>
              <!-- 受试者编号 -->
              <el-table-column
                prop="SubjectCode"
                min-width="100"
                :label="$t('trials:pendingReadingTasks:table:subjectCode')"
                show-overflow-tooltip
                sortable="custom"
              />
              <!-- 剩余阅片量 -->
              <el-table-column
                prop="UnReadCanReadTaskCount"
                min-width="100"
                :label="$t('trials:pendingReadingTasks:table:remainingReadingVolume')"
                show-overflow-tooltip
                sortable="custom"
              />
              <el-table-column
                prop="UrgentCount"
                :label="$t('trials:sysDocBeSigned:table:UrgentCount')"
                show-overflow-tooltip
                min-width="100"
                sortable="custom"
              >
                <template slot-scope="scope">
                  <span :style="{color: scope.row.UrgentColor === 1 ? '#F56C6C' : scope.row.UrgentColor === 2 ? '#E6A23C' : '#409EFF'}">{{ scope.row.UrgentCount }}</span>
                </template>
              </el-table-column>
              <!--              &lt;!&ndash; 未读任务数量 &ndash;&gt;-->
              <!--              <el-table-column-->
              <!--                prop="UnReadTaskCount"-->
              <!--                min-width="100"-->
              <!--                label="未读任务数量"-->
              <!--                show-overflow-tooltip-->
              <!--              />-->
              <!--              &lt;!&ndash; 可读任务量 &ndash;&gt;-->
              <!--              <el-table-column-->
              <!--                prop="UnReadCanReadTaskCount"-->
              <!--                min-width="100"-->
              <!--                label="可读任务量"-->
              <!--                show-overflow-tooltip-->
              <!--              />-->
              <!--              &lt;!&ndash; 已签名任务量 &ndash;&gt;-->
              <!--              <el-table-column-->
              <!--                prop="HaveReadTaskCount"-->
              <!--                min-width="100"-->
              <!--                label="已签名任务量"-->
              <!--                show-overflow-tooltip-->
              <!--              />-->
              <!-- 建议完成时间 -->
              <el-table-column
                prop="SuggesteFinishedTime"
                min-width="100"
                :label="$t('trials:pendingReadingTasks:table:suggestedCompletionTime')"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="scope">
                  {{ scope.row.SuggesteFinishedTime.split(':')[0] + ':00:00' }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('common:action:action')"
                width="250"
                fixed="right"
              >
                <template slot-scope="scope">
                  <!-- 阅片 -->
                  <el-button
                    :disabled="scope.row.ExistReadingApply"
                    circle
                    :title="scope.row.ExistReadingApply ? $t('trials:pendingReadingTasks:button:ExistReadingApply') : $t('trials:pendingReadingTasks:button:review')"
                    icon="el-icon-edit-outline"
                    @click="handleReadImage(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>
        <div v-else-if="isReadingTaskViewInOrder === false && TrialReadingCriterionId === item.TrialReadingCriterionId">
          <el-descriptions :column="2" border style="width:800px">
            <!-- 剩余任务量 -->
            <el-descriptions-item :label="$t('trials:pendingReadingTasks:table:remainingTaskVolume')" :label-style="{'width':'200px'}">
              <el-tag size="small" type="danger">{{ randomReadInfo.UnReadTaskCount }}</el-tag>
            </el-descriptions-item>
            <!-- 剩余裁判量 -->
            <el-descriptions-item :label="$t('trials:pendingReadingTasks:table:amountOfJudgesRemaining')" :label-style="{'width':'200px'}">
              <el-tag size="small" type="danger">{{ randomReadInfo.UnReadJudgeTaskCount }}</el-tag>
            </el-descriptions-item>
            <!-- 已完成任务量 -->
            <el-descriptions-item :label="$t('trials:pendingReadingTasks:table:amountOfCompletedTasks')" :label-style="{'width':'200px'}">
              <el-tag size="small">{{ randomReadInfo.FinishTaskCount }}</el-tag>
            </el-descriptions-item>
            <!-- 已完成裁判量 -->
            <el-descriptions-item :label="$t('trials:pendingReadingTasks:table:numberOfJudgesCompleted')" :label-style="{'width':'200px'}">
              <el-tag size="small">{{ randomReadInfo.FinishJudgeTaskCount }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <!-- 开始随机阅片 -->
              <el-button
                type="primary"
                size="small"
                :disabled="randomReadInfo.UnReadTaskCount+randomReadInfo.UnReadJudgeTaskCount ===0"
                @click="handleOutOfOrderReading"
              >
                {{ $t('trials:pendingReadingTasks:button:beginRandomReview') }}
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- <template v-else-if="!isReadingTaskViewInOrder && isRender">
          <el-tabs v-model="TrialReadingCriterionId" type="border-card">
            <el-tab-pane v-for="i of trialCriterionList" :key="i.TrialReadingCriterionName" :label="i.TrialReadingCriterionName" :name="i.TrialReadingCriterionId">
              <el-descriptions :column="2" border style="width:800px">
                <el-descriptions-item label="剩余任务量" :label-style="{'width':'200px'}">
                  <el-tag size="small" type="danger">{{ randomReadInfo.UnReadTaskCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="剩余裁判量" :label-style="{'width':'200px'}">
                  <el-tag size="small" type="danger">{{ randomReadInfo.UnReadJudgeTaskCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="已完成任务量" :label-style="{'width':'200px'}">
                  <el-tag size="small">{{ randomReadInfo.FinishTaskCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="已完成裁判量" :label-style="{'width':'200px'}">
                  <el-tag size="small">{{ randomReadInfo.FinishJudgeTaskCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <el-button
                    type="primary"
                    size="small"
                    :disabled="randomReadInfo.UnReadTaskCount+randomReadInfo.UnReadJudgeTaskCount ===0"
                    @click="handleOutOfOrderReading"
                  >
                    开始随机阅片
                  </el-button>
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </template> -->
      </el-tab-pane>
    </el-tabs>
  </BaseContainer>
</template>
<script>
import { getIRUnReadSubjectTaskList, verifyReadingRestTime } from '@/api/trials'
import { getTrialCriterionList } from '@/api/trials/reading'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import { getToken } from '@/utils/auth'
const searchDataDefault = () => {
  return {
    SubjectCode: '',
    PageIndex: 1,
    PageSize: 20
  }
}
export default {
  name: 'ReadingTaskList',
  components: { BaseContainer, Pagination },
  data() {
    return {
      searchData: searchDataDefault(),
      list: [],
      total: 0,
      loading: false,
      trialId: '',
      isReadingTaskViewInOrder: null,
      randomReadInfo: {},
      isRender: false,
      trialCriterionList: [],
      TrialReadingCriterionId: '',
      isTableShow: true,
      readingTool: null,
      criterionType: null,
      openWindow: null
    }
  },
  watch: {
    TrialReadingCriterionId(v) {
      if (v) {
        this.getList()
      }
    }
  },
  mounted() {
    window.addEventListener('message', this.receiveMsg)
    this.trialId = this.$route.query.trialId
    this.getTrialCriterionList()
  },
  beforeDestroy() {
    window.removeEventListener('message', this.receiveMsg)
    if (this.openWindow) {
      this.openWindow.close()
    }
  },
  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
      this.isRender = false
      getIRUnReadSubjectTaskList(this.searchData).then(res => {
        this.isReadingTaskViewInOrder = res.OtherInfo.IsReadingTaskViewInOrder
        this.readingTool = res.OtherInfo.ReadingTool
        this.criterionType = res.OtherInfo.CriterionType
        if (res.OtherInfo.IsReadingTaskViewInOrder) {
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
        } else {
          this.randomReadInfo = res.OtherInfo.RandomReadInfo
        }
        this.isRender = true
        this.loading = false
      }).catch(() => {
        this.isRender = true
        this.loading = false
      })
    },
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
    handleReadImage(row) {
      if (this.openWindow) {
        this.openWindow.close()
      }
      this.loading = true
      verifyReadingRestTime().then(_ => {
        this.loading = false

        window.localStorage.setItem('TrialReadingCriterionId', this.TrialReadingCriterionId)
        var token = getToken()
        var path = ''
        if (this.readingTool === 0) {
          path = `/readingDicoms?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
        } else {
          path = `/noneDicomReading?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
        }
        var routeData = this.$router.resolve({ path })

        this.openWindow = window.open(routeData.href, '_blank')
      }).catch(() => { this.loading = false })
    },
    handleOutOfOrderReading() {
      if (this.openWindow) {
        this.openWindow.close()
      }
      this.loading = true
      verifyReadingRestTime().then(_ => {
        this.loading = false
        window.localStorage.setItem('TrialReadingCriterionId', this.TrialReadingCriterionId)
        var token = getToken()
        var path = ''
        if (this.readingTool === 0) {
          path = `/readingDicoms?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
        } else {
          path = `/noneDicomReading?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
        }
        var routeData = this.$router.resolve({ path })
        this.openWindow = window.open(routeData.href, '_blank')
      }).catch(() => { this.loading = false })
    },
    receiveMsg(event) {
      if (event.data === 'refreshTaskList') {
        this.getList()
      }
    },
    // 排序
    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>
