<template>
  <div class="reviewerApproval-wrapper">
    <el-row>
      <el-col :span="12">
        <!-- 阅片人审批 -->
        <h3>{{$t('trials:sysDocBeSigned:table:reviewerApproval')}}</h3>
      </el-col>
      <el-col :span="12" style="text-align:right;">
        <h3>
          <Pagination class="page" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" layout="total, sizes, prev, pager, next" :background="false" style="display: inline-block;" @pagination="getList" />
          <!-- 重置 -->
          <el-button icon="el-icon-refresh-left" size="small" circle :title="$t('common:button:reset')" @click="handleReset" />
        </h3>
      </el-col>
    </el-row>
    <el-table
      ref="needSignDocList"
      v-loading="listLoading"
      :data="list"
      :show-header="true"
      height="calc(100% - 100px)"
      @sort-change="handleSortByColumn"
    >
      <el-table-column type="index" width="40" />
      <!-- 项目编号 -->
      <el-table-column
        :label="$t('trials:workbench:table:trialId')"
        prop="TrialCode"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 试验名称 -->
      <el-table-column
        :label="$t('trials:workbench:table:experimentName')"
        prop="ExperimentName"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 研究方案号 -->
      <el-table-column
        :label="$t('trials:workbench:table:researchNo')"
        prop="ResearchProgramNo"
        show-overflow-tooltip
        sortable="custom"
      />
      <!-- 是否加急 -->
      <el-table-column
        :label="$t('trials:subject:table:isUrgent')"
        prop="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
        :label="$t('trials:sysDocBeSigned:table:ToBeApprovalCount')"
        prop="ToBeApprovalCount"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        :label="$t('common:action:action')"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit-outline"
            circle
            :title="$t('trials:seletctedReviews:timeline:approval')"
            @click="handleAudit(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import { getSPM_ReviewerSelectToBeDoneList } from '@/api/trials'
import Pagination from '@/components/Pagination'
const searchDataDefault = () => {
  return {
    pageIndex: 1,
    pageSize: 20,
    asc: true,
    sortField: ''
  }
}
export default {
  name: 'ReviewerApproval',
  components: { Pagination },
  data() {
    return {
      listLoading: false,
      list: [],
      listQuery: searchDataDefault(),
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getSPM_ReviewerSelectToBeDoneList(this.listQuery).then(res => {
        this.listLoading = false
        this.total = res.Result.TotalCount
        this.list = res.Result.CurrentPageData
      }).catch(() => { this.listLoading = false })
    },
    handleAudit(row) {
      this.$router.push({ path: `/trials/trials-panel/attachments/SPMEnrollment?trialId=${row.TrialId}&trialCode=${row.TrialCode}&researchProgramNo=${row.ResearchProgramNo}` })
    },
    handleReset() {
      this.listQuery = searchDataDefault()
      this.getList()
      this.$nextTick(() => {
        this.$refs.needSignDocList.clearSort()
      })
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.listQuery.asc = true
      } else {
        this.listQuery.asc = false
      }
      this.listQuery.sortField = column.prop
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.reviewerApproval-wrapper{
  height: 100%;
}

</style>
