<template>
  <div class="app-container monthly-paymentDetail">
    <div class="filter-container">
      <el-form :inline="true" :model="basicInfo" class="demo-form-inline" size="small">
        <el-form-item label="Name：">
          <el-input v-model="basicInfo.Name" style="width:160px;" readonly />
        </el-form-item>
        <el-form-item label="ID：">
          <el-input v-model="basicInfo.Code" style="width:100px;" readonly />
        </el-form-item>
        <el-form-item label="Rank：">
          <el-input v-model="basicInfo.RankName" style="width:180px;" readonly />
        </el-form-item>
        <el-form-item label="Month：">
          <el-input v-model="basicInfo.YearMonth" readonly style="width:100px;" />
        </el-form-item>

        <el-form-item label="Exchange Rate：">
          <el-input v-model="basicInfo.ExchangeRate" readonly style="width:80px;" />
        </el-form-item>

        <el-button type="primary" size="small" @click="exportExcel">Export Excel</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          @click="handleWindowPrint( '#payDetailPdf2', htmlTitle )"
        >Export PDF</el-button>
      </el-form>
    </div>
    <el-table
      id="payDetailPdf2"
      height="90%"
      :data="list"
      :span-method="objectSpanMethod"
      border
      show-summary
      :summary-method="getSummaries"
      align="center"
      size="small"
    >
      <el-table-column prop="TrialCode" label="Project ID" show-overflow-tooltip min-width="100" />
      <el-table-column
        prop="PaymentType"
        label="Read Type"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.TrialCode!='Adjustment'? scope.row.PaymentType :scope.row.AdjustmentView.AdjustType }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="Count" label="Volume" show-overflow-tooltip min-width="100">
        <template slot-scope="scope">
          <div>{{ scope.row.TrialCode!='Adjustment'? scope.row.Count : scope.row.AdjustmentView.Note }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="BasePrice"
        label="Base Rate ($)"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.BasePrice | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="PersonalAdditional"
        label="Personal Adjustment ($)"
        show-overflow-tooltip
        min-width="160"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.PersonalAdditional | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="TrialAdditional"
        label="Project Adjustment ($)"
        show-overflow-tooltip
        min-width="150"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.TrialAdditional | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="TotalUnitPrice"
        label="Adjusted Rate ($)"
        show-overflow-tooltip
        min-width="130"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.TotalUnitPrice | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="PaymentUSD"
        label="Subtotal ($)"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.PaymentUSD | rounding }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="PaymentCNY"
        :label="rmbTitle"
        show-overflow-tooltip
        min-width="120"
      >
        <template slot-scope="scope">
          <span v-if="basicInfo.ExchangeRate==0" style="color:red">{{ 'Setting Needed' }}</span>
          <span v-else>{{ scope.row.PaymentCNY }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getMonthlyPaymentDetailList } from '@/api/financials'
import Excel from 'exceljs'
import floatObj from '@/utils/float-operation'
export default {
  name: 'PaymentDetail',
  filters: {
    rounding(value) {
      return value ? Number(value).toFixed(2) : value
      // return value
    }
  },
  data() {
    return {
      basicInfo: {},
      list: [],
      spanArr: [],
      pos: 0,
      htmlTitle: '',
      rmbTitle: '',
      loading: false
    }
  },
  mounted() {
    const info = this.$router.currentRoute.query
    this.basicInfo = (({ Id, DoctorId, ChineseName, LastName, FirstName, Code, ExchangeRate, RankName, YearMonth }) => ({ Id, DoctorId, ChineseName, LastName, FirstName, Code, ExchangeRate, RankName, YearMonth }))(info)
    this.basicInfo.Name = `${this.basicInfo.FirstName} ${this.basicInfo.LastName} ${this.basicInfo.ChineseName}`
    this.htmlTitle = this.basicInfo.ChineseName + '_' + this.basicInfo.YearMonth
    this.getList()
  },
  methods: {
    getList() {
      getMonthlyPaymentDetailList(this.basicInfo.Id, this.basicInfo.DoctorId, this.basicInfo.YearMonth).then(res => {
        this.list = res.Result.DetailList
        this.rmbTitle = 'Subtotal(¥)'
        this.getSpanArr(res.Result.DetailList)
        this.list.forEach((item, index, array) => {
          if (item.AdjustmentView) {
            item.AdjustmentView.Note = `Note: ${item.AdjustmentView.Note}`
          }
        })
      })
    },
    getSummaries(param) {
      var that = this
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = 'Total'
          return
        }
        if (column.property === 'PaymentUSD') {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values
              .reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return floatObj.add(prev, curr)
                } else {
                  return prev
                }
              }, 0)
          }
        }
        if (column.property === 'PaymentCNY') {
          const values = data.map(item => Number(item['PaymentCNY']))
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return floatObj.add(prev, curr)
            } else {
              return prev
            }
          }, 0)
          if (sums[index] === 0.0 && that.basicInfo.ExchangeRate === 0) {
            sums[index] = 'Setting Needed'
          }
          return
        }
      })
      return sums
    },
    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
          }
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }

      if (row.TrialCode === 'Adjustment') {
        if (columnIndex === 2) {
          return [1, 5]
        } else if (columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
          return [0, 0]
        }
      }
    },
    exportExcel() {
      var workbook = new Excel.Workbook()
      var sheet = workbook.addWorksheet(this.basicInfo.ChineseName + ' ' + this.basicInfo.YearMonth)
      sheet.properties.defaultRowHeight = 22
      sheet.columns = [
        { header: 'Project ID', key: 'TrialCode', width: 15 },
        { header: 'Type', key: 'PaymentType', width: 30 },
        { header: 'Count', key: 'Count', width: 15 },
        { header: 'Base Price', key: 'BasePrice', width: 15 },
        { header: 'Personal Additional', key: 'PersonalAdditional', width: 22 },
        { header: 'Trial Additional', key: 'TrialAdditional', width: 22 },
        { header: 'Total Price', key: 'TotalUnitPrice', width: 22 },
        { header: 'Total Fee', key: 'PaymentUSD', width: 22 },
        { header: 'Subtotal(¥)', key: 'PaymentCNY', width: 22 }
      ]

      var that = this

      var tempTotalFee = 0
      var tempTotalFeeInCN = 0
      this.list.forEach(element => {
        tempTotalFee += parseFloat(element.PaymentUSD)
        tempTotalFeeInCN += parseFloat(element.PaymentCNY)
      })

      var rowsCount = Number(this.list.length + 1)

      // 处理标题
      var titleRows = 4
      sheet.mergeCells('A1', 'I2')
      sheet.getCell('A1').value = 'Monthly Payment' // that.basicInfo.DoctorChineseName + ' ' + that.date + ' 费用明细'
      sheet.getCell('A1').alignment = { vertical: 'middle', horizontal: 'center' }
      sheet.getCell('A1').font = { name: 'SimSun', family: 4, size: 13, bold: true }

      sheet.mergeCells('A3', 'D3')
      // that.basicInfo.FirstName + ' ' + that.basicInfo.LastName + '     Name CN:'+
      sheet.getCell('A3').value = 'Name：' + this.basicInfo.ChineseName + '    ID:' + that.basicInfo.Code
      sheet.mergeCells('E3', 'I3')
      // sheet.getCell('E3').value =
      //   '         Rank：' +
      //   that.basicInfo.RankName +
      //   '             Month：' +
      //   that.basicInfo.YearMonth +
      //   '          Exchange Rate: ' +
      //   Number(that.basicInfo.ExchangeRate).toFixed(2)
      sheet.getCell('E3').value =
        '         Rank：' +
        that.basicInfo.RankName +
        '             Month：' +
        that.basicInfo.YearMonth +
        '          Exchange Rate: ' +
        Number(that.basicInfo.ExchangeRate)
      sheet.getCell('A3').alignment = { vertical: 'middle', horizontal: 'left' }
      sheet.getCell('E3').alignment = { vertical: 'middle', horizontal: 'right' }
      // heet.mergeCells('A4', 'H4')

      sheet.getCell('A4').value = 'Project ID'
      sheet.getCell('B4').value = 'Read Type'
      sheet.getCell('C4').value = 'Volume'
      sheet.getCell('D4').value = 'Base Rate($)'
      sheet.getCell('E4').value = 'Personal Adjustment($)'
      sheet.getCell('F4').value = 'Project Adjustment($)'
      sheet.getCell('G4').value = 'Adjusted Rate($)'
      sheet.getCell('H4').value = 'Subtotal($)'
      sheet.getCell('I4').value = 'Subtotal(¥)'
      sheet.getRow(4).font = { name: 'SimSun', family: 4, size: 11, bold: true }

      sheet.addRows(this.list)
      // 合并项目编号单元格
      var projectCount = Math.floor(Number(this.list.length / 9)) // 项目个数

      for (let i = 0; i < projectCount; i++) {
        var tempR1 = 'A' + (10 * i + titleRows + 1)
        var tempR2 = 'A' + (10 * (i + 1) + titleRows)
        if (10 * (i + 1) < rowsCount) {
          sheet.mergeCells(tempR1, tempR2)
          sheet.getCell(tempR1).alignment = { vertical: 'middle', horizontal: 'center' }
        }
      }

      // 合并奖励单元格

      var awardCount = this.list.filter(t => t.TrialCode === 'Volume Reward').length

      var adjustMentCount = this.list.filter(t => t.TrialCode === 'Adjustment').length

      if (awardCount > 0) {
        var R1 = 'A' + (projectCount * 10 + titleRows + 1)
        var R2 = 'A' + (projectCount * 10 + titleRows + awardCount)
        sheet.mergeCells(R1, R2)
        sheet.getCell(R1).alignment = { vertical: 'middle', horizontal: 'center' }
      }

      if (adjustMentCount > 0) {
        // 处理调整行列合并

        var R3 = 'A' + (projectCount * 10 + titleRows + awardCount + 1)
        var R4 = 'A' + (rowsCount + titleRows - 1)

        sheet.mergeCells(R3, R4)
        sheet.getCell(R3).alignment = { vertical: 'middle', horizontal: 'center' }

        // 行合并
        var i = 0
        for (i = 0; i < adjustMentCount; i++) {
          var adjustMentCell1 = 'B' + (projectCount * 10 + titleRows + awardCount + 1 + i)
          var adjustMentCell2 = 'C' + (projectCount * 10 + titleRows + awardCount + 1 + i)
          var adjustMentCell3 = 'G' + (projectCount * 10 + titleRows + awardCount + 1 + i)
          sheet.mergeCells(adjustMentCell2, adjustMentCell3)
          var index = projectCount * 10 + awardCount + i

          sheet.getCell(adjustMentCell1).value = this.list[index].AdjustmentView.AdjustType
          sheet.getCell(adjustMentCell2).value = this.list[index].AdjustmentView.Note
        }
      }

      var tempCell = 'A' + (rowsCount + 1 + titleRows - 1)
      var tempCell1 = 'B' + (rowsCount + 1 + titleRows - 1)
      var tempCell2 = 'G' + (rowsCount + 1 + titleRows - 1)
      var tempCell3 = 'H' + (rowsCount + 1 + titleRows - 1)
      var tempCell4 = 'I' + (rowsCount + 1 + titleRows - 1)
      sheet.mergeCells(tempCell1, tempCell2)
      sheet.getCell(tempCell).value = 'Total' // that.date + ' 费用总计: '
      sheet.getCell(tempCell3).value = tempTotalFee
      sheet.getCell(tempCell4).value = tempTotalFeeInCN

      sheet.getCell(tempCell3).font = { name: 'SimSun', family: 4, size: 13, bold: true }
      sheet.getRow(rowsCount + titleRows).font = { name: 'SimSun', family: 4, size: 13, bold: true }
      sheet.getColumn(7).numFmt = '#,##0.00'
      sheet.getColumn(8).numFmt = '#,##0.00'
      sheet.getColumn(9).numFmt = '#,##0.00'
      sheet.eachRow((row, number) => {
        if (number > 3) {
          row.eachCell((cell, rowNumber) => {
            cell.border = {
              top: { style: 'thin' },
              left: { style: 'thin' },
              bottom: { style: 'thin' },
              right: { style: 'thin' }
            }
          })
        }
      })
      workbook.xlsx
        .writeBuffer({
          base64: true
        })
        .then(function(xls64) {
          var data = new Blob([xls64], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          })

          if ('msSaveOrOpenBlob' in navigator) {
            // ie使用的下载方式
            window.navigator.msSaveOrOpenBlob(data, that.basicInfo.ChineseName + ' ' + that.basicInfo.YearMonth + '.xlsx')
          } else {
            var a = document.createElement('a')

            var url = URL.createObjectURL(data)
            a.href = url
            a.download = that.basicInfo.ChineseName + ' ' + that.basicInfo.YearMonth + '.xlsx'
            document.body.appendChild(a)
            a.click()
            setTimeout(function() {
              document.body.removeChild(a)
              window.URL.revokeObjectURL(url)
            }, 0)
          }
        })
    },

    handleWindowPrint(ele, fileName, vm) {
      var oIframe = document.createElement('iframe')
      oIframe.style.display = 'none'
      var oScript = document.createElement('script')
      var oStyle = document.createElement('style')
      oStyle.type = 'text/css'
      document.body.appendChild(oIframe)
      document.head.getElementsByTagName('title')[0].innerText = `${fileName}`

      oIframe.contentDocument.head.innerHTML = `<meta charset="utf-8">
                                              <title>${fileName}</title>
                                              <meta name="format-detection" content="telephone=no">
                                              <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                                              <meta name="viewport" content="width=device-width,initial-scale=1.0">`

      var divHeader = ' <div style="text-align:center; font-size:20px:"> Monthly Payment </div>'
      var divElement = `<div style='display: flex;justify-content: space-between;margin:25px 0px 20px'>
      <label>Name: ${this.basicInfo.ChineseName}</label>
      <label>ID: ${this.basicInfo.Code}</label>
      <label>Rank: ${this.basicInfo.RankName}</label>
      <label>Month: ${this.basicInfo.YearMonth}</label>
      <label>Exchange Rate: ${this.basicInfo.ExchangeRate}</label>
      </div>`

      oIframe.contentDocument.body.innerHTML = divHeader + divElement + document.querySelector(ele).outerHTML
      // oIframe.contentDocument.getElementsByClassName('el-table__body-wrapper')[0].style.maxHeight = '100%'

      // 页面打印缩放比例设置
      oIframe.contentDocument.body.style.zoom = 0.75
      // oIframe.contentDocument.getElementById('payDetailPdf2').removeAttribute('el-table--scrollable-y')
      oIframe.contentDocument.getElementsByClassName('el-table--scrollable-y').style = ''
      oIframe.contentDocument.getElementsByClassName('el-table__body-wrapper')[0].style = {
        'max-height': '100%'
        // ,'width':'100%'
      }

      oIframe.contentDocument.getElementsByClassName('el-table__header-wrapper')[0].remove()

      var ostatFirstTr = document.createElement('tr')
      ostatFirstTr.innerHTML = `  
      <td >
          <div class="cell">Trial ID</div>
      </td>
      <td >
          <div class="cell">Read Type</div>
      </td>
      <td >
          <div class="cell">Volume</div>
      </td>
      <td >
          <div class="cell">Base Rate ($)</div>
      </td>
      <td >
          <div class="cell">Personal Adjustment ($)</div>
      </td>
      <td>
          <div class="cell">Trial Adjustment ($)</div>
      </td>
      <td >
          <div class="cell">Adjusted Rate ($)</div>
      </td>
      <td>
          <div class="cell">Subtotal ($)</div>
      </td>
      <td >
          <div class="cell">Subtotal(¥)</div>
      </td>
      <th></th>`

      oIframe.contentDocument.getElementsByClassName('el-table__body')[0].children[1].appendChild(ostatFirstTr)

      var oldEle = oIframe.contentDocument.getElementsByClassName('el-table__body')[0].children[1].firstChild // 现有的元素
      oldEle.parentNode.insertBefore(ostatFirstTr, oldEle)
      // 将newEle插入到oldEle之前

      var tempTotalFee = 0
      var tempTotalFeeInCN = 0
      this.list.forEach(element => {
        tempTotalFee += parseFloat(element.PaymentUSD)
        tempTotalFeeInCN += parseFloat(element.PaymentCNY)
      })
      // tempTotalFee = tempTotalFee.toFixed(2)
      // tempTotalFeeInCN = tempTotalFeeInCN.toFixed(2)

      // 移除尾部统计行
      oIframe.contentDocument.getElementsByClassName('el-table__footer-wrapper')[0].remove()
      // 创建尾部统计行Last
      var ostatLastTr = document.createElement('tr')
      ostatLastTr.innerHTML = `
    <td >
        <div class="cell">Total</div>
    </td>
    <td >
        <div class="cell"></div>
    </td>
    <td >
        <div class="cell"></div>
    </td>
    <td >
        <div class="cell"></div>
    </td>
    <td >
        <div class="cell"></div>
    </td>
    <td>
        <div class="cell"></div>
    </td>
    <td >
        <div class="cell"></div>
    </td>
    <td>
        <div class="cell">${tempTotalFee}</div>
    </td>
    <td >
        <div class="cell">${tempTotalFeeInCN}</div>
    </td>
    <th></th>`
      oIframe.contentDocument.getElementsByClassName('el-table__body')[0].lastChild.appendChild(ostatLastTr)

      oStyle.innerHTML = `.el-table td{border:1px solid #ccc;}
  th{text-align:center} td{text-align:right}
        @page{size: landscape;}
      `

      oIframe.contentDocument.body.appendChild(oStyle)
      oScript.innerText =
      `if (window.navigator.userAgent.indexOf("Edge") >= 0)
{ 
window.print();

}
else{window.print();}`

      oIframe.contentDocument.body.appendChild(oScript)
    }
  }
}
</script>

<style lang="scss">
.monthly-paymentDetail{
  .el-table {
    overflow: visible !important;
  }
}

</style>
