<template>
  <el-table
    v-adaptive="{bottomOffset:45}"
    v-loading="listLoading"
    stripe
    height="100"
    :data="list"
    @sort-change="sortByColumn"
    @selection-change="handleSelectChange"
  >
    <el-table-column type="selection" align="left" width="45" :selectable="hasResume" />
    <el-table-column type="index" width="40" align="left" />
    <el-table-column
      align="left"
      prop="LastName"
      label="Name"
      show-overflow-tooltip
      width="130"
      sortable="custom"
    >
      <template slot-scope="scope">
        {{ scope.row.LastName + ' / ' + scope.row.FirstName }}
      </template>
    </el-table-column>
    <el-table-column
      prop="ChineseName"
      label="Name CN"
      show-overflow-tooltip
      width="90"
      align="left"
    />
    <el-table-column prop="ReviewerCode" label="ID" width="80" show-overflow-tooltip sortable="custom" />
    <el-table-column
      label="Reading"
      width="100"
      show-overflow-tooltip
      sortable="custom"
      align="left"
      prop="Reading"
    >
      <template slot-scope="scope">
        <span v-if="scope.row.Reading" style="color:#428bca">
          <router-link
            tag="a"
            :to="{ name: 'trialStats', query: { name:scope.row.FirstName+' '+scope.row.LastName,doctorId: scope.row.Id,status:10 }}"
            target="_blank"
          >{{ scope.row.Reading }}</router-link>
        </span>
        <span v-else>{{ scope.row.Reading }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Finished"
      width="100"
      show-overflow-tooltip
      sortable="custom"
      align="left"
      prop="Finished"
    >
      <template slot-scope="scope">
        <span v-if=" scope.row.Finished" style="color:#428bca">
          <router-link
            tag="a"
            :to="{ name: 'trialStats', query: { name:scope.row.FirstName+' '+scope.row.LastName,doctorId: scope.row.Id,status:14 }}"
            target="_blank"
          >{{ scope.row.Finished }}</router-link>
        </span>
        <span v-else>{{ scope.row.Finished }}</span>
      </template>
    </el-table-column>
    <el-table-column
      align="left"
      prop="SpecialityId"
      label="Specialty"
      sortable="custom"
      show-overflow-tooltip
      width="130"
    >
      <template slot-scope="scope">
        <span>
          {{ scope.row.SpecialityId === otherId ? scope.row.SpecialityOther : isEnglish?scope.row.Speciality:scope.row.SpecialityCN }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      align="left"
      prop="Subspeciality"
      label="Subspecialty"
      show-overflow-tooltip
      min-width="150"
    >
      <template slot-scope="scope">
        <span v-if="isEnglish">
          {{ scope.row.SubspecialityList.length>0?scope.row.SubspecialityList.join(', '):'' }}
        </span>
        <span v-else>
          {{ scope.row.SubspecialityCNList.length>0?scope.row.SubspecialityCNList.join(', '):'' }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="HospitalName"
      label="Institution"
      min-width="110"
      align="left"
      sortable="custom"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <span>
          {{ isEnglish?scope.row.HospitalName:scope.row.HospitalNameCN }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="City"
      label="Location"
      width="110"
      align="left"
      sortable="custom"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <span>
          {{ isEnglish?scope.row.City:scope.row.CityCN }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="Action" min-width="100" align="left" fixed="right">
      <template slot-scope="scope">
        <el-button
          type="text"
          size="mini"
          @click="handleDetail(scope.row)"
        >
          Detail
        </el-button>
        <el-button
          type="text"
          size="mini"
          @click="handleEdit(scope.row)"
        >
          Edit
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'ReviewerList',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    listLoading: {
      type: Boolean,
      default() {
        return false
      }
    },
    isEnglish: {
      type: Boolean
    }
  },
  data() {
    return {
      selectArr: [],
      otherId: 'ef84e9cb-f1a6-49d7-b6da-34be2c12abd5'
    }
  },
  methods: {
    handleDetail(row) {
      // this.$router.push({ name: 'ReviewerDetail', query: {
      //   Id: row.Id,
      //   isEnglish: this.isEnglish
      // }})
      this.$router.push({ path: `/reviewers/reviewers-detail?Id=${row.Id}&isEnglish=${this.isEnglish}` })
    },
    handleEdit(row) {
      this.$router.push({ path: `/reviewers/reviewers-edit?Id=${row.Id}` })
    },
    handleSelectChange(val) {
      const arr = []
      for (let index = 0; index < val.length; index++) {
        arr.push(val[index].Id)
      }
      this.selectArr = arr
      this.$emit('getSelectArr', arr)
    },
    hasResume(row) {
      if (row.HasResume) {
        return true
      } else {
        return false
      }
    },
    sortByColumn(column) {
      let asc = false
      let sortField = ''
      if (column.order === 'ascending') {
        asc = true
      } else {
        asc = false
      }
      sortField = column.prop
      this.$emit('getListBySort', { asc: asc, sortField: sortField })
    }
  }
}
</script>
