<template>
  <div v-if="visible" class="response-status-dialog-overlay" @click="handleOverlayClick">
    <div class="response-status-dialog" @click.stop>
      <!-- 标题栏 -->
      <div class="dialog-header">
        <div class="header-title">响应情况</div>
        <div class="close-btn" @click="handleClose">
          <el-icon><Close /></el-icon>
        </div>
      </div>

      <!-- 筛选区域 -->
      <div class="filter-section">
        <div class="filter-row">
          <div class="filter-item">
            <el-select v-model="filterForm.pointType" placeholder="影响点类型" class="filter-select">
              <el-option label="全部" value="" />
              <el-option label="边坡" value="slope" />
              <el-option label="桥梁" value="bridge" />
              <el-option label="隧道" value="tunnel" />
              <el-option label="路面" value="road" />
            </el-select>
          </div>
          <div class="filter-item">
            <el-select v-model="filterForm.pointLevel" placeholder="影响点等级" class="filter-select">
              <el-option label="全部" value="" />
              <el-option label="一般隐患" value="normal" />
              <el-option label="重大隐患" value="serious" />
            </el-select>
          </div>
          <div class="filter-item">
            <el-select v-model="filterForm.isResponded" placeholder="是否回应" class="filter-select">
              <el-option label="全部" value="" />
              <el-option label="是" value="yes" />
              <el-option label="否" value="no" />
            </el-select>
          </div>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-section">
        <div class="table-header">
          <div class="th" style="width: 50px">序号</div>
          <div class="th" style="width: 80px">影响点类型</div>
          <div class="th" style="width: 180px">影响点位置</div>
          <div class="th" style="width: 90px">影响点等级</div>
          <div class="th" style="width: 60px">查次数</div>
          <div class="th" style="width: 120px">交通主管部门负责人</div>
          <div class="th" style="width: 110px">公路机构责任人</div>
          <div class="th" style="width: 110px">养护站负责人</div>
          <div class="th" style="width: 80px">护路员</div>
          <div class="th" style="width: 70px">回应状态</div>
          <div class="th" style="width: 110px">最新催告时间</div>
          <div class="th" style="width: 50px">操作</div>
        </div>
        <div class="table-body">
          <div
            v-for="(item, index) in tableData"
            :key="item.id"
            class="table-row"
            :class="{ 'row-even': index % 2 === 1 }"
          >
            <div class="td" style="width: 50px">{{ item.id }}</div>
            <div class="td" style="width: 80px">{{ item.pointType }}</div>
            <div class="td" style="width: 180px">{{ item.pointLocation }}</div>
            <div class="td" style="width: 90px">
              <span class="level-tag" :class="item.levelClass">{{ item.pointLevel }}</span>
            </div>
            <div class="td" style="width: 60px">{{ item.checkCount }}</div>
            <div class="td" style="width: 120px">
              <div class="person-info">
                <span class="person-name">{{ item.trafficDept.name }}</span>
                <span class="person-phone">{{ item.trafficDept.phone }}</span>
              </div>
            </div>
            <div class="td" style="width: 110px">
              <div class="person-info">
                <span class="person-name">{{ item.roadOrg.name }}</span>
                <span class="person-phone">{{ item.roadOrg.phone }}</span>
              </div>
            </div>
            <div class="td" style="width: 110px">
              <div class="person-info">
                <span class="person-name">{{ item.maintenance.name }}</span>
                <span class="person-phone">{{ item.maintenance.phone }}</span>
              </div>
            </div>
            <div class="td" style="width: 80px">
              <div class="person-info">
                <span class="person-name">{{ item.roadKeeper.name }}</span>
                <span class="person-phone">{{ item.roadKeeper.phone }}</span>
              </div>
            </div>
            <div class="td" style="width: 70px">
              <span class="response-status" :class="item.responseClass">{{ item.responseStatus }}</span>
            </div>
            <div class="td" style="width: 110px">
              <div class="time-info">
                <span class="time-date">{{ item.urgeTime.date }}</span>
                <span class="time-clock">{{ item.urgeTime.time }}</span>
              </div>
            </div>
            <div class="td" style="width: 50px">
              <span class="detail-link" @click="handleDetail(item)">详情</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <span class="total">共{{ total }}条数据</span>
        <div class="page-btns">
          <div class="page-btn" :class="{ disabled: currentPage === 1 }" @click="prevPage">
            <el-icon><ArrowLeft /></el-icon>
          </div>
          <div
            v-for="page in visiblePages"
            :key="page"
            class="page-btn"
            :class="{ active: currentPage === page }"
            @click="goToPage(page)"
          >
            {{ page }}
          </div>
          <div class="page-btn" :class="{ disabled: currentPage === totalPages }" @click="nextPage">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { Close, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";

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

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

// 筛选表单
const filterForm = ref({
  pointType: "",
  pointLevel: "",
  isResponded: "",
});

// 表格数据
const tableData = ref([
  {
    id: 1,
    pointType: "边坡",
    pointLocation: "武汉-大理(K1452+951至K1462+209)",
    pointLevel: "一般隐患",
    levelClass: "level-normal",
    checkCount: 2,
    trafficDept: { name: "罗宸", phone: "17623865172" },
    roadOrg: { name: "李海平", phone: "1372386532" },
    maintenance: { name: "苏祖兵", phone: "13594331090" },
    roadKeeper: { name: "凌承礼", phone: "1592393704" },
    responseStatus: "已回应",
    responseClass: "status-responded",
    urgeTime: { date: "2026-03-28", time: "12:30:00" },
  },
  {
    id: 12,
    pointType: "边坡",
    pointLocation: "武汉-大理(K1452+951至K1462+209)",
    pointLevel: "一般隐患",
    levelClass: "level-normal",
    checkCount: 2,
    trafficDept: { name: "罗宸", phone: "17623865172" },
    roadOrg: { name: "李海平", phone: "1372386532" },
    maintenance: { name: "苏祖兵", phone: "13594331090" },
    roadKeeper: { name: "凌承礼", phone: "1592393704" },
    responseStatus: "已回应",
    responseClass: "status-responded",
    urgeTime: { date: "2026-03-28", time: "12:30:00" },
  },
]);

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

const totalPages = computed(() => Math.ceil(total.value / pageSize.value));

const visiblePages = computed(() => {
  const pages = [];
  const maxVisible = 4;
  let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
  let end = Math.min(totalPages.value, start + maxVisible - 1);

  if (end - start + 1 < maxVisible) {
    start = Math.max(1, end - maxVisible + 1);
  }

  for (let i = start; i <= end; i++) {
    pages.push(i);
  }
  return pages;
});

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

// 点击遮罩关闭
const handleOverlayClick = () => {
  handleClose();
};

// 查看详情
const handleDetail = (item) => {
  emit("detail", item);
};

// 分页操作
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    fetchData();
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    fetchData();
  }
};

const goToPage = (page) => {
  currentPage.value = page;
  fetchData();
};

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

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

<style lang="scss" scoped>
.response-status-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.response-status-dialog {
  width: 1150px;
  background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
  border: 1px solid rgba(64, 169, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

// 标题栏
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;

  .header-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    padding: 8px 40px;
    background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
    border-bottom: 2px solid #40a9ff;
  }

  .close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 20px;
    transition: color 0.3s;

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

// 筛选区域
.filter-section {
  margin-bottom: 20px;

  .filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .filter-item {
    .filter-select {
      width: 150px;

      :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);
          }
        }
      }
    }
  }
}

// 表格区域
.table-section {
  background-color: rgba(30, 70, 120, 0.3);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;

  .table-header {
    display: flex;
    background-color: rgba(64, 169, 255, 0.2);
    padding: 12px 16px;

    .th {
      font-size: 13px;
      font-weight: 500;
      color: #fff;
      text-align: center;
    }
  }

  .table-body {
    max-height: 200px;
    overflow-y: auto;

    .table-row {
      display: flex;
      padding: 12px 16px;
      align-items: center;
      transition: background-color 0.3s;

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

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

      .td {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.85);
        text-align: center;

        .level-tag {
          display: inline-block;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 11px;

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

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

        .person-info {
          display: flex;
          flex-direction: column;
          gap: 2px;

          .person-name {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
          }

          .person-phone {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
          }
        }

        .response-status {
          font-size: 12px;

          &.status-responded {
            color: #52c41a;
          }

          &.status-unresponded {
            color: #ff7a45;
          }
        }

        .time-info {
          display: flex;
          flex-direction: column;
          gap: 2px;

          .time-date {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
          }

          .time-clock {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
          }
        }

        .detail-link {
          color: #40a9ff;
          cursor: pointer;
          font-size: 12px;

          &:hover {
            color: #69c0ff;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

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

  .total {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
  }

  .page-btns {
    display: flex;
    gap: 8px;

    .page-btn {
      min-width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(64, 169, 255, 0.1);
      border: 1px solid rgba(64, 169, 255, 0.2);
      border-radius: 4px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      transition: all 0.3s;

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

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

      &.disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
    }
  }
}

// 滚动条样式
.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #69c0ff 0%, #40a9ff 100%);
}

// 下拉菜单样式
: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>
