<template>
  <el-button color="#DED0B2" style="float: right;margin: 0 10px 10px 0" @click="exportTable">导出</el-button>
  <el-table ref="table" :data="tableData" style="width: 100%;height: 479px;" :show-summary="true" border
            :summary-method="getSummaries" v-loading="loading" :header-cell-style="{background:'#f5f7fa'}" :scrollbar-always-on="true">
    <el-table-column type="index" label="序号" align="center" width="60"/>
    <el-table-column prop="projectName" label="项目名称" align="center" min-width="170"/>
    <el-table-column prop="projectCost" label="费用性质" align="center" min-width="100">
      <template #default="scope">
        <div v-if="scope.row.projectCost !== null">
          <Tag dictType="project_cost" :value="scope.row.projectCost"/>
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column prop="researchStage" label="研发阶段" align="center" min-width="100">
      <template #default="scope">
        <div
            v-if="scope.row.researchStage !== null && scope.row.researchStage !== null && scope.row.researchStage !== undefined">
          <el-tag effect="plain">{{scope.row.researchStage==1?'开发阶段':'研究阶段'}}</el-tag>
        </div>
        <div v-else>--</div>
      </template>
    </el-table-column>
    <el-table-column prop="afterTax" label="分摊金额" align="center">
      <template #default="scope">
        <div v-if="scope.row.afterTax !== null">
<!--          {{ toThousands(scope.row.afterTax) }}-->
          {{ scope.row.afterTax }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {toThousands} from '@/utils/changePrice.js'
import {exportExcel} from "@/utils/export-excel";
import {getAllocationSummaryDetails} from "@/api/expense-manage";

const tableData = ref([{
  id: '12987122',
  name: 'Tom',
  amount1: '234',
  amount2: '3.2',
  amount3: 10,
},
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  }])
const loading = ref(false)
const table = ref()
const route = useRoute()
const getSummaries = (param) => {
  const {columns, data} = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '小计'
    } else if (index === 4) {
      const values = data.map((item) => Number(item[column.property]))
      if (!values.every((value) => Number.isNaN(value))) {
        sums[index] = `${values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)}`
        // sums[index] = toThousands(sums[index])
      } else {
        sums[index] = '-'
      }
    }
  })
  return sums
}
const exportTable = () => {
  const $e = table.value.$el
  let $table = $e.querySelector('.el-table__fixed')
  if (!$table) {
    $table = $e
  }
  exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目费用分摊表",2)
}
const init = () => {
  loading.value = true
  let params = {
    allocationId: route.query.id
  }
  getAllocationSummaryDetails(params).then(res => {
    tableData.value = res.data
    loading.value = false
  })
}
init()
</script>

<style scoped>

</style>
