<template>
  <div class="title">{{ title }}</div>
  <a-table :columns="columns" :data-source="props.data" :pagination="false" size="small" :scroll="{y: 100}">
    <template #summary>
      <a-table-summary fixed>
        <a-table-summary-row>
          <a-table-summary-cell>合计</a-table-summary-cell>
          <a-table-summary-cell v-for="col in columns.length-2">
            <a-typography-text></a-typography-text>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <a-typography-text>{{ result }}</a-typography-text>
          </a-table-summary-cell>
        </a-table-summary-row>
    </a-table-summary>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { defineProps, computed } from "vue"
const props = defineProps(["columns", "data", "title"])
const { columns=[], title="" } = props
const result = computed(() => {
  let sum = 0
  props.data?.forEach(item => {
    sum += item.area
  })
  return sum
})
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}
:deep(.ant-table-summary){
  background: #fafafa;
}
</style>
