<template>
  <div class="pagination-container">
    <el-pagination
    class="pagination"
      :background="background"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :layout="layout"
      size="small"
      :page-sizes="pageSizes"
      :pager-count="pagerCount"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { scrollTo } from '@/utils/scroll-to'

const props = defineProps({
  total: {
    required: true,
    type: Number
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 10
  },
  pageSizes: {
    type: Array,
    default() {
      return [10, 20, 30, 50]
    }
  },
  // 移动端页码按钮的数量端默认值5
  pagerCount: {
    type: Number,
    default: document.body.clientWidth < 992 ? 5 : 7
  },
  layout: {
    type: String,
    default: ' prev, pager, next'
  },
  background: {
    type: Boolean,
    default: true
  },
  autoScroll: {
    type: Boolean,
    default: true
  },
  hidden: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits();
const currentPage = computed({
  get() {
    return props.page
  },
  set(val) {
    emit('update:page', val)
  }
})
const pageSize = computed({
  get() {
    return props.limit
  },
  set(val){
    emit('update:limit', val)
  }
})
function handleSizeChange(val) {
  if (currentPage.value * val > props.total) {
    currentPage.value = 1
  }
  emit('pagination', { page: currentPage.value, limit: val })
  if (props.autoScroll) {
    scrollTo(0, 800)
  }
}
function handleCurrentChange(val) {
  emit('pagination', { page: val, limit: pageSize.value })
  if (props.autoScroll) {
    scrollTo(0, 800)
  }
}

</script>

<style lang="scss" scoped>
.pagination-container {
  width: 100%;
  // height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
:deep(.el-pagination) {
  border: 1px solid #4c4f5f;
  border-radius: 8px;
  background-color: #343744;
  padding: 0;
  --el-pagination-bg-color: #343744;
  --el-pagination-text-color: #fff;
  --el-pagination-button-color: #fff;
  --el-pagination-hover-color: #409eff;
  --el-disabled-bg-color: transparent;

  .el-pagination__total,
  .el-pagination__jump,
  .btn-prev,
  .btn-next {
    color: #96a0b5;
    background-color: transparent;
    margin:0;
  }
  
  // 上一页/下一页按钮样式
  .btn-prev,
  .btn-next {
    width: 45px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    // border-right: 1px solid #4c4f5f;
    
    &:hover:not(.is-disabled) {
      background-color: transparent;
      color: #409eff;
    }
  }
  
  // 最后一个按钮不需要右边框
  .btn-next:last-child {
    border-right: none;
  }
  
  // 禁用状态的上一页/下一页按钮样式
  .btn-prev.is-disabled,
  .btn-next.is-disabled {
    background-color: transparent !important;
    color: #606266;
    opacity: 0.5;
    
    &:hover {
      background-color: transparent !important;
      border-color: transparent !important;
    }
  }

  .el-pager li {
    .number {
      padding: 0;
    }

    margin: 0;
    width: 45px;
    height: 30px;
    border-right: 1px solid #4c4f5f;
    background-color: transparent;
    color: #96a0b5;

    &.is-active {
      color: #409eff;
      background-color: transparent;
    }
    
    &:hover {
      color: #409eff;
      background-color: transparent;
      border-color: #4c4f5f;
    }
    
    // 最后一个页码不需要右边框
    &:first-child {
      border-left: 1px solid #4c4f5f;
    }
    
    // 更多按钮（省略号）样式
    &.more {
      background-color: transparent;
      color: #96a0b5;
      
      &:hover {
        background-color: transparent;
        color: #409eff;
      }
    }
  }
}

// .pagination {
//   display: flex;
//   justify-content: flex-end;
//   align-items: center;
//   width: 100%;

// 覆盖Element Plus分页组件的默认样式
// :deep(.el-pagination) {
//   padding: 0;
//   background: none;
//   border: 1px solid #0a4273;
//   box-sizing: border-box;
//   color: #fff;
//   font-weight: normal;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   border: 1px solid #4C4F5F; // 添加整体灰色边框
//   border-radius: 4px;
//   overflow: hidden; // 防止内部元素溢出

//   // 总体布局调整
//   .el-pagination__total,
//   .el-pagination__sizes,
//   .el-pagination__jump {
//     margin: 0;
//     color: #fff;
//     padding: 0 10px;
//     border-right: 1px solid #4C4F5F;
//     height: 30px;
//     line-height: 30px;
//   }

//   // 按钮统一样式
//   button, li {
//     border: 1px solid red!important;
//     min-width: 30px;
//     height: 30px;
//     line-height: 30px;
//     text-align: center;
//     margin: 0; // 取消间距
//     color: #fff;
//     border-radius: 0; // 取消圆角
//     background-color: #343744;
//     border-right: 1px solid #4C4F5F; // 添加右边框
//     transition: all 0.3s;
//     font-size: 14px;

//     &:last-child {
//       border-right: none; // 最后一个元素不需要右边框
//     }

//     &:hover {
//       background-color: #5690E7;
//     }

//     // 当前页面样式 - 选中状态
//     &.is-active {
//       color: #fff;
//       background-color: #5690E7;
//       font-weight: bold;
//     }

//     // 禁用状态
//     &.is-disabled {
//       background-color: #343744;
//       color: #606266;
//       opacity: 0.5;
//       cursor: not-allowed;

//       &:hover {
//         background-color: #343744;
//         border:1px solid #347AE2;
//       }
//     }
//   }

//     // 页码按钮样式
//     .el-pager {
//       display: flex;
//       align-items: center;
//       margin: 0;
//       padding: 0;
//       background-color: #343744;

//       li {
//         background-color: #343744;
//         color: #fff;
//         border-radius: 0;
//         margin: 0;
//         list-style: none;
//         border-right: 1px solid #4C4F5F; // 添加右边框

//         &:last-child {
//           border-right: none; // 最后一个元素不需要右边框
//         }

//         &.is-active {
//           background-color: #5690E7;
//           color: #fff;
//         }

//         &.is-disabled {
//           color: #606266;
//         }

//         // 更多按钮样式
//         &.more {
//           color: #fff;
//           background-color: #343744;

//           &:hover {
//             background-color: #444956;
//           }
//         }
//       }
//     }

//     // 上一页、下一页按钮
//     .btn-prev, .btn-next {
//       background-color: #343744;
//       color: #fff;
//       border-radius: 0;
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       border-right: 1px solid #4C4F5F; // 添加右边框

//       &:last-child {
//         border-right: none; // 最后一个元素不需要右边框
//       }

//       &:hover {
//         background-color: #5690E7;
//       }

//       &.is-disabled {
//         color: #606266;
//         background-color: #343744;
//         opacity: 0.5;

//         &:hover {
//           background-color: #343744;
//         }
//       }

//       .el-icon {
//         font-size: 12px;
//       }
//     }

//     // 输入框样式
//     .el-pagination__editor {
//       &.el-input {
//         width: 50px;
//         margin: 0;

//         .el-input__wrapper {
//           background-color: #343744;
//           box-shadow: none;
//           border-radius: 0;

//           .el-input__inner {
//             color: #fff;
//             height: 32px;
//             text-align: center;
//           }
//         }
//       }
//     }

//     // 每页条数选择器
//     .el-pagination__sizes {
//       .el-select {
//         .el-input {
//           .el-input__wrapper {
//             background-color: #343744;
//             box-shadow: none;

//             .el-input__inner {
//               color: #fff;
//             }
//           }
//         }

//         .el-select-dropdown__item {
//           color: #fff;
//           background-color: #343744;

//           &.selected {
//             color: #5690E7;
//           }

//           &:hover {
//             background-color: #444956;
//           }
//         }
//       }
//     }
//   }
// }
</style>
