<template>
  <div class="education-info">
    <div class="btn-wrapper">
      <el-button style="margin-left:auto" size="small" :disabled="checkID.length==0" @click="downloadAttachement">Download</el-button>
    </div>
    <el-table
      :data="tblList"
      :span-method="objectSpanMethod"
      size="small"
      @selection-change="selectMore"
    >
      <el-table-column type="selection" align="left" width="50" />
      <el-table-column type="index" label="No." width="50" />
      <el-table-column prop="Type" label="Type" min-width="50" show-overflow-tooltip />
      <el-table-column
        prop="FileName"
        label="File Name"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        prop="CreateTime"
        label="Upload Time"
        min-width="50"
        show-overflow-tooltip
      />
      <el-table-column label="Action" min-width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="preview(scope.$index, scope.row)">View</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { downloadByAttachmentId } from '@/api/reviewers'
export default {
  props: {
    attachmentList: {
      type: Array,
      default() {
        return []
      }
    },
    doctorId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tblList: [],
      checkID: [],
      spanArr: [],
      pos: 0
    }
  },
  created() {
    this.tblList = this.filterListByType(this.attachmentList)
    this.getSpanArr(this.tblList)
  },
  methods: {
    filterListByType(arr) {
      var list = []
      if (arr.length > 0) {
        arr.forEach(item => {
          if (item.Type === 'Diploma of the highest medical degree') {
            list.push(item)
          }
        })
        arr.forEach(item => {
          if (item.Type === 'Medical Qualification Certificate') {
            list.push(item)
          }
        })
        arr.forEach(item => {
          if (item.Type === 'Practice License') {
            list.push(item)
          }
        })
        arr.forEach(item => {
          if (item.Type === 'Modality Certificate(CT)') {
            list.push(item)
          }
        })
        arr.forEach(item => {
          if (item.Type === 'Modality Certificate(MRI)') {
            list.push(item)
          }
        })
        arr.forEach(item => {
          if (item.Type === 'Modality Certificate(NM)') {
            list.push(item)
          }
        })
        arr.forEach(item => {
          if (item.Type === 'Modality Certificate(US)') {
            list.push(item)
          }
        })
      }
      return list
    },
    downloadAttachement() {
      downloadByAttachmentId(this.doctorId, this.checkID).then(res => {
        if (res.IsSuccess) {
          var fullPath = res.Result.FullFilePath
          window.open(fullPath)
        }
      })
    },
    preview(index, row) {
      const filePath = row.FullPath
      if (filePath) {
        window.open(filePath, '_blank')
      }
    },
    selectMore(val) {
      const arr = []
      for (let index = 0; index < val.length; index++) {
        arr.push(val[index].Id)
      }
      this.checkID = arr
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].Type === data[i - 1].Type) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else if (columnIndex === 3) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } else if (columnIndex === 4) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    timeFormatter(row) {
      return new Date(row.UpdateTime).format('yyyy-MM-dd hh:mm:ss')
    }
  }
}
</script>

<style lang="scss">
.education-info{
  padding:5px 15px;
  font-size:13px;
  .btn-wrapper{
    display: flex;
    align-items: center;
  }
}
</style>
