<template>
  <div class="agreements-info">
    <el-table
      :data="agreementList"
      style="margin-top:10px;"
      :span-method="objectSpanMethod"
      border
      size="small"
    >
      <template slot="empty">
        <span></span>
      </template>
      <el-table-column type="index" label="No." width="50" />

      <el-table-column
        prop="TrialCode"
        :label="$t('resumeInfo:label:TrialCode')"
        min-width="50"
        show-overflow-tooltip
      />
      <el-table-column prop="Type" :label="$t('resumeInfo:label:Type')" min-width="80" show-overflow-tooltip />
      <el-table-column
        prop="FileName"
        :label="$t('resumeInfo:label:FileName')"
        min-width="100"
        show-overflow-tooltip
      />

      <el-table-column
        prop="CreateTime"
        :label="$t('resumeInfo:label:CreateTime')"
        min-width="60"
        show-overflow-tooltip
      />
      <el-table-column label="Action" min-width="150">
        <template slot-scope="scope">
          <el-button
            v-if="(scope.row.Type=='Statement of Work') ||(scope.row.Type=='Acknowledgement of SOW') || scope.row.Type=='Consultant Agreement'"
            size="small"
            type="text"
            @click="preview(scope.$index, scope.row)"
          >{{$t('resumeInfo:button:view')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    doctorInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      agreementList: [],
      spanArr: [],
      pos: 0
    }
  },
  created() {
    this.initAgreement()
  },
  methods: {
    initAgreement() {
      if (this.doctorInfo.AttachmentList) {
        this.doctorInfo.AttachmentList.forEach(item => {
          if (item.Type === 'Consultant Agreement') {
            item.TrialCode = ''
            this.agreementList.push(item)
          }
        })
        this.doctorInfo.SowList.forEach(item => {
          item.Type = 'Statement of Work'
          this.agreementList.push(item)
        })
        this.doctorInfo.AckSowList.forEach(item => {
          item.Type = 'Acknowledgement of SOW'
          this.agreementList.push(item)
        })
        this.agreementList = this.agreementList.sort((a, b) => {
          if (a.TrialCode < b.TrialCode) {
            return -1
          } else if (a.TrialCode === b.TrialCode) {
            return 1
          } else {
            return 0
          }
        })
        this.getSpanArr(this.agreementList)
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].TrialCode === data[i - 1].TrialCode) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    preview(index, row) {
      const filePath = row.FullPath
      if (filePath) {
        window.open(this.OSSclientConfig.basePath + filePath, '_blank')
      }
    },
    timeFormatter(row) {
      return new Date(row.CreateTime).format('yyyy-MM-dd hh:mm:ss')
    },
    officalFormatter(row, column) {
      if (row.IsOfficial) {
        return 'Yes'
      } else {
        return 'No'
      }
    }
  }
}
</script>

<style lang="scss">
.agreements-info{
  padding:5px 15px;
  font-size:13px;
}
</style>
