<template>
  <div class="upload-container">
    <el-table
      size="small"
      stripe
      :data="doctorList"
      height="100%"
    >
      <el-table-column type="index" width="40" />
      <el-table-column
        prop="Name"
        sortable="custom"
        label="Name"
        min-width="90"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.LastName + scope.row.FirstName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ChineseName"
        sortable="custom"
        label="Name CN"
        min-width="110"
        show-overflow-tooltip
      />
      <el-table-column
        prop="ReviewerCode"
        sortable="custom"
        label="ID"
        min-width="130"
        show-overflow-tooltip
      />

      <el-table-column prop="Training" label="Training" min-width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.Training | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="RefresherTraining" label="Refresher Training" min-width="130" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.RefresherTraining | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Timepoint" align="center">
        <el-table-column prop="Timepoint" label="Regular" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.Timepoint | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="TimepointIn48H"
          label="48-hour"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.Timepoint48H | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="TimepointIn24H"
          label="24-hour"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.Timepoint24H | rounding }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="Adjudication" align="center">
        <el-table-column prop="Adjudication" label="Regular" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.Adjudication | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="AdjudicationIn48H"
          label="48-hour"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.Adjudication48H | rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="AdjudicationIn24H"
          label="24-hour"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.Adjudication24H | rounding }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="Global" label="Global" min-width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.Global | rounding }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="Downtime" label="Downtime" min-width="80" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.Downtime | rounding }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Action" min-width="80" fixed="right" align="left">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleEdit(scope.row)">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :key="timer"
      size="small"
      title="Edit"
      append-to-body
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
    >
      <TrialsDataReviewersForm :form="row" @getList="getList" @closeDialog="closeDialog" />
    </el-dialog>
  </div>
</template>
<script>
import TrialsDataReviewersForm from './TrialsDataReviewersForm'
export default {
  name: 'TrialsDataReviewers',
  filters: {
    rounding(value) {
      if (!value) {
        value = 0
      }
      return value ? Number(value).toFixed(2) : value
    }
  },
  components: { TrialsDataReviewersForm },
  props: {
    doctorList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      timer: null,
      row: null
    }
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false
    },
    getList(row) {
      this.$emit('getList', row, 1)
    },
    handleEdit(row) {
      this.timer = new Date().getTime()
      this.row = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    }
  }
}
</script>
