<template>
  <el-card shadow="never">
    <div slot="header" class="clearfix">
      <span>{{ doctorName }} ' {{ listQuery.Status==5?"Pending":listQuery.Status==8?"Approved":"Reading" }} trials</span>
    </div>
    <el-table
      ref="trialsList"
      v-loading="listLoading"
      :data="list"
      stripe
      class="table"
      size="small"
      :height="tableHeight"
      @sort-change="handleSortChange"
    >
      <el-table-column type="index" width="50" />

      <el-table-column
        prop="Code"
        min-width="110"
        label="Trial ID"
        show-overflow-tooltip
        sortable="custom"
      />

      <el-table-column
        prop="Expedited"
        min-width="110"
        label="Expedited"
        show-overflow-tooltip
        sortable="custom"
      >
        <template
          slot-scope="scope"
        >{{ scope.row.Expedited==0?'No':scope.row.Expedited==1?'24H':'48H' }}</template>
      </el-table-column>
      <el-table-column
        prop="Indication"
        label="Indication"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="Phase"
        min-width="100"
        label="Phase"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="ReviewType"
        label="Review Type"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="Criterion"
        label="Criteria"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="Modalities"
        label="Modalities"
        min-width="120"
        :formatter="ModalitiesFormatter"
        show-overflow-tooltip
      />
      <el-table-column
        prop="CRO"
        label="CRO"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="Sponsor"
        label="Sponsor"
        min-width="120"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        prop="CreateTime"
        label="Date Created"
        min-width="120"
        show-overflow-tooltip
        :formatter="timeFormatter"
        sortable="custom"
      />
    </el-table>
    <div style="margin-top:5px;text-align:right">
      <pagination
        :total="total"
        :page.sync="listQuery.PageIndex"
        :limit.sync="listQuery.PageSize"
        @pagination="getList"
      />
    </div>

  </el-card>
</template>
<script>
import { formatUTCTime } from '@/utils/formatter'
import Pagination from '@/components/Pagination'
import { getDoctorTrialListByStatus } from '@/api/reviewers'
import store from '@/store'
import { changeURLStatic } from '@/utils/history.js'
export default {
  name: 'TrialStats',
  components: { Pagination },
  data() {
    return {
      list: [],
      listQuery: {
        DoctorId: '',
        Status: 0,
        PageIndex: 1,
        PageSize: 20,
        Asc: false,
        SortField: ''
      },
      total: 0,
      doctorName: '',
      listLoading: false,
      tableHeight: document.documentElement.clientHeight - 160
    }
  },
  mounted() {
    if (this.$router.currentRoute.query.TokenKey) {
      store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }
    this.listQuery.DoctorId = this.$router.currentRoute.query.doctorId
    this.listQuery.Status = this.$router.currentRoute.query.status
    this.doctorName = this.$router.currentRoute.query.name

    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getDoctorTrialListByStatus(this.listQuery).then(res => {
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
        this.listLoading = false
      }).catch(() => { this.listLoading = false })
    },
    handleSortChange(column) {
      if (column.order === 'ascending') {
        this.listQuery.Asc = true
      } else {
        this.listQuery.Asc = false
      }
      if (column.prop === 'ReviewType') {
        column.prop = 'ReviewTypeId'
      } else if (column.prop === 'Criterion') {
        column.prop = 'CriterionId'
      }
      this.listQuery.SortField = column.prop
      this.listQuery.PageIndex = 1
      this.getList()
    },
    ModalitiesFormatter(row, column) {
      if (row.ModalityList.length > 0) return row.ModalityList.join(', ')
    },
    timeFormatter(row) {
      if (row.CreateTime) {
        return formatUTCTime(row.CreateTime)
      }
    },
    handleTrialstatus(row) {
      if (row.TrialStatusStr === 'RFP') {
        return 'Request for Proposal'
      } else if (row.TrialStatusStr === 'Submitted') {
        return 'CVs Submitted'
      } else if (row.TrialStatusStr === 'Approved') {
        return 'Readers Approved'
      } else if (row.TrialStatusStr === 'Approved') {
        return 'Readers Approved'
      } else {
        return row.TrialStatusStr
      }
    }
  }
}
</script>
