<template>
  <el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
  <el-table ref="reportTable" :data="tableData" style="width: 100%;height: 479px" :span-method="objectSpanMethod" v-loading="loading">
    <!--        <el-table-column label="四川省国有资产经营投资管理有限责任公司-->
    <!--    科技创新项目人工成本分摊明细表" align="center">-->
    <el-table-column v-for="column in columnInfo" :prop="column.prop" :label="column.label" align="center"
                     :fixed="(!column.children) ? ((column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 'right' : 'left') : false"
                     :width="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') ? 160:130">
      <template #default="scope">
        <template v-if="column.children">
          <el-table-column v-for="childColumn in column.children"
                           :prop="column.prop + '.'+ childColumn.prop"
                           :label="childColumn.label"
                           :width="childColumn.prop === 'subtotal' ? 160 : 130">
            <template #default="columnScope">
              {{ columnScope.row[column.prop][childColumn.prop] }}
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <template v-if="column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost'">
            {{ getTotalSeparation(scope.row, column.prop) }}
          </template>
          <template v-else>
            {{ scope.row[column.prop] }}
          </template>
        </template>
      </template>
    </el-table-column>
    <!--        </el-table-column>-->
  </el-table>
</template>

<script setup lang="jsx">
import {getResearchUser, getAllocationDetailList, getAllocationDetails} from "@/api/expense-manage";
import {ElNotification} from "element-plus";
import {exportExcel} from "@/utils/export-excel";

const route = useRoute()
const tableIns = ref()
const reportTable = ref({});
const columnInfo = ref([])
const monthConcat = new Map()
const tableData = ref([])
const loading = ref(false)
const researchOptions = ref([])
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
  if (columnIndex === 0) {
    if (monthConcat.has(rowIndex)) {
      return {
        rowspan: monthConcat.get(rowIndex),
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  } else {
    let length = Object.keys(row).length
    if (length > 5) {
      if (concatColumn(columnIndex, length)) {
        if (rowIndex % 5 === 0) {
          return {
            rowspan: 5,
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    }
  }
}


const getTotalSeparation = (row, prop) => {
  let totalSeparation = 0.00
  for (let key of Object.keys(row)) {
    if (key.startsWith('personInfo')) {
      let value = prop === 'totalSeparation' ? row[key].separationAmount : row[key].subtotal
      if ("/" !== value) {
        try {
          totalSeparation += parseFloat(value)
        } catch (e) {
        }
      }
    }
  }
  if (totalSeparation !== 0) {
    return totalSeparation;
  } else {
    return "/"
  }
}

const concatColumn = (columnIndex, length) => {
  let columnLength = 5 + (length - 5) * 5
  if (columnIndex === 1
      || columnIndex === columnLength - 1) {
    return true;
  }
  for (let i = 0; i < length - 5; i++) {
    if (columnIndex === 4 + (i * 5)
        || columnIndex === 5 + (i * 5)
        || columnIndex === 7 + (i * 5)) {
      return true
    }
  }
  return false
}
const init = () => {
  loading.value = true
  getAllocationDetails().then(res => {
    columnInfo.value = res.data.columns
    let tableDataLet = res.data.tableData;
    tableData.value = []
    let rowIndex = 0;
    tableDataLet.forEach((tableDatum, index) => {
      let rowspan = tableDatum.rows.length * 5
      monthConcat.set(rowIndex, rowspan)
      rowIndex += rowspan
      for (const tableDatumElement of tableDatum.rows) {
        tableData.value = tableData.value.concat(tableDatumElement)

      }
    })
    loading.value = false
  })
}

const getResearchOptions = async () => {
  const res = await getResearchUser()
  researchOptions.value = res.data
}
const getResearchName = (id) => {
  let label = ''
  if (id !== undefined) {
    researchOptions.value.forEach(item => {
      if (item.value == id) {
        label = item.label
      }
    })
  }
  return label
}
const search = (val) => {
  tableConfig.params = {
    allocationId: route.query.id,
    ...val
  }
  tableIns.value.refresh()
}
getResearchOptions()
init()


const exportTable = () => {
  const $e = reportTable.value.$el
  let $table = $e.querySelector('.el-table__fixed')
  if (!$table) {
    $table = $e
  }
  exportExcel($table, tableData.value[0], "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表")
}
</script>
