<template>
  <base-dialog
    v-model:visible="props.visible"
    title="响应情况"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="300"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    :z-index="1000"
    :max-width="1000"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  >
    <!-- 筛选区域插槽 -->
    <template #filter>
      <div class="filter-row">
        <div class="filter-item">
          <el-select :teleported="false"
            v-model="filterForm.warningLevel"
            placeholder="预警等级"
            class="filter-select"
          >
            <el-option
              v-for="option in warningLevelOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <el-select :teleported="false"
            v-model="filterForm.region"
            placeholder="影响区域"
            class="filter-select"
          >
            <el-option
              v-for="option in regionOptionsWithAll"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <el-select :teleported="false"
            v-model="filterForm.isEnded"
            placeholder="是否结束"
            class="filter-select"
          >
            <el-option
              v-for="option in isEndedOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <el-select :teleported="false"
            v-model="filterForm.isResponded"
            placeholder="是否回应"
            class="filter-select"
            
          >
            <el-option
              v-for="option in isRespondedOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <el-button type="primary" class="search-btn" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
        </div>
      </div>
    </template>

    <!-- 预警等级列插槽 -->
    <template #warningLevel="{ row }">
      <span class="warning-level" :class="row.levelClass">{{ row.warningLevel }}</span>
    </template>

    <!-- 已叫应列插槽 -->
    <template #called="{ row }">
      <span class="clickable-cell" @click="handleCalledClick(row)">{{ row.called }}</span>
    </template>
  </base-dialog>
</template>

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

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

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

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

// 表格列配置
const tableColumns = ref([
  { prop: "id", label: "序号", width: "" },
  { prop: "weatherSource", label: "气象来源", width: "" },
  { prop: "warningLevel", label: "预警等级", width: "", slot: "warningLevel" },
  { prop: "region", label: "影响区域", width: "" },
  { prop: "warningTime", label: "预警时间", width: "" },
  { prop: "endTime", label: "结束时间", width: "" },
  { prop: "impactPoints", label: "影响点数量", width: "" },
  { prop: "called", label: "已叫应", width: "", slot: "called" },
  { prop: "responded", label: "已回应", width: "" },
  { prop: "notResponded", label: "未回应", width: "" },
  { prop: "urged", label: "已催告", width: "" },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    weatherSource: "气象局",
    warningLevel: "红色预警",
    levelClass: "level-red",
    region: "万州区",
    warningTime: "2025-08-11 04:53:42",
    endTime: "2025-08-11 04:53:42",
    impactPoints: 4,
    called: 2,
    responded: 2,
    notResponded: 2,
    urged: 22,
  },
  {
    id: 2,
    weatherSource: "气象局",
    warningLevel: "橙色预警",
    levelClass: "level-orange",
    region: "涪陵区",
    warningTime: "2025-08-11 04:53:42",
    endTime: "2025-08-11 04:53:42",
    impactPoints: 0,
    called: 0,
    responded: 0,
    notResponded: 0,
    urged: 18,
  },
]);
tableData.value.push(...tableData.value);
tableData.value.push(...tableData.value);
tableData.value.push(...tableData.value);

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

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

// 表格样式
const headerCellStyle = () => {
  return {
    backgroundColor: '#1C4979',
    color: '#fff',
    fontSize: '14px',
    fontWeight: '500',
    textAlign: 'center',
    padding: '12px 16px',
    border: 'none'
  };
};

const cellStyle = () => {
  return {
    backgroundColor: 'transparent',
    color: 'rgba(255, 255, 255, 0.85)',
    fontSize: '13px',
    textAlign: 'center',
    padding: '12px 16px',
    border: 'none'
  };
};

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

// 点击遮罩关闭已由base-dialog组件处理

// 点击已叫应
const handleCalledClick = () => {
  emit("responseStatus");
};

// 查询
const handleSearch = () => {
  console.log("查询条件:", filterForm.value);
  currentPage.value = 1;
  fetchData();
};

// 分页操作
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-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-item {
  .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;

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

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

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

  .search-btn {
    background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
    border: none;
    border-radius: 4px;
    padding: 0 20px;
    height: 32px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;

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

    .el-icon {
      font-size: 14px;
    }
  }
}

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

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

  &.level-orange {
    background-color: rgba(255, 122, 69, 0.2);
    color: #ff7a45;
    border: 1px solid rgba(255, 122, 69, 0.4);
  }

  &.level-yellow {
    background-color: rgba(250, 219, 95, 0.2);
    color: #fadb5f;
    border: 1px solid rgba(250, 219, 95, 0.4);
  }

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

// 可点击单元格样式
.clickable-cell {
  cursor: pointer;
  color: #40a9ff;
  font-weight: 500;
  transition: all 0.3s;

  &:hover {
    color: #69c0ff;
    text-shadow: 0 0 8px rgba(105, 192, 255, 0.6);
  }
}

// 下拉菜单样式
:deep(.el-select-dropdown) {
  background-color: rgba(20, 50, 90, 0.98);
  border: 1px solid rgba(64, 169, 255, 0.3);

  .el-select-dropdown__item {
    color: rgba(255, 255, 255, 0.85);

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

    &.selected {
      background-color: rgba(64, 169, 255, 0.3);
      color: #40a9ff;
    }
  }
}
</style>
