<script setup lang="ts">
import { useTableComponents } from '@/components/ZmTable/useTableComponents'
import dayjs from 'dayjs'
import type {
  ConstructionDailyReportRow,
  ConstructionDailyReportTableColumn,
  ConstructionDailyReportTableColumnLeaf
} from './report-config'
import { tableColumns } from './report-config'

const props = withDefaults(
  defineProps<{
    list: ConstructionDailyReportRow[]
    loading: boolean
    total: number
    pageNo: number
    pageSize: number
  }>(),
  {
    list: () => [],
    loading: false,
    total: 0,
    pageNo: 1,
    pageSize: 10
  }
)

const emits = defineEmits<{
  (e: 'size-change', value: number): void
  (e: 'current-change', value: number): void
}>()

const { ZmTable, ZmTableColumn } = useTableComponents<ConstructionDailyReportRow>()

function isColumnGroup(
  column: ConstructionDailyReportTableColumn
): column is Extract<ConstructionDailyReportTableColumn, { children: ConstructionDailyReportTableColumnLeaf[] }> {
  return 'children' in column
}

function formatCellValue(row: ConstructionDailyReportRow, prop: keyof ConstructionDailyReportRow) {
  const value = row[prop]
  if (prop === 'createTime' || prop === 'constructionStartDate' || prop === 'constructionEndDate') {
    if (!value) return '-'
    return dayjs(value).isValid() ? dayjs(value).format('YYYY-MM-DD') : value
  }
  return value === null || value === undefined || value === '' ? '-' : value
}
</script>

<template>
  <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 overflow-hidden">
    <div class="flex-1 relative">
      <el-auto-resizer class="absolute">
        <template #default="{ width, height }">
          <ZmTable
            :data="props.list"
            :loading="props.loading"
            :width="width"
            :height="height"
            :max-height="height"
            show-border>
            <ZmTableColumn type="index" label="序号" :width="60" fixed="left" />
            <template v-for="column in tableColumns" :key="column.label">
              <ZmTableColumn v-if="isColumnGroup(column)" :label="column.label">
                <ZmTableColumn
                  v-for="child in column.children"
                  :key="`${String(child.prop)}-${child.label}`"
                  :prop="child.prop"
                  :label="child.label"
                  :width="child.width"
                  :min-width="child.minWidth"
                  :fixed="child.fixed"
                  show-overflow-tooltip
                  cover-formatter
                  :real-value="
                    (row: ConstructionDailyReportRow) => formatCellValue(row, child.prop)
                  " />
              </ZmTableColumn>
              <ZmTableColumn
                v-else
                :prop="column.prop"
                :label="column.label"
                :width="column.width"
                :min-width="column.minWidth"
                :fixed="column.fixed"
                show-overflow-tooltip
                cover-formatter
                :real-value="
                  (row: ConstructionDailyReportRow) => formatCellValue(row, column.prop)
                " />
            </template>
            <ZmTableColumn label="操作" :width="120" fixed="right" action>
              <template #default="{ row }">
                <slot name="action" :row="row"></slot>
              </template>
            </ZmTableColumn>
          </ZmTable>
        </template>
      </el-auto-resizer>
    </div>
    <div class="h-8 mt-2 flex items-center justify-end">
      <el-pagination
        v-show="props.total > 0"
        :current-page="props.pageNo"
        :page-size="props.pageSize"
        :background="true"
        :page-sizes="[10, 20, 30, 50, 100]"
        :total="props.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="emits('size-change', $event)"
        @current-change="emits('current-change', $event)" />
    </div>
  </div>
</template>
