<template>
  <div class="overview-page" v-loading="loading">
    <section class="page-head"><div><span class="eyebrow">ACTION REQUIRED</span><h1>今日未处置预警</h1><p>数据更新：{{ generatedAt || '正在加载' }}</p></div><el-button type="primary" :loading="loading" @click="loadData"><el-icon><Refresh /></el-icon>刷新清单</el-button></section>
    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon closable class="error-alert" @close="errorMessage = ''" />
    <div class="metric-grid">
      <div class="metric-card urgent"><span>待关注预警</span><strong>{{ total }}</strong><small>截至当前仍未完成处置</small></div>
      <div class="metric-card"><span>涉及权属单位</span><strong>{{ ownershipCount }}</strong><small>需及时响应的责任单位</small></div>
      <div class="metric-card"><span>最高优先级</span><strong class="level-value">{{ highestLevel }}</strong><small>按当前未处置预警级别计算</small></div>
    </div>
    <el-card shadow="never" class="table-card">
      <template #header><div class="card-title"><div><span>重点关注清单</span><em>{{ total }} 条</em></div><div class="filters"><el-select v-model="selectedType" clearable placeholder="全部预警类型" @change="resetPage"><el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select><el-select v-model="selectedLevel" clearable placeholder="全部级别" @change="resetPage"><el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select><el-input v-model="keyword" clearable placeholder="搜索名称、专项或单位" @keyup.enter="resetPage" @clear="resetPage"><template #prefix><el-icon><Search /></el-icon></template></el-input><el-button type="primary" @click="resetPage">查询</el-button></div></div></template>
      <el-table v-loading="tableLoading" :data="rows" stripe highlight-current-row empty-text="当前暂无未处置预警" @row-click="openDetail">
        <el-table-column label="关注" width="74" align="center"><template #default="{ row }"><span class="priority-dot" :class="`level-${warningLevelCode(row)}`" /></template></el-table-column>
        <el-table-column label="预警事项" min-width="190" show-overflow-tooltip><template #default="{ row }">{{ row.warningName || row.warning_name || '未命名预警' }}</template></el-table-column>
        <el-table-column label="预警类型" width="120"><template #default="{ row }">{{ warningTypeText(row) }}</template></el-table-column>
        <el-table-column label="预警专项" min-width="150" show-overflow-tooltip><template #default="{ row }">{{ row.warningSpecial || row.warning_special || '未设置' }}</template></el-table-column>
        <el-table-column label="级别" width="100" align="center"><template #default="{ row }"><el-tag :type="warningLevelTag(row)">{{ warningLevelText(row) }}</el-tag></template></el-table-column>
        <el-table-column label="权属单位" min-width="155" show-overflow-tooltip><template #default="{ row }">{{ row.ownershipUnit || row.ownership_unit || '未设置' }}</template></el-table-column>
        <el-table-column label="处置人" width="115"><template #default="{ row }">{{ row.todoInfo?.userName || row.todo_info?.user_name || '待分配' }}</template></el-table-column>
        <el-table-column label="待办时间" min-width="165"><template #default="{ row }">{{ formatDashboardTime(row.todoInfo?.createTime || row.todo_info?.create_time || row.publishTime) }}</template></el-table-column>
        <el-table-column label="状态" width="105" align="center"><template #default="{ row }"><el-tag :type="warningStatusTag(row)" effect="plain">{{ warningStatusText(row) }}</el-tag></template></el-table-column>
        <el-table-column label="操作" width="90" fixed="right" align="center"><template #default="{ row }"><el-button link type="primary" @click.stop="openDetail(row)">查看详情</el-button></template></el-table-column>
      </el-table>
      <el-pagination v-if="total" v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10,20,50]" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination" @current-change="loadPage" @size-change="handleSizeChange" />
    </el-card>
    <WarningDetailDrawer v-model="detailVisible" :row="selectedRow" />
  </div>
</template>

<script setup name="WarningTodayUnprocessed">
import { computed, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Search } from '@element-plus/icons-vue'
import { pageWarningTodayUnprocessed } from '@/api/warning/dashboard'
import { warningTypeLabels } from '../lstatistics/statisticsShared'
import WarningDetailDrawer from './WarningDetailDrawer.vue'
import { dashboardData, formatDashboardTime, pageRecords, pageTotal, warningLevelCode, warningLevelLabels, warningLevelTag, warningLevelText, warningStatusTag, warningStatusText, warningTypeText } from './dashboardShared'

const loading=ref(false);const tableLoading=ref(false);const errorMessage=ref('');const keyword=ref('');const selectedType=ref('');const selectedLevel=ref('');const pageNum=ref(1);const pageSize=ref(10);const rows=ref([]);const total=ref(0);const ownershipCount=ref(0);const highestLevelValue=ref(0);const generatedAt=ref('');const detailVisible=ref(false);const selectedRow=ref(null)
const typeOptions=Object.entries(warningTypeLabels).filter(([value])=>['WATER_PIPE','SEWER_PIPE','GAS_PIPE','MANHOLE'].includes(value)).map(([value,label])=>({value,label}));const levelOptions=[{value:'1',label:'蓝色（IV级）'},{value:'2',label:'黄色（III级）'},{value:'3',label:'橙色（II级）'},{value:'4',label:'红色（I级）'}];const highestLevel=computed(()=>warningLevelLabels[String(highestLevelValue.value)]||'-');
function openDetail(row){selectedRow.value=row;detailVisible.value=true}function resetPage(){pageNum.value=1;loadPage()}function handleSizeChange(){pageNum.value=1;loadPage()}
async function loadPage(){tableLoading.value=true;errorMessage.value='';try{const response=await pageWarningTodayUnprocessed({pageNum:pageNum.value,pageSize:pageSize.value,warningType:selectedType.value||undefined,warningLevel:selectedLevel.value||undefined,keyword:keyword.value.trim()||undefined});const data=dashboardData(response,{});rows.value=pageRecords(response);total.value=pageTotal(response);ownershipCount.value=Number(data.ownershipCount||0);highestLevelValue.value=Number(data.highestLevel||0);generatedAt.value=data.generatedAt||''}catch(error){rows.value=[];total.value=0;ownershipCount.value=0;highestLevelValue.value=0;errorMessage.value=error?.message||'今日未处置预警加载失败';ElMessage.error(errorMessage.value)}finally{tableLoading.value=false}}
async function loadData(){loading.value=true;errorMessage.value='';try{await loadPage()}catch(error){errorMessage.value=error?.message||'今日未处置预警加载失败，请稍后重试';ElMessage.error(errorMessage.value)}finally{loading.value=false}}
onMounted(loadData)
</script>

<style scoped lang="scss">
.overview-page{min-height:calc(100vh - 84px);padding:22px;background:#f4f7fb;color:#172b4d}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px}.eyebrow{color:#dc2626;font-size:11px;font-weight:700;letter-spacing:2px}.page-head h1{margin:6px 0 4px;font-size:26px}.page-head p{margin:0;color:#718096}.error-alert{margin-bottom:16px}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}.metric-card{min-height:126px;padding:20px 22px;border:1px solid #e6ebf2;border-top:3px solid #2563eb;border-radius:8px;background:#fff}.metric-card.urgent{border-top-color:#dc2626}.metric-card span{color:#718096;font-size:14px}.metric-card strong{display:block;margin:9px 0 7px;font-size:35px;line-height:1}.metric-card small{color:#94a3b8;font-size:12px}.level-value{font-size:27px!important}.card-title{display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:650}.card-title>div:first-child{display:flex;align-items:baseline;gap:10px}.card-title em{color:#94a3b8;font-size:12px;font-style:normal;font-weight:400}.filters{display:flex;align-items:center;gap:8px}.filters .el-select{width:170px}.filters .el-input{width:225px}.priority-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.12)}.priority-dot.level-1{background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}.priority-dot.level-2{background:#eab308;box-shadow:0 0 0 4px rgba(234,179,8,.12)}.priority-dot.level-3{background:#f97316;box-shadow:0 0 0 4px rgba(249,115,22,.14)}.priority-dot.level-4{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12)}.pagination{justify-content:flex-end;margin-top:16px}@media(max-width:1040px){.card-title{align-items:flex-start;flex-direction:column}.filters{width:100%;flex-wrap:wrap}}@media(max-width:840px){.page-head{align-items:flex-start;flex-direction:column}.metric-grid{grid-template-columns:1fr}.filters .el-select,.filters .el-input{width:100%}}
</style>
