<template>
  <div>
    <v-container class="mb-6">
      <v-row align="end" style="min-height: 480px;" no-gutters justify="center">
        askldoisa
        {{ email }}
        <v-col>
          <div class="d-flex justify-center">
            <v-sheet class="pa-2 ma-2">
              <h2 class="text-h6 font-weight-black">
                {{ $t("message.login") }}
              </h2>
            </v-sheet>
          </div>
          <div class="d-flex justify-center mb-6">
            <v-card
              class="mx-auto pa-12 pb-8"
              elevation="0"
              min-width="400"
              rounded="lg"
            >
              <div class="text-subtitle-1 text-medium-emphasis">
                {{ $t("message.email") }}
              </div>
              <v-text-field
                density="compact"
                :placeholder="$t('message.placeholderEmail')"
                prepend-inner-icon="mdi-email-outline"
                variant="outlined"
              ></v-text-field>
              <div
                class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
              >
                {{ $t("message.password") }}
                <a
                  class="text-caption text-decoration-none text-blue"
                  href="#"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  {{ $t("message.forgotPassword") }}</a
                >
              </div>
              <v-text-field
                :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
                :type="visible ? 'text' : 'password'"
                density="compact"
                :placeholder="$t('message.placeholderPassword')"
                prepend-inner-icon="mdi-lock-outline"
                variant="outlined"
                @click:append-inner="visible = !visible"
              ></v-text-field>
              <div class="text-center">
                <v-btn
                  :loading="loading"
                  @click="login"
                  class="mt-8 text-none"
                  color="blue"
                  size="large"
                  variant="elevated"
                  block
                >
                  {{ $t("message.login") }}
                  <template v-slot:loader>
                    <v-progress-linear indeterminate></v-progress-linear>
                  </template>
                </v-btn>
              </div>
            </v-card>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script type="module">
  export default {
    name: "CobaComponent",
    computed: {
      // Akses state dari store
      count() {
        return this.$store.state.count;
      },
      email() {
        return this.$store.state.email;
      },
    },
    methods: {
      // Dispatch action ke store
      increment() {
        this.$store.dispatch("increment");
      },
    },
  };
  // export default {
  //   name: "HelloWorld",
  //   // setup() {
  //   //   // const store = useStore();
  //   //   const email = computed(() => $store.state.email);
  //   // },
  //   computed: {
  //     email: {
  //       get() {
  //         return this.$store.state.store.email;
  //       },
  //     },
  //   },
  // };
</script>

<style scoped>
  h1 {
    color: blue;
  }
</style>
