<template>
  <div class="warning-county-page">
    <!-- 搜索筛选区域 -->
    <div class="search-area">
      <div class="search-item">
        <span class="search-label">预警标题</span>
        <el-input v-model="searchForm.title" placeholder="" clearable style="width: 160px" />
      </div>
      <div class="search-item">
        <span class="search-label">预警类型</span>
        <el-select v-model="searchForm.type" placeholder="全部" clearable style="width: 120px">
          <el-option label="全部" value="" />
          <el-option label="大雾预警" value="fog" />
          <el-option label="暴雨预警" value="rain" />
          <el-option label="冰雪预警" value="snow" />
          <el-option label="大风预警" value="wind" />
        </el-select>
      </div>
      <div class="search-item">
        <span class="search-label">预警级别</span>
        <el-select v-model="searchForm.level" placeholder="全部" clearable style="width: 120px">
          <el-option label="全部" value="" />
          <el-option label="红色预警" value="red" />
          <el-option label="橙色预警" value="orange" />
          <el-option label="黄色预警" value="yellow" />
          <el-option label="蓝色预警" value="blue" />
        </el-select>
      </div>
      <div class="search-item">
        <span class="search-label">响应情况</span>
        <el-select v-model="searchForm.response" placeholder="全部" clearable style="width: 120px">
          <el-option label="全部" value="" />
          <el-option label="已响应" value="responded" />
          <el-option label="未响应" value="unresponded" />
          <el-option label="响应中" value="responding" />
        </el-select>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-area">
      <el-button type="primary" class="report-btn" @click="handleReportProject">
        上报项目
      </el-button>
    </div>

    <!-- 数据表格 -->
    <div class="table-area">
      <el-table
        :data="filteredTableData"
        stripe
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        :row-class-name="rowClassName"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="title" label="预警标题" min-width="280" show-overflow-tooltip />
        <el-table-column prop="type" label="预警类型" width="100" align="center">
          <template #default="{ row }">
            <span :class="getTypeClass(row.type)">{{ row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sendTime" label="发送时间" width="160" align="center" />
        <el-table-column prop="effectTime" label="生效时间" width="160" align="center" />
        <el-table-column prop="receiveTime" label="接收时间" width="160" align="center" />
        <el-table-column prop="forwardTime" label="预警转发时间" width="160" align="center" />
        <el-table-column prop="endTime" label="预警结束时间" width="160" align="center" />
        <el-table-column prop="affectCount" label="影响数量" width="90" align="center" />
        <el-table-column prop="response" label="响应情况" width="90" align="center" />
        <el-table-column label="操作" width="80" align="center" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleDetail(row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-area">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="prev, pager, next, jumper"
        prev-text="上一个"
        next-text="下一个"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="预警详情"
      width="1200px"
      :close-on-click-modal="false"
      class="warning-detail-dialog"
      :show-close="true"
    >
      <div class="detail-content" v-if="currentRow">
        <!-- 基本信息 -->
        <div class="detail-section">
          <div class="section-title">基本信息</div>
          <div class="basic-info-box">
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">预警标题：</span>
                <span class="info-value">{{ currentRow.title }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">预警类型：</span>
                <span class="info-value">{{ currentRow.type }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">发送时间：</span>
                <span class="info-value">{{ currentRow.sendTime }}</span>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">生效时间：</span>
                <span class="info-value">{{ currentRow.effectTime }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">接收时间：</span>
                <span class="info-value">{{ currentRow.receiveTime }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">预警转发时间：</span>
                <span class="info-value">{{ currentRow.forwardTime }}</span>
              </div>
            </div>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">预警结束时间：</span>
                <span class="info-value">{{ currentRow.endTime || '-' }}</span>
              </div>
            </div>
            <div class="info-row full-width">
              <div class="info-item">
                <span class="info-label">预警描述：</span>
                <span class="info-value">{{ currentRow.description || '重庆市气象台2026年1月19日21时00分发布"道路结冰黄色预警信号"，预计1月19日21:00-20日9:00，丰都、万州、开州、城口、云阳、奉节、巫溪、巫山、武隆、彭水、石柱、黔江、酉阳、秀山等14个区县海拔800米以上的地区路表温度将低于0℃，并伴有降水，可能出现对交通有影响的道路结冰。' }}</span>
              </div>
            </div>
            <div class="info-row full-width">
              <div class="info-item">
                <span class="info-label">响应措施：</span>
                <span class="info-value">{{ currentRow.responseMeasures || '立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备' }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 影响情况 -->
        <div class="detail-section">
          <div class="section-title">影响情况</div>
          <div class="filter-bar">
            <div class="filter-item">
              <span class="filter-label">驻地名称</span>
              <el-input v-model="detailFilter.stationName" placeholder="" style="width: 150px" />
            </div>
            <div class="filter-item">
              <span class="filter-label">响应情况</span>
              <el-select v-model="detailFilter.responseStatus" placeholder="全部" style="width: 120px">
                <el-option label="全部" value="" />
                <el-option label="已响应" value="responded" />
                <el-option label="未响应" value="unresponded" />
              </el-select>
            </div>
          </div>
          <div class="table-wrapper">
            <el-table
              :data="filteredImpactData"
              style="width: 100%"
              :header-cell-style="impactHeaderCellStyle"
              :cell-style="impactCellStyle"
              stripe
            >
              <el-table-column type="index" label="序号" width="60" align="center" />
              <el-table-column prop="stationName" label="驻地名称" min-width="200" align="center" show-overflow-tooltip />
              <el-table-column prop="stationAddress" label="驻地地址" min-width="200" align="center" show-overflow-tooltip />
              <el-table-column prop="stationPeople" label="驻地人数" width="90" align="center" />
              <el-table-column prop="firstResponseTime" label="首次响应时间" width="160" align="center" />
              <el-table-column prop="latestResponseTime" label="最新响应时间" width="160" align="center" />
              <el-table-column prop="urgeTime" label="最近催告时间" width="160" align="center" />
              <el-table-column prop="responseStatus" label="响应情况" width="120" align="center">
                <template #default="{ row }">
                  <span :class="getResponseStatusClass(row.responseStatus)">{{ row.responseStatus }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" align="center" fixed="right">
                <template #default="{ row }">
                  <el-button 
                    v-if="row.responseStatus === '已响应'" 
                    link 
                    type="primary" 
                    size="small" 
                    @click="handleCheckRecord(row)"
                  >
                    巡查记录
                  </el-button>
                  <el-button 
                    v-else 
                    link 
                    type="danger" 
                    size="small" 
                    @click="handleReport(row)"
                  >
                    上报
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 上报项目弹窗 -->
    <el-dialog
      v-model="reportDialogVisible"
      title="上报"
      width="900px"
      :close-on-click-modal="false"
      class="report-project-dialog"
    >
      <div class="report-form-content">
        <!-- 项目信息 -->
        <div class="form-section">
          <div class="section-title">项目信息</div>
          <el-form :model="reportForm" label-width="120px" class="report-form">
            <!-- 工程状态 -->
            <el-form-item label="工程状态：">
              <el-radio-group v-model="reportForm.projectStatus">
                <el-radio label="building">在建</el-radio>
                <el-radio label="stopped">停工</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <!-- 第一行 -->
            <div class="form-row">
              <el-form-item label="所属区县" class="form-item-1-3">
                <el-select v-model="reportForm.district" placeholder="请选择" style="width: 100%">
                  <el-option label="万州区" value="wanzhou" />
                  <el-option label="合川区" value="hechuan" />
                  <el-option label="北碚区" value="beibei" />
                  <el-option label="涪陵区" value="fuling" />
                </el-select>
              </el-form-item>
              <el-form-item label="项目名称" class="form-item-1-3">
                <el-input v-model="reportForm.projectName" placeholder="" />
              </el-form-item>
              <el-form-item label="驻地名称" class="form-item-1-3">
                <el-input v-model="reportForm.stationName" placeholder="" />
              </el-form-item>
            </div>
            
            <!-- 第二行 -->
            <div class="form-row">
              <el-form-item label="驻地类型" class="form-item-1-3">
                <el-select v-model="reportForm.stationType" placeholder="请选择" style="width: 100%">
                  <el-option label="类型1" value="type1" />
                  <el-option label="类型2" value="type2" />
                </el-select>
              </el-form-item>
              <el-form-item label="坐标点位" class="form-item-2-3">
                <div class="coordinate-inputs">
                  <el-input v-model="reportForm.longitude" placeholder="请输入经度" style="width: 45%" />
                  <span class="coordinate-separator">-</span>
                  <el-input v-model="reportForm.latitude" placeholder="请输入纬度" style="width: 45%" />
                </div>
              </el-form-item>
            </div>
            
            <!-- 第三行 -->
            <div class="form-row">
              <el-form-item label="所属项目名称" class="form-item-1-3">
                <el-input v-model="reportForm.parentProjectName" placeholder="" />
              </el-form-item>
              <el-form-item label="项目类型" class="form-item-1-3">
                <el-select v-model="reportForm.projectType" placeholder="请选择" style="width: 100%">
                  <el-option label="路段" value="road" />
                  <el-option label="桥梁" value="bridge" />
                  <el-option label="隧道" value="tunnel" />
                  <el-option label="边坡" value="slope" />
                </el-select>
              </el-form-item>
              <el-form-item label="建设单位" class="form-item-1-3">
                <el-input v-model="reportForm.constructionUnit" placeholder="" />
              </el-form-item>
            </div>
            
            <!-- 第四行 -->
            <div class="form-row">
              <el-form-item label="施工单位" class="form-item-1-3">
                <el-input v-model="reportForm.builderUnit" placeholder="" />
              </el-form-item>
              <el-form-item label="行政区域" class="form-item-1-3">
                <el-select v-model="reportForm.adminArea" placeholder="请选择" style="width: 100%">
                  <el-option label="区域1" value="area1" />
                  <el-option label="区域2" value="area2" />
                </el-select>
              </el-form-item>
              <el-form-item label="驻地人数" class="form-item-1-3">
                <el-input v-model="reportForm.stationPeople" placeholder="" />
              </el-form-item>
            </div>
            
            <!-- 第五行 -->
            <div class="form-row">
              <el-form-item label="驻地风险等级" class="form-item-1-3">
                <el-select v-model="reportForm.riskLevel" placeholder="请选择" style="width: 100%">
                  <el-option label="高" value="high" />
                  <el-option label="中" value="medium" />
                  <el-option label="低" value="low" />
                </el-select>
              </el-form-item>
              <el-form-item label="房建类型" class="form-item-1-3">
                <el-select v-model="reportForm.buildingType" placeholder="请选择" style="width: 100%">
                  <el-option label="类型1" value="type1" />
                  <el-option label="类型2" value="type2" />
                </el-select>
              </el-form-item>
              <el-form-item label="搬迁状态" class="form-item-1-3">
                <el-select v-model="reportForm.relocationStatus" placeholder="请选择" style="width: 100%">
                  <el-option label="是" value="yes" />
                  <el-option label="否" value="no" />
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!-- 项目联系人信息 -->
        <div class="form-section">
          <div class="section-title">项目联系人信息</div>
          <el-form :model="reportForm" label-width="200px" class="report-form">
            <!-- 第一行 -->
            <div class="form-row">
              <el-form-item label="吹哨人姓名" class="form-item-1-2">
                <el-input v-model="reportForm.whistleblowerName" placeholder="" />
              </el-form-item>
              <el-form-item label="吹哨人电话" class="form-item-1-2">
                <el-input v-model="reportForm.whistleblowerPhone" placeholder="" />
              </el-form-item>
            </div>
            
            <!-- 第二行 -->
            <div class="form-row">
              <el-form-item label="建设单位包保责任人姓名" class="form-item-1-2">
                <el-input v-model="reportForm.constructorResponsibleName" placeholder="" />
              </el-form-item>
              <el-form-item label="建设单位包保责任人电话" class="form-item-1-2">
                <el-input v-model="reportForm.constructorResponsiblePhone" placeholder="" />
              </el-form-item>
            </div>
            
            <!-- 第三行 -->
            <div class="form-row">
              <el-form-item label="施工单位包保责任人姓名" class="form-item-1-2">
                <el-input v-model="reportForm.builderResponsibleName" placeholder="" />
              </el-form-item>
              <el-form-item label="施工单位包保责任人电话" class="form-item-1-2">
                <el-input v-model="reportForm.builderResponsiblePhone" placeholder="" />
              </el-form-item>
            </div>
            
            <!-- 第四行 -->
            <div class="form-row">
              <el-form-item label="驻地包保责任人姓名" class="form-item-1-2">
                <el-input v-model="reportForm.stationResponsibleName" placeholder="" />
              </el-form-item>
              <el-form-item label="驻地包保责任人电话" class="form-item-1-2">
                <el-input v-model="reportForm.stationResponsiblePhone" placeholder="" />
              </el-form-item>
            </div>
            
            <!-- 第五行 -->
            <div class="form-row">
              <el-form-item label="区县级包保责任人姓名" class="form-item-1-2">
                <el-input v-model="reportForm.countyResponsibleName" placeholder="" />
              </el-form-item>
              <el-form-item label="区县级包保责任人电话" class="form-item-1-2">
                <el-input v-model="reportForm.countyResponsiblePhone" placeholder="" />
              </el-form-item>
            </div>
            
            <!-- 第六行 -->
            <div class="form-row">
              <el-form-item label="市级包保责任人姓名" class="form-item-1-2">
                <el-input v-model="reportForm.cityResponsibleName" placeholder="选填" />
              </el-form-item>
              <el-form-item label="市级包保责任人电话" class="form-item-1-2">
                <el-input v-model="reportForm.cityResponsiblePhone" placeholder="选填" />
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!-- 驻地情况 -->
        <div class="form-section">
          <div class="section-title">驻地情况</div>
          <div class="upload-area">
            <div class="upload-box" @click="handleUploadImage">
              <el-icon class="upload-icon"><Plus /></el-icon>
            </div>
          </div>
        </div>

        <!-- 现场情况 -->
        <div class="form-section">
          <div class="section-title">现场情况</div>
          <el-input
            v-model="reportForm.sceneDescription"
            type="textarea"
            :rows="3"
            placeholder=""
          />
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="confirmReport">确认</el-button>
        <el-button @click="reportDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

// 搜索表单
const searchForm = reactive({
  title: "",
  type: "",
  level: "",
  response: "",
});

// 表格数据
const tableData = ref([
  {
    title: "重庆市忠县气象台发布大雾黄色预警[III级/较重]",
    type: "大雾预警",
    sendTime: "2026-03-10 16:50:02",
    effectTime: "2026-03-10 16:50:02",
    receiveTime: "2026-03-10 16:50:02",
    forwardTime: "2026-03-10 16:50:02",
    endTime: "-",
    affectCount: "2",
    response: "1/2",
    description: "",
    responseMeasures: "",
  },
  {
    title: "重庆市万州区气象台发布暴雨橙色预警[II级/严重]",
    type: "暴雨预警",
    sendTime: "2026-03-09 14:30:00",
    effectTime: "2026-03-09 14:30:00",
    receiveTime: "2026-03-09 14:30:00",
    forwardTime: "2026-03-09 14:30:00",
    endTime: "2026-03-10 08:00:00",
    affectCount: "5",
    response: "5/5",
    description: "",
    responseMeasures: "",
  },
  {
    title: "重庆市涪陵区气象台发布冰雪黄色预警[III级/较重]",
    type: "冰雪预警",
    sendTime: "2026-03-08 09:15:00",
    effectTime: "2026-03-08 09:15:00",
    receiveTime: "2026-03-08 09:15:00",
    forwardTime: "2026-03-08 09:15:00",
    endTime: "-",
    affectCount: "3",
    response: "2/3",
    description: "",
    responseMeasures: "",
  },
]);

// 过滤后的表格数据
const filteredTableData = computed(() => {
  return tableData.value.filter((item) => {
    const matchTitle = !searchForm.title || item.title.includes(searchForm.title);
    const matchType = !searchForm.type || item.type.includes(searchForm.type === 'fog' ? '大雾' : searchForm.type === 'rain' ? '暴雨' : searchForm.type === 'snow' ? '冰雪' : '大风');
    return matchTitle && matchType;
  });
});

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(3);

// 表头样式
const headerCellStyle = () => ({
  background: "#e6f0ff",
  color: "#303133",
  fontWeight: "bold",
  fontSize: "14px",
  padding: "12px 0",
});

// 行样式
const rowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? "even-row" : "odd-row";
};

// 获取预警类型样式
const getTypeClass = (type) => {
  const classMap = {
    "大雾预警": "type-fog",
    "暴雨预警": "type-rain",
    "冰雪预警": "type-snow",
    "大风预警": "type-wind",
  };
  return classMap[type] || "";
};

// 分页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
};

// 详情弹窗
const detailDialogVisible = ref(false);
const currentRow = ref({});

// 详情筛选
const detailFilter = reactive({
  stationName: "",
  responseStatus: "",
});

// 影响情况数据
const impactTableData = ref([
  {
    stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部",
    stationAddress: "沙坪坝区井口街道南溪村茅山峡公路跨线桥处",
    stationPeople: "16",
    firstResponseTime: "2026-01-19 21:39:53",
    latestResponseTime: "2026-01-20 21:39:53",
    urgeTime: "-",
    responseStatus: "已响应",
  },
  {
    stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部",
    stationAddress: "沙坪坝区井口街道南溪村茅山峡公路跨线桥处",
    stationPeople: "16",
    firstResponseTime: "2026-01-19 21:39:53",
    latestResponseTime: "2026-01-20 21:39:53",
    urgeTime: "2026-01-20 21:39:53",
    responseStatus: "已响应",
  },
  {
    stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部",
    stationAddress: "沙坪坝区井口街道南溪村茅山峡公路跨线桥处",
    stationPeople: "16",
    firstResponseTime: "2026-01-19 21:39:53",
    latestResponseTime: "-",
    urgeTime: "2026-01-20 21:39:53",
    responseStatus: "未响应（已催告）",
  },
]);

// 过滤后的影响情况数据
const filteredImpactData = computed(() => {
  return impactTableData.value.filter((item) => {
    const matchStation = !detailFilter.stationName || 
      item.stationName.includes(detailFilter.stationName) ||
      item.stationAddress.includes(detailFilter.stationName);
    const matchResponse = !detailFilter.responseStatus || 
      (detailFilter.responseStatus === 'responded' && item.responseStatus.includes('已响应')) ||
      (detailFilter.responseStatus === 'unresponded' && item.responseStatus.includes('未响应'));
    return matchStation && matchResponse;
  });
});

// 影响情况表格表头样式
const impactHeaderCellStyle = () => ({
  background: '#e6f0ff',
  color: '#303133',
  fontWeight: 'bold',
  fontSize: '14px',
  padding: '12px 0',
});

// 影响情况表格单元格样式
const impactCellStyle = () => ({
  padding: '10px 0',
  fontSize: '13px',
  color: '#606266',
});

// 获取响应情况样式
const getResponseStatusClass = (status) => {
  if (status === '已响应') {
    return 'status-responded';
  } else if (status.includes('未响应')) {
    return 'status-unresponded';
  }
  return '';
};

// 巡查记录
const handleCheckRecord = (row) => {
  ElMessage.info(`查看 ${row.stationName} 的巡查记录`);
};

// 上报
const handleReport = (row) => {
  ElMessage.info(`上报 ${row.stationName}`);
};

// 查看详情
const handleDetail = (row) => {
  currentRow.value = { ...row };
  detailDialogVisible.value = true;
};

// 上报项目弹窗
const reportDialogVisible = ref(false);
const reportForm = reactive({
  // 工程状态
  projectStatus: "building",
  // 项目信息
  district: "",
  projectName: "",
  stationName: "",
  stationType: "",
  longitude: "",
  latitude: "",
  parentProjectName: "",
  projectType: "",
  constructionUnit: "",
  builderUnit: "",
  adminArea: "",
  stationPeople: "",
  riskLevel: "",
  buildingType: "",
  relocationStatus: "no",
  // 项目联系人信息
  whistleblowerName: "",
  whistleblowerPhone: "",
  constructorResponsibleName: "",
  constructorResponsiblePhone: "",
  builderResponsibleName: "",
  builderResponsiblePhone: "",
  stationResponsibleName: "",
  stationResponsiblePhone: "",
  countyResponsibleName: "",
  countyResponsiblePhone: "",
  cityResponsibleName: "",
  cityResponsiblePhone: "",
  // 现场情况
  sceneDescription: "",
});

// 上传图片
const handleUploadImage = () => {
  ElMessage.info("请选择要上传的图片");
};

// 上报项目
const handleReportProject = () => {
  reportDialogVisible.value = true;
};

// 确认上报
const confirmReport = () => {
  if (!reportForm.projectName) {
    ElMessage.warning("请输入项目名称");
    return;
  }
  ElMessage.success("项目上报成功");
  reportDialogVisible.value = false;
  // 重置表单
  Object.assign(reportForm, {
    projectStatus: "building",
    district: "",
    projectName: "",
    stationName: "",
    stationType: "",
    longitude: "",
    latitude: "",
    parentProjectName: "",
    projectType: "",
    constructionUnit: "",
    builderUnit: "",
    adminArea: "",
    stationPeople: "",
    riskLevel: "",
    buildingType: "",
    relocationStatus: "no",
    whistleblowerName: "",
    whistleblowerPhone: "",
    constructorResponsibleName: "",
    constructorResponsiblePhone: "",
    builderResponsibleName: "",
    builderResponsiblePhone: "",
    stationResponsibleName: "",
    stationResponsiblePhone: "",
    countyResponsibleName: "",
    countyResponsiblePhone: "",
    cityResponsibleName: "",
    cityResponsiblePhone: "",
    sceneDescription: "",
  });
};
</script>

<style lang="scss" scoped>
.warning-county-page {
  padding: 20px;
  background: #fff;
  min-height: 100vh;

  // 搜索区域
  .search-area {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;

    .search-item {
      display: flex;
      align-items: center;
      gap: 8px;

      .search-label {
        font-size: 14px;
        color: #606266;
        white-space: nowrap;
      }
    }
  }

  // 操作区域
  .action-area {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;

    .report-btn {
      background: #409eff;
      border-color: #409eff;
    }
  }

  // 表格区域
  .table-area {
    margin-bottom: 20px;

    :deep(.el-table) {
      border: 1px solid #ebeef5;
      border-radius: 4px;

      .el-table__header-wrapper {
        th {
          background: #e6f0ff !important;
        }
      }

      .even-row {
        background: #f5f9ff;
      }

      .odd-row {
        background: #fff;
      }

      // 预警类型样式
      .type-fog {
        color: #e6a23c;
      }

      .type-rain {
        color: #409eff;
      }

      .type-snow {
        color: #909399;
      }

      .type-wind {
        color: #67c23a;
      }
    }
  }

  // 分页区域
  .pagination-area {
    display: flex;
    justify-content: flex-end;

    :deep(.el-pagination) {
      .btn-prev,
      .btn-next {
        padding: 0 15px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background: #fff;
        color: #606266;

        &:hover {
          color: #409eff;
          border-color: #409eff;
        }

        &.disabled {
          color: #c0c4cc;
          border-color: #e4e7ed;
        }
      }

      .el-pager {
        li {
          min-width: 32px;
          height: 32px;
          line-height: 32px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          margin: 0 4px;
          background: #fff;
          color: #606266;

          &.active {
            background: #409eff;
            border-color: #409eff;
            color: #fff;
          }

          &:hover {
            color: #409eff;
            border-color: #409eff;
          }

          &.active:hover {
            color: #fff;
          }
        }
      }

      .el-pagination__jump {
        margin-left: 15px;
        color: #606266;
      }
    }
  }
}

// 详情弹窗样式
:deep(.warning-detail-dialog) {
  .el-dialog__header {
    padding: 15px 20px;
    border-bottom: 1px solid #e4e7ed;
    margin-right: 0;

    .el-dialog__title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }
  }

  .el-dialog__body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .detail-content {
    .detail-section {
      margin-bottom: 20px;

      .section-title {
        font-size: 15px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 4px solid #409eff;
      }

      .basic-info-box {
        background: #f5f7fa;
        border-radius: 4px;
        padding: 15px 20px;

        .info-row {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }

          &.full-width {
            .info-item {
              flex: 1 1 100%;
            }
          }

          .info-item {
            flex: 1 1 33.33%;
            min-width: 250px;
            display: flex;
            align-items: flex-start;
            line-height: 1.6;

            .info-label {
              color: #606266;
              font-size: 13px;
              white-space: nowrap;
              flex-shrink: 0;
            }

            .info-value {
              color: #303133;
              font-size: 13px;
              flex: 1;
              word-break: break-all;
            }
          }
        }
      }

      .filter-bar {
        display: flex;
        gap: 20px;
        margin-bottom: 15px;
        padding: 10px 0;

        .filter-item {
          display: flex;
          align-items: center;
          gap: 8px;

          .filter-label {
            font-size: 13px;
            color: #606266;
            white-space: nowrap;
          }
        }
      }

      .table-wrapper {
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;

        // 响应情况样式
        .status-responded {
          color: #67c23a;
        }

        .status-unresponded {
          color: #f56c6c;
        }
      }
    }
  }
}

// 上报项目弹窗样式
:deep(.report-project-dialog) {
  .el-dialog__header {
    padding: 15px 20px;
    border-bottom: 1px solid #e4e7ed;
    margin-right: 0;
    text-align: center;

    .el-dialog__title {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
    }
  }

  .el-dialog__body {
    padding: 20px;
    max-height: 65vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .el-dialog__footer {
    border-top: 1px solid #e4e7ed;
    padding: 15px 20px;
    text-align: center;

    .el-button {
      min-width: 100px;
      margin: 0 10px;
    }
  }

  .report-form-content {
    .form-section {
      margin-bottom: 25px;

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        font-size: 14px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 4px solid #409eff;
      }

      .report-form {
        .el-form-item {
          margin-bottom: 15px;

          .el-form-item__label {
            font-size: 13px;
            color: #606266;
          }
        }

        .form-row {
          display: flex;
          gap: 20px;
          margin-bottom: 0;

          .form-item-1-3 {
            flex: 1;
            min-width: 0;
          }

          .form-item-1-2 {
            flex: 1;
            min-width: 0;
          }

          .form-item-2-3 {
            flex: 2;
            min-width: 0;
          }
        }

        .coordinate-inputs {
          display: flex;
          align-items: center;
          gap: 10px;

          .coordinate-separator {
            color: #909399;
            font-size: 14px;
          }
        }
      }

      .upload-area {
        .upload-box {
          width: 80px;
          height: 80px;
          border: 1px dashed #dcdfe6;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: border-color 0.3s;

          &:hover {
            border-color: #409eff;
          }

          .upload-icon {
            font-size: 24px;
            color: #909399;
          }
        }
      }
    }
  }
}
:deep(.el-overlay-dialog){
    overflow: none;
}
</style>
