<!-- 灾害链影响点列表 -->
<template>
  <!-- 控制按钮 -->
  <div class="control-box">
    <el-button
      type="primary"
      @click="changeStatus"
      circle
      :title="`${statusStore.uiComponents.disasterChainPointShow.show ? '关闭' : '打开'}灾害链影响点列表`"
      >{{
        statusStore.uiComponents.disasterChainPointShow.show ? '-' : '+'
      }}</el-button
    >
  </div>
  <div
    class="disaster-list-box"
    v-show="statusStore.uiComponents.disasterChainPointShow.show"
  >
    <header class="table-title">
      <span>灾害链影响点列表({{ props.totalDataCount ?? props.tableDataList.length }})</span>
    </header>

    <!-- 搜索 -->
    <div class="search-box">
      <el-input
        v-model="conditions.tableData"
        placeholder="搜索表格数据..."
        class="search-data"
      />
      <el-select v-model="conditions.hiddenPoint" class="search-hidden-point">
        <el-option
            v-for="(opt, index) in selectOptions"
            :key="index"
            :label="opt.value === PointType.RISK_AREA || opt.value === InfrastructurePointType.HOSPITAL ? opt.label : `${opt.label}预警点`"
            :value="opt.value"
        />
      </el-select>
    </div>
    <!-- 表格 -->
    <div class="table-box">
      <el-table
          :data="paginatedData"
          border
          style="width: 100%"
          empty-text="暂无数据"
      >
        <el-table-column
            v-for="(row, index) in tableColumns"
            :key="index"
            :prop="row.key"
            :label="
            index == 0 ? `${conditions.hiddenPoint}${row.title}` : row.title
          "
        >
          <template #default="scope" v-if="row.key === 'position'">
            <div class="position-cell">
              <div>{{ scope.row.lon?.toFixed(4) }},</div>
              <div>{{ scope.row.lat?.toFixed(4) }}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-controls" v-if="showPagination">
      <button
        @click="prevPage"
        :disabled="isPrevDisabled"
        :class="{ disabled: pageOption.currentPage <= 1 }"
      >
        上一页
      </button>
      <span>{{ pageOption.currentPage }} / {{ pageOption.totalPage }}</span>
      <button
        @click="nextPage"
        :disabled="isNextDisabled"
        :class="{ disabled: isNextDisabled }"
      >
        下一页
      </button>
      <span class="total-items">共 {{ pageOption.total }} 条</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useStatusStore } from '@/stores/useStatusStore';
  import type { Point } from '@/types/base/Point';
  import { PointType } from '@/types/common/DisasterType';
  import { InfrastructurePointType } from '@/types/common/InfrastructurePointType';
  import type { PaginationType } from '@/types/common/PaginationType';
  import { ref, watch, computed, type Ref } from 'vue';

  const statusStore = useStatusStore();

  // 接收父组件的参数
  const props = defineProps<{
    selectOptions: { label: string; value: PointType | InfrastructurePointType }[];
    tableDataList: Point[];
    tableColumns: { title: string; key: string }[];
    pageOption: PaginationType;
    totalDataCount?: number; // 所有数据的总数
  }>();

  // 接收父组件方法
  const emits = defineEmits<{
    (
      e: 'changeConditions',
      value: { tableData: string; hiddenPoint: PointType | InfrastructurePointType }
    ): void;
    (e: 'changeCurrentPage', value: number): void;
  }>();

  // 搜索条件
  const conditions: Ref<{ tableData: string; hiddenPoint: PointType | InfrastructurePointType }> = ref({
    tableData: '',
    hiddenPoint: PointType.LANDSLIDE,
  });

  // ==================== 计算属性 ====================

  // 分页后的数据
  const paginatedData = computed(() => {
    const start = (props.pageOption.currentPage - 1) * props.pageOption.pageSize;
    const end = start + props.pageOption.pageSize;
    return props.tableDataList.slice(start, end);
  });

  // 是否显示分页
  const showPagination = computed(() => props.pageOption.totalPage !== 0);

  // 上一页是否禁用
  const isPrevDisabled = computed(() => props.pageOption.currentPage <= 1);

  // 下一页是否禁用
  const isNextDisabled = computed(
    () => props.pageOption.currentPage >= props.pageOption.totalPage
  );

  // ==================== 事件处理 ====================

  // 切换面板显示状态
  const changeStatus = () => {
    statusStore.uiComponents.disasterChainPointShow.show =
      !statusStore.uiComponents.disasterChainPointShow.show;
  };

  // 上一页
  const prevPage = () => {
    if (!isPrevDisabled.value) {
      emits('changeCurrentPage', props.pageOption.currentPage - 1);
    }
  };

  // 下一页
  const nextPage = () => {
    if (!isNextDisabled.value) {
      emits('changeCurrentPage', props.pageOption.currentPage + 1);
    }
  };

  // ==================== 监听器 ====================

  // 监听搜索条件变化
  watch(
    conditions,
    () => {
      emits('changeConditions', conditions.value);
    },
    { deep: true }
  );
</script>

<style scoped>
  .control-box {
    position: absolute;
    top: 125px;
    left: 30px;
    z-index: 1001;
  }
  .disaster-list-box {
    position: absolute;
    top: 115px;
    left: 20px;
    background: rgba(14, 52, 98, 0.8);
    color: white;
    padding: 15px;
    border-radius: 2px;
    z-index: 1000;
    width: 500px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    border: 1px solid rgba(0, 225, 255, 0.5);
  }
  .table-title {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 16px;
    text-align: center;
    margin-top: 0;
    padding-top: 0px;
    color: white;
  }
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
  }
  .search-data {
    width: 75%;
  }
  .search-hidden-point {
    width: 25%;
  }
  .search-data,
  .search-hidden-point {
    background: rgba(15, 61, 118, 0.6);
    border-radius: 4px;
    border: 1px solid rgb(0, 225, 255);
    box-sizing: border-box;
    color: white;
  }

  :deep(.el-input__wrapper),
  :deep(.el-select__wrapper) {
    background: transparent;
  }
  :deep(.el-input__inner),
  :deep(.el-select__selected-item) {
    color: white;
  }
  /* 减小表格行的上下间距 */
  :deep(.el-table .el-table__cell) {
    padding: 6px 0;
  }
  :deep(.el-table--border th) {
    background: linear-gradient(
      180deg,
      rgb(86, 204, 242) 0%,
      rgb(47, 128, 237) 100%
    );
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 12px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
  }
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: rgba(15, 61, 118, 0.6);
    color: white;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
  }
  .el-table {
    --el-table-row-hover-bg-color: transparent;
  }

  .pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    gap: 10px;
  }
  .pagination-controls button:disabled {
    background-color: #373e52;
    cursor: not-allowed;
  }
  .pagination-controls span {
    font-size: 14px;
    font-weight: bold;
    color: white;
  }
  .pagination-controls button {
    background-color: #3c86ff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  /* 名称列样式：一行显示，超出隐藏 */
  :deep(.el-table .el-table__row td:first-child .cell) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  /* 鼠标悬浮时显示完整名称 */
  :deep(.el-table .el-table__row td:first-child:hover .cell) {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-all;
  }

  /* 位置列样式：经纬度两行显示 */
  .position-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.5;
  }
</style>