<template>
  <div class="bg-main">
    <Header />
    <Section2Green />
    <!-- <Section3Base /> -->
    <Section4White />
    <Section5Green />
    <Section6Base />
    <Section7GreenTab />
    <Section8Base />
    <FooterPage />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
// import { client } from "@/utils/trpc";
import Header from "./HeaderHome.vue";
import Section2Green from "./Section2Green.vue";
// import Section3Base from "./Section3Base.vue";
import Section4White from "./Section4White.vue";
import Section5Green from "./Section5Green.vue";
import Section6Base from "./Section6Base.vue";
import Section7GreenTab from "./Section7GreenTab.vue";
import Section8Base from "./Section8Base.vue";
import FooterPage from "./FooterPage.vue";
export default {
  computed: {
    ...mapGetters(["getUsername"]),
  },
  components: {
    Header,
    Section2Green,
    // Section3Base,
    Section4White,
    Section5Green,
    Section6Base,
    Section7GreenTab,
    Section8Base,
    FooterPage,
  },
  mounted() {
    // if(this.getUsername){
    //   client.user.getSelf
    //     .mutate({})
    //     .then((data) => {
    //       console.log('data.image',data.image);
    //       this.$store.commit("setUsername", data.firstName);
    //       this.$store.commit("setImg", data.image);
    //       localStorage.setItem("img",data.image);
    //       localStorage.setItem("username", data.firstName);
    //     })
    //     .catch((error) => {
    //       // alert("ไม่สามารถโหลดข้อมูลได้");
    //       console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
    //     });
    //     this.$store.commit("setCheckLogin", true);
    // }
  },
};
</script>
<style>
.bg-main {
  background: #f6ebd5;
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
  .bg-main {
    overflow-x: hidden;
  }
}
</style>
