<template>
  <div class="m_pagination">
    <v-row v-if="pageDatas.rowCount > 0" class="pagination box" align="center">
      <span class="page-total d-none d-md-flex align-center">共{{ pageDatas.rowCount }}条</span>
      <v-select
        v-model="pagination.limit"
        :items="pageSizeObjs"
        variant="solo"
        density="compact"
        :menu-props="{ offsetY: true }"
        hide-details
        class="page-select ml-2 d-none d-md-flex"
        @update:model-value="pageSizeChange()"
      />
      <span class="my-2" style="font-size: 12px">
        <v-pagination
          v-model="pageDatas.pageno"
          :total-visible="6"
          :length="pageDatas.pageCount"
          @update:model-value="pageChange()"
        />
      </span>
      <span class="page-total ml-4 d-none d-md-flex align-center">到</span>
      <v-text-field
        v-model="pagination.pageno"
        variant="solo"
        density="compact"
        hide-details
        class="page-go ml-2 d-none d-md-flex"
        @keyup.enter="toPage()"
      />
      <span class="page-total ml-2 d-none d-md-flex align-center">页</span>
    </v-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue';

const props = defineProps({
  pageData: {
    type: Object,
    default: () => ({})
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30]
  }
});

const emit = defineEmits(['pageChange']);

const pagination = reactive({
  pageno: 1,
  limit: 10
});

const pageSizeObjs = ref([]);
const pageDatas = ref({ ...props.pageData });

const paginationChange = computed(() => pageDatas.value.pageno);

watch(paginationChange, () => {
  pagination.pageno = pageDatas.value.pageno;
});

watch(() => props.pageData, (newVal) => {
  pageDatas.value = { ...newVal };
  if (newVal.rowCount < 1 && newVal.rows > 0) {
    pageDatas.value.pageno = newVal.pageno - 1;
    pageChange();
  }
}, { deep: true });

onMounted(() => {
  pageSizeFormat();
});

const toPage = () => {
  const re = /^[0-9]+$/;
  if (re.test(pagination.pageno) && pagination.pageno <= pageDatas.value.pageCount) {
    pageDatas.value.pageno = parseInt(pagination.pageno);
    pageChange();
  } else {
    pagination.pageno = pageDatas.value.pageno;
  }
};

const pageSizeChange = () => {
  pageDatas.value.pageCount = 1;
  pageChange();
};

const pageSizeFormat = () => {
  const temp = props.pageSizes;
  temp.forEach((value) => {
    const obj = {
      title: value + "条/页",
      value: value
    };
    pageSizeObjs.value.push(obj);
  });
  pagination.limit = temp[0];
};

const pageChange = () => {
  const page = {
    pageno: pageDatas.value.pageno,
    limit: pagination.limit
  };
  emit('pageChange', page);
};
</script>

<style lang="scss" scoped>
.mt-1 {
  margin-top: 11px !important;
}
.my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.m_pagination {
  width: 100%;
  min-height: 60px;
  .box {
    position: absolute;
    right: 16px;
  }
}
.page-total {
  display: flex;
  align-items: center;
  height: 40px; // 与 v-select 高度保持一致
}
.page-select {
  max-width: 120px;
  :deep(.v-input__control) {
    min-height: 40px !important;
    height: 40px !important;
  }
  :deep(.v-field) {
    height: 40px !important;
  }
}
.page-go {
  max-width: 80px;
  :deep(.v-input__control) {
    min-height: 40px !important;
    height: 40px !important;
  }
  :deep(.v-field) {
    height: 40px !important;
  }
}
</style>