<template>
  <div id="color">
    <div id="background">
      <searchBox></searchBox>
      <RightNav></RightNav>
      <mainContent></mainContent>
      <nav v-if="this.getTotal * 1" style="text-align: -webkit-center">
        <el-pagination :page-size="this.getPageSize" style="width: max-content" :current-page="this.getPageNum"
          @current-change="handleCurrentChange" layout="prev, pager, next" :total="this.getTotal * 1" />
      </nav>
    </div>
  </div>
</template>

<script>
import searchBox from "./searchBox";
import RightNav from "@/components/RightNav";
import mainContent from "./mainContent";
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: "Search",
  components: {
    searchBox,
    RightNav,
    mainContent,
  },
  data() {

  },
  methods: {
    ...mapMutations("SearchStore", ["changePageNum", "changePageSize"]),
    handleCurrentChange(val) {
      this.changePageNum(val);
    },
    handleCurrentSizeChange(val) {
      this.changePageSize(val);
    },
  },
  watch: {
    getTotal(newValue, oldValue) {
      console.log("getTotal changed to:", newValue);
    },
    getPageNum(newValue, oldValue) {
      console.log("getPageNum changed to:", newValue);
    },
    getPageSize(newValue, oldValue){
      console.log("getPageSize changed to:", newValue);
    }
  },
  computed: {
    ...mapGetters("SearchStore", ["getPageNum", "getTotal","getPageSize"]),
  },
};
</script>
<style scoped>
#background {
  width: 100%;
  margin-top: -1rem;
  margin: 0 auto;
  padding-bottom: 2rem;
  /* background-color: rgb(237, 244, 237); */
}

#color {
  width: 100%;
  background-color: rgb(237, 244, 237);
  padding-bottom: 6rem;
}
</style>
