<template>
  <base-dialog
    v-model:visible="props.visible"
    title="预警情况"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="tableHeight"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  >
    <!-- 筛选区域 -->
    <template #filter>
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-label">预警等级</span>
          <el-select
            v-model="filterForm.warningLevel"
            placeholder="请选择"
            class="filter-select"
            clearable
            size="small"
          >
            <el-option
              v-for="item in warningLevelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">影响区域</span>
          <el-select
            v-model="filterForm.region"
            placeholder="请选择"
            class="filter-select"
            clearable
            size="small"
          >
            <el-option
              v-for="item in regionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">是否结束</span>
          <el-select
            v-model="filterForm.isEnded"
            placeholder="请选择"
            class="filter-select"
            clearable
            size="small"
          >
            <el-option
              v-for="item in isEndedOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </template>

    <!-- 预警等级列插槽 -->
    <template #warningLevel="{ row }">
      <span
        :class="[
          'warning-level-tag',
          getWarningClass(row.warningLevel),
        ]"
        >{{ row.warningLevel }}</span
      >
    </template>

    <!-- 影响点数量列插槽 -->
    <template #impactCount="{ row }">
      <span class="impact-count" @click="handleImpactClick(row)">{{
        row.impactCount
      }}</span>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { Close } from "@element-plus/icons-vue";
import {
  warningLevelOptions,
  regionOptions,
  isEndedOptions,
} from "../component/index.js";
import baseDialog from "../component/baseDialog.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:visible", "close", "impactClick"]);

// 筛选表单
const filterForm = ref({
  warningLevel: "",
  region: "",
  isEnded: "",
  dateRange: [],
});

// 预警等级选项
// 已从 index.js 导入

// 影响区域选项
// 已从 index.js 导入

// 是否结束选项
// 已从 index.js 导入

// 表格高度
const tableHeight = ref(300);

// 表格列配置
const tableColumns = ref([
  { prop: 'index', label: '序号', width: '60' },
  { prop: 'warningLevel', label: '预警等级', width: '100', slot: 'warningLevel' },
  { prop: 'weatherType', label: '气象类型', width: '100' },
  { prop: 'region', label: '行政区域', width: '100' },
  { prop: 'warningTime', label: '预警时间', width: '160' },
  { prop: 'endTime', label: '结束时间', width: '160' },
  { prop: 'impactCount', label: '影响点数量', width: '100', slot: 'impactCount' },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    index: 1,
    warningLevel: "红色预警",
    weatherType: "暴雨",
    region: "重庆市",
    warningTime: "2025-08-11 04:53:42",
    endTime: "2025-08-11 04:53:42",
    impactCount: 0,
  },
  {
    id: 2,
    index: 2,
    warningLevel: "橙色预警",
    weatherType: "暴雨",
    region: "万州区",
    warningTime: "2025-08-11 04:53:42",
    endTime: "2025-08-11 04:53:42",
    impactCount: 1,
  },
  {
    id: 3,
    index: 3,
    warningLevel: "黄色预警",
    weatherType: "大风",
    region: "沙坪坝区",
    warningTime: "2025-08-10 16:20:15",
    endTime: "2025-08-10 20:30:00",
    impactCount: 3,
  },
  {
    id: 4,
    index: 4,
    warningLevel: "蓝色预警",
    weatherType: "雷电",
    region: "渝中区",
    warningTime: "2025-08-09 09:15:30",
    endTime: "2025-08-09 12:00:00",
    impactCount: 2,
  },
]);

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

// 获取预警等级样式类
const getWarningClass = (level) => {
  const classMap = {
    红色预警: "warning-red",
    橙色预警: "warning-orange",
    黄色预警: "warning-yellow",
    蓝色预警: "warning-blue",
  };
  return classMap[level] || "";
};

// 关闭对话框
const handleClose = () => {
  emit("update:visible", false);
  emit("close");
};

// 点击影响点数量
const handleImpactClick = (item) => {
  emit("impactClick", item);
};

// 分页操作
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

// 获取数据
const fetchData = () => {
  console.log("获取第", currentPage.value, "页数据");
  // 实际项目中调用API获取数据
};

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      currentPage.value = 1;
      fetchData();
    }
  },
);
</script>

<style lang="scss" scoped>


// 筛选区域
.filter-section {
  margin-bottom: 16px;
  padding: 0 24px;

  .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

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

    .filter-label {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      white-space: nowrap;
    }

    .filter-select {
      width: 120px;

      :deep(.el-input__wrapper) {
        background-color: rgba(30, 70, 120, 0.4);
        border: 1px solid rgba(64, 169, 255, 0.3);
        box-shadow: none;
        border-radius: 4px;
        width: 210px !important;

        .el-input__inner {
          color: #fff;
          font-size: 13px;

          &::placeholder {
            color: rgba(255, 255, 255, 0.4);
          }
        }

        .el-input__suffix {
          .el-icon {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }

    .date-range-picker {
      :deep(.el-input__wrapper) {
        background-color: rgba(30, 70, 120, 0.4);
        border: 1px solid rgba(64, 169, 255, 0.3);
        box-shadow: none;
        border-radius: 4px;
        width: 210px !important;

        .el-input__inner {
          color: #fff;
          font-size: 13px;
          background: transparent;

          &::placeholder {
            color: rgba(255, 255, 255, 0.4);
          }
        }

        .el-input__suffix {
          .el-icon {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }

      :deep(.el-range-input) {
        background: transparent;
        color: #fff;
        font-size: 13px;

        &::placeholder {
          color: rgba(255, 255, 255, 0.4);
        }
      }

      :deep(.el-range-separator) {
        color: rgba(255, 255, 255, 0.6);
        font-size: 13px;
      }
    }
  }
}

// 表格区域
.table-section {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 24px;

  :deep(.el-table) {
    background-color: transparent;
    border: none;

    .el-table__header-wrapper {
      background-color: transparent;
    }

    .el-table__body-wrapper {
      background-color: transparent;
    }

    .el-table__row {
      width: 100% !important;
      background-color: transparent;
      transition: background-color 0.3s;

      &:hover {
        background-color: rgba(64, 169, 255, 0.1);
      }

      &:nth-child(even) {
        background-color: rgba(30, 70, 120, 0.2);
      }
    }

    .el-table__cell {
      color: rgba(255, 255, 255, 0.85);
      font-size: 13px;
      text-align: center;
      border: none;
      padding: 12px 16px;
    }
    .el-table__header {
      width: 100% !important;
    }
    .el-table__header .el-table__cell {
      background-color: #1c4979;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      border: none;
      padding: 12px 16px;
    }
  }

  // 预警等级标签
  .warning-level-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;

    &.warning-red {
      background-color: rgba(255, 77, 79, 0.2);
      color: #ff4d4f;
      border: 1px solid rgba(255, 77, 79, 0.4);
    }

    &.warning-orange {
      background-color: rgba(255, 122, 0, 0.2);
      color: #ff7a00;
      border: 1px solid rgba(255, 122, 0, 0.4);
    }

    &.warning-yellow {
      background-color: rgba(250, 219, 20, 0.2);
      color: #fadb14;
      border: 1px solid rgba(250, 219, 20, 0.4);
    }

    &.warning-blue {
      background-color: rgba(64, 169, 255, 0.2);
      color: #40a9ff;
      border: 1px solid rgba(64, 169, 255, 0.4);
    }
  }

  // 影响点数量
  .impact-count {
    color: #ff4d4f;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;

    &:hover {
      color: #ff7875;
      text-shadow: 0 0 8px rgba(255, 77, 79, 0.6);
    }
  }
}

// 分页
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 12px;

  :deep(.el-pagination) {
    .el-pagination__total {
      color: rgba(255, 255, 255, 0.6);
      font-size: 13px;
    }

    .el-pagination__sizes .el-input__inner {
      color: #fff;
      background-color: rgba(30, 70, 120, 0.4);
      border: 1px solid rgba(64, 169, 255, 0.3);
      font-size: 13px;
    }

    .el-pagination__btn {
      color: rgba(255, 255, 255, 0.8);
      background-color: rgba(64, 169, 255, 0.1);
      border: 1px solid rgba(64, 169, 255, 0.2);
      border-radius: 4px;
      transition: all 0.3s;

      &:hover:not(.is-disabled) {
        background-color: rgba(64, 169, 255, 0.2);
        border-color: rgba(64, 169, 255, 0.4);
      }

      &.is-disabled {
        opacity: 0.4;
      }
    }

    .el-pagination__item {
      color: rgba(255, 255, 255, 0.8);
      background-color: rgba(64, 169, 255, 0.1);
      border: 1px solid rgba(64, 169, 255, 0.2);
      border-radius: 4px;
      transition: all 0.3s;

      &:hover:not(.is-disabled) {
        background-color: rgba(64, 169, 255, 0.2);
        border-color: rgba(64, 169, 255, 0.4);
      }

      &.is-active {
        background-color: #40a9ff;
        border-color: #40a9ff;
        color: #fff;
      }
    }

    .el-pagination__jump .el-input__inner {
      color: #fff;
      background-color: rgba(30, 70, 120, 0.4);
      border: 1px solid rgba(64, 169, 255, 0.3);
      font-size: 13px;
    }
  }
}
:deep(.el-table__body) {
  width: 100% !important;
}
// 隐藏滚动条
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  display: none;
}

:deep(.el-table__body-wrapper) {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>

<style lang="scss">
// 日期选择器弹出面板深色主题
.el-picker-panel {
  background: rgba(20, 50, 90, 0.98) !important;
  border: 1px solid rgba(64, 169, 255, 0.3) !important;

  .el-picker-panel__content {
    color: #fff;

    .el-date-table th {
      color: rgba(255, 255, 255, 0.6);
      border-bottom-color: rgba(64, 169, 255, 0.3);
    }

    .el-date-table td {
      color: rgba(255, 255, 255, 0.8);

      &.selected .el-date-table-cell {
        background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      }

      &.today span {
        color: #40a9ff;
        font-weight: bold;
      }

      &.in-range,
      &.start-date,
      &.end-date {
        background: rgba(64, 169, 255, 0.2);
      }
    }
  }

  .el-picker-panel__footer {
    border-top: 1px solid rgba(64, 169, 255, 0.3);

    .el-button {
      background: rgba(30, 70, 120, 0.4);
      border-color: rgba(64, 169, 255, 0.3);
      color: #fff;

      &:hover {
        background: rgba(64, 169, 255, 0.3);
      }
    }

    .el-button--primary {
      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
      border: none;

      &:hover {
        background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
      }
    }
  }
}

.el-table--fit .el-table__inner-wrapper:before {
  width: 0% !important;
}
</style>
