<script lang="ts" setup>
import { IotStatApi } from '@/api/pms/stat'
import { useTableComponents } from '@/components/ZmTable/useTableComponents'

const loading = ref(false)

interface ConstructionBriefing {
  projectDeptName: string // 项目部
  deptName: string // 队伍
  rdStatus: string // 状态
  wellName: string // 井号
  techniques: string //  工艺
  deviceNames: string // 使用设备
  cumulativeWorkingLayers: number // 当日施工层
  cumulativeWorkingWell: string // 当日施工井
  productionBrief: string //  当日施工简要
  yesterdayStatus: string //   上一天状态
  yesterdayWorkingLayers: number // 上一天施工层
  yesterdayWorkingWell: string //   上一天施工井
  yesterdayProduct: string //  上一天施工简要
}

const list = ref<ConstructionBriefing[]>([])

const loadList = async () => {
  try {
    loading.value = true
    const res = await IotStatApi.getConstructionBriefing()
    list.value = res.list ?? []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadList()
})

const { ZmTable, ZmTableColumn } = useTableComponents<ConstructionBriefing>()
</script>
<template>
  <div class="card min-h-80 rounded-lg p-4 flex flex-col overflow-hidden" v-loading="loading">
    <div class="flex justify-between items-center mb-4">
      <div class="flex items-center gap-2">
        <!-- 红色装饰条，代表异常/警示 -->
        <div class="w-1 h-4 bg-[#00E5FF] rounded-full shadow-[0_0_8px_#00E5FF]"></div>
        <div class="text-[#e0e0e0] text-lg font-bold">施工简报</div>
      </div>
    </div>
    <div class="flex-1 relative w-full">
      <el-auto-resizer class="absolute">
        <template #default="{ width, height }">
          <ZmTable
            class="custom-dark-table"
            :data="list"
            :loading="loading"
            :width="width"
            :max-height="height"
            custom-class
          >
            <ZmTableColumn prop="projectDeptName" label="项目部" />
            <ZmTableColumn prop="deptName" label="队伍" />
            <ZmTableColumn prop="rdStatus" label="状态" />
            <ZmTableColumn prop="wellName" label="井号" />
            <ZmTableColumn prop="techniques" label="工艺" />
            <ZmTableColumn prop="deviceNames" label="使用设备" />
            <ZmTableColumn prop="cumulativeWorkingLayers" label="当日施工层" />
            <ZmTableColumn prop="cumulativeWorkingWell" label="当日施工井" />
            <ZmTableColumn prop="productionBrief" label="当日施工简要" />
            <ZmTableColumn prop="yesterdayStatus" label="上一天状态" />
            <ZmTableColumn prop="yesterdayWorkingLayers" label="上一天施工层" />
            <ZmTableColumn prop="yesterdayWorkingWell" label="上一天施工井" />
            <ZmTableColumn prop="yesterdayProduct" label="上一天施工简要" />
          </ZmTable>
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>
<style scoped>
.card {
  background-color: rgb(0 0 0 / 30%);
  box-shadow: 0 2px 12px rgb(0 0 0 / 50%);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
  }
}

/* --- 表格深度定制 --- */
:deep(.custom-dark-table) {
  --el-table-border-color: rgb(255 255 255 / 5%);
  --el-table-header-bg-color: rgb(0 229 255 / 8%);
  --el-table-row-hover-bg-color: rgb(0 229 255 / 10%);
  --el-table-tr-bg-color: transparent;

  color: #e5e7eb; /* 文字颜色：灰白 */
  background-color: transparent !important;
}

/* 移除表格底部和周围的白线 */
:deep(.el-table__inner-wrapper::before),
:deep(.el-table__border-left-patch) {
  display: none;
}

/* 表头样式 */
:deep(.el-table th.el-table__cell) {
  font-weight: 600;
  color: #00e5ff; /* 表头文字荧光色 */
  background-color: var(--el-table-header-bg-color) !important;
  border-bottom: 1px solid rgb(0 229 255 / 20%);
}

/* 单元格样式 */
:deep(.el-table td.el-table__cell) {
  border-bottom: 1px solid rgb(255 255 255 / 5%);
}

/* 斑马纹 - 偶数行稍微亮一点点 */
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background-color: rgb(255 255 255 / 2%);
}

/* Hover 效果 - 这一行亮起 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: var(--el-table-row-hover-bg-color) !important;
}

/* 滚动条美化 */
:deep(.el-scrollbar__bar.is-horizontal),
:deep(.el-scrollbar__bar.is-vertical) {
  background-color: rgb(0 0 0 / 30%);
}

:deep(.el-scrollbar__thumb) {
  background-color: rgb(0 229 255 / 20%);

  &:hover {
    background-color: rgb(0 229 255 / 40%);
  }
}
</style>
