<template>
  <f7-page name="verifyemail">
    <f7-navbar title="Verify Your Email"></f7-navbar>
    <div>
      <div class="pagealign">
        <h3>Please Verify The Email Below</h3>
        <p>{{ userEmail }}</p>
      </div>
      <f7-block>
        <div class="list inline-labels no-hairlines-md">
          <ul>
            <li class="item-content item-input">
              <div class="item-media">
                <i class="icon demo-list-icon"></i>
              </div>
              <div class="item-inner">
                <div class="item-title item-label">Email Code</div>
                <div class="item-input-wrap">
                  <input
                    :value="emailcode"
                    @input="emailcode = $event.target.value"
                    type="text"
                    placeholder="Enter Email Code"
                    required
                    validate
                  />
                  <span class="input-clear-button"></span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </f7-block>
      <f7-block>
        <f7-button fill @click="verifyEmail" open-confirm
          >Verify Email</f7-button
        >
        <br />
        <div style="text-align: center">
          <f7-link @click="signIn">Back to SignIn</f7-link>
        </div>
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import { f7 } from "framework7-vue";
import { setInterval, clearInterval } from "timers";
import { mixin } from "../../js/mixin";
import { title } from "process";
import { verify } from "crypto";
export default {
  data() {
    return {
      emailcode: null,
      userEmail: null,
    };
  },

  methods: {
    signIn() {
      this.$f7router.navigate("/firstpage/");
    },
    verifyEmail() {
      const self = this;
      // this.$f7router.navigate("/signin/");

      console.log("verify Email");
      var postData = {
        emailcode: this.emailcode,
        email: this.userEmail,
      };

      this.$f7.request.post(
        "https://chatme24.com/register/verifyemailpenpalamerica.php",
        postData,
        function (data) {
          if (data == "0") {
            console.log(data);
            //  let userLoginStatus = self.$store.dispatch("rerouteuser");
            self.$store.commit(
              "setAlertMessage",
              "Email Verification complete. Please login"
            );
            self.$f7.dialog.close();
            //self.$store.commit("setSignedIn", false);

            self.$f7router.navigate("/signinbackup/");

            //  self.$f7router.navigate("/about/");
          }

          if (data == "1") {
            self.$store.commit(
              "setAlertMessage",
              "Email Code supplied is not correct"
            );
          }
        }
      );
    },
  },
  created() {
    this.$store.commit("setSignedUp", false);
    let param = this.$f7route.params.email; // decodeURIComponent(this.$f7route.params.frd);
    // this.friend = JSON.parse(param);
    this.userEmail = param;
    console.log(param);
  },
};
</script>

<style scoped>
.pagealign {
  margin-top: 50px;
  margin-left: 20px;
  text-align: center;
}

.image--cover {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 20px;
  object-fit: cover;
  object-position: center;
}
</style>