<template>
  <div class="app-container data-list">
    <div class="toolbar">
      <el-row>
        <el-input
          v-model="listQuery.Code"
          placeholder="Trial ID"
          style="width: 160px"
          size="small"
          clearable
        />
        <el-input
          v-model="listQuery.Indication"
          placeholder="Indication"
          style="width: 160px"
          size="small"
          clearable
        />

        <el-select
          v-model="listQuery.Expedited"
          value-key="value"
          placeholder="Expedited"
          clearable
          size="small"
          style="width: 160px"
        >
          <el-option
            v-for="item in expeditedOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-select
          v-model="listQuery.EnrollStatus"
          value-key="value"
          placeholder="Enroll Status"
          clearable
          size="small"
          style="width: 160px"
        >
          <el-option
            v-for="item in enrollStatusOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-button
          type="text"
          size="small"
          @click="handleReset"
        >Reset</el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleSearch"
        >Search</el-button>
      </el-row>
    </div>
    <div class="data-table">
      <el-table
        ref="trialsList"
        v-loading="listLoading"
        :data="list"
        stripe
        class="table"
        size="small"
        height="100%"
        @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="ReviewMode"
          label="Review Mode"
          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-column
          prop="EnrollStatus"
          label="Enroll State"
          min-width="120"
          show-overflow-tooltip
          :formatter="enrollStatusFormatter"
          sortable="custom"
        />

        <el-table-column
          label="Action"
          min-width="150"
          align="left"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.EnrollStatus>=10"
              type="text"
              size="small"
              @click="handleToWorkLoad(scope.row)"
            >WorkLoad</el-button>
            <el-button
              :disabled="scope.row.EnrollStatus!=8"
              type="text"
              size="small"
              @click="
                enrollVisible = true
                trialId = scope.row.Id
                enrollStatus=scope.row.EnrollStatus
              "
            >Enroll</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        :total="total"
        :page.sync="listQuery.PageIndex"
        :limit.sync="listQuery.PageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog
      title="Enroll"
      :visible.sync="enrollVisible"
      width="400px"
      size="small"
      :close-on-click-modal="false"
    >
      <el-radio-group v-model="enrollStatus">
        <el-radio :label="9">Reject Enroll</el-radio>
        <el-radio :label="10">Confirm Enroll</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="enrollVisible = false">Cancel</el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="btnDisable"
          @click="handleEnroll"
        >OK</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { formatUTCTime } from '@/utils/formatter'
import { getTrialListByReviewer, updateEnrollStatus } from '@/api/reading'
const getListQueryDefault = () => {
  return {
    Code: '',
    Expedited: '',
    Indication: '',
    EnrollStatus: '',
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: ''
  }
}
export default {
  name: 'ReviewerTrials',
  components: { Pagination },
  data() {
    return {
      btnDisable: false,
      trialId: '',
      enrollStatus: '',
      enrollVisible: false,
      listQuery: getListQueryDefault(),
      list: [],
      listLoading: false,
      total: 0,

      expeditedOption: [
        { value: 0, label: 'No' },
        { value: 2, label: '48-Hour' },
        { value: 1, label: '24-Hour' }
      ],
      enrollStatusOption: [
        { value: 8, label: 'Enrolling' },
        { value: 9, label: 'Rejected' },
        { value: 10, label: 'Reading' },
        { value: 14, label: 'End' }

      ]
    }
  },

  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true

      getTrialListByReviewer(this.listQuery)
        .then((res) => {
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleSelectSearch() {
      this.isShow = false
      this.getList()
    },
    handleSearch() {
      this.listQuery.PageIndex = 1
      this.getList()
    },
    handleReset() {
      this.listQuery = getListQueryDefault()
      this.getList()
    },
    handleEnroll() {
      this.btnDisable = true
      updateEnrollStatus(this.trialId, this.enrollStatus)
        .then((res) => {
          this.enrollVisible = false

          if (this.enrollStatus === 9) { this.$message.success('Reject successfully') } else { this.$message.success('Enroll successfully') }

          this.getList()
        })
        .catch(() => {
          this.btnDisable = false
        })
    },

    handleToWorkLoad(row) {
      this.$router.push({
        name: 'WorkloadPannel',
        query: {
          TrialId: row.Id
        }
      })
    },

    ModalitiesFormatter(row, column) {
      if (row.ModalityList.length > 0) return row.ModalityList.join(', ')
    },

    timeFormatter(row) {
      if (row.CreateTime) {
        return formatUTCTime(row.CreateTime)
      }
    },
    enrollStatusFormatter(row) {
      if (row.EnrollStatus === 8) { return 'Need Confirm' } else if (row.EnrollStatus === 9) { return 'Rejected' } else if (row.EnrollStatus === 10 || row.EnrollStatus === 12 || row.EnrollStatus === 13) {
        return 'Reading'
      } else {
        return 'End'
      }
    },
    handleSortChange(column) {
      if (column.order === 'ascending') {
        this.listQuery.Asc = true
      } else {
        this.listQuery.Asc = false
      }
      this.listQuery.SortField = column.prop
      this.listQuery.PageIndex = 1
      this.getList()
    }
  }
}
</script>
