<template>
  <div class="page-div page" :class="{'first-and-end':isHasFirst}">
    <el-pagination
      :pager-count="5"
      :size="size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"

      :total="totalCount"
      v-bind="$attrs"
      layout="slot"

    >
      <slot></slot>
    </el-pagination>
    <el-pagination
      :pager-count="5"
      :size="size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"

      :total="totalCount"

      layout="sizes"

    >

    </el-pagination>
    <div class="page-about">
      <el-pagination
        :pager-count="5"
        :size="size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"

        :total="totalCount"
        v-bind="$attrs"
        layout="slot,prev,pager,next"

      >
        <el-button @click="handleCurrentChange(1)" v-if="isHasFirst" :disabled="currentPage === 1" class="first-page btn-prev" :icon="DArrowLeft"></el-button>
      </el-pagination>
      <el-pagination
        :pager-count="5"
        :size="size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"

        :total="totalCount"
        v-bind="$attrs"
        layout="slot"

      >
        <el-button v-if="isHasFirst" @click="handleCurrentChange(Math.ceil(totalCount/pageSize))" :disabled="Math.ceil(totalCount/pageSize) === currentPage" class="last-page btn-prev" :icon="DArrowRight"></el-button>
      </el-pagination>
    </div>
<!--    <Teleport to=".el-pagination">-->
<!--      <el-button @click="handleCurrentChange(1)" v-if="isHasFirst" :disabled="currentPage === 1" class="first-page btn-prev" :icon="DArrowLeft"></el-button>-->

<!--&lt;!&ndash;
<el-button v-if="isHasFirst" @click="handleCurrentChange(Math.ceil(totalCount/pageSize))" :disabled="Math.ceil(totalCount/pageSize) === currentPage" class="last-page btn-prev" :icon="DArrowRight"></el-button>&ndash;&gt;-->

<!--    </Teleport>-->
  </div>
</template>

<script>
import {DArrowLeft, DArrowRight} from "@element-plus/icons-vue";

export default {
  name: "ElePagination",
  computed: {
    DArrowRight() {
      return DArrowRight
    },
    DArrowLeft() {
      return DArrowLeft
    }
  },
  props: {
    isHasFirst:{
       default:true
    },
    size: {
      type: String,
      default: "middle"
    },

    pageSizes: {
      default() {
        return [8, 10, 20, 50]
      }
    },

    totalCount: {
      default: 400
    },
    defaultPageSize: {
      default: 8
    },
    initCount: {
      default: 1
    },
    layout: {
      default: "prev,pager,next,sizes"
    },

  },
  data() {
    return {
      currentPage: 1,
      pageSize: 8
    }
  },
  mounted() {
    if (+this.pageSize !== +this.defaultPageSize) {
      this.pageSize = this.defaultPageSize
    }

    this.$emit("sizeOrPageChange", this.currentPage, this.pageSize)
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.$emit("sizeOrPageChange", this.currentPage, size)
      // this.$emit('update:pageSize',size)
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.$emit("sizeOrPageChange", page, this.pageSize)
    },
    initPage() {
      this.pageSize = this.defaultPageSize
      this.currentPage = 1
      this.$emit("sizeOrPageChange", this.currentPage, this.pageSize)
    }
  },
  watch: {
    totalCount: {
      handler(val) {
        if (
          this.pageSize * this.currentPage > val &&
          val % this.pageSize === 0
        ) {
          this.$emit(
            "sizeOrPageChange",
            this.currentPage - 1 || 1,
            this.pageSize
          )
        }
      }
    },
    initCount: {
      handler() {
        this.initPage()
      }
    }
  }
}
</script>

<style  lang="scss" scoped>
.page-div{
  margin-top: 10px;
 :deep{
   .m-s{
     margin-top: 0;
   }
 }
  &.first-and-end{
    :deep{
      .el-pagination__sizes{
        margin-right: 20px !important;
      }
    }
  }
  display: flex;
  align-items: center;
}
.page :deep(.el-pagination__jump){
  margin-left: 0;
}
.page {
  text-align: center;

}
:deep(.el-pagination__sizes){
  margin: 0 0px;
  line-height: normal !important;
  .el-input--mini .el-input__inner,
  .el-select--mini,
  .select-trigger {
    height: 100%;
  }
  //line-height: auto;
}
.el-pagination :deep(.el-select .el-input){
  height: 100%;
  .el-input--mini .el-input__inner,
  .el-select--mini {
    height: 100%;
  }
}
.el-pagination{
  :deep{
    .btn-prev{
      margin-left: 0px;
    }
  }
}
//.first-page{
//  position: relative;
//  left: 186px;
//
//}
//.last-page{
//  margin-left: 8px;
//}
//.first-page.el-button,.last-page{
//  &.is-disabled{
//
//    background: var(--el-disabled-bg-color);
//    color: var(--el-text-color-placeholder) !important;
//
//  }
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  font-size: var(--el-pagination-font-size);
//  min-width: var(--el-pagination-button-width);
//  height: var(--el-pagination-button-height);
//  line-height: var(--el-pagination-button-height);
//  color: var(--el-pagination-button-color);
//  background-color:var(--el-pagination-button-bg-color)  ;
//  padding: 0 4px;
//  border: none;
//  border-radius: var(--el-pagination-border-radius);
//  cursor: pointer;
//  text-align: center;
//  box-sizing: border-box;
//}
.page-about{
  display: flex;
}
</style>
