<template>
  <v-app id="inspire">
    <v-row no-gutters>
      <v-col lg="8" md="7">
        <!-- width="100vw" -->
        <!-- :aspect-ratio="1" -->
        <v-img
          min-height="100vh"
          cover
          style="background-repeat: repeat-y"
          class="bg-white"
          src="./images/bg-left.jpg"
        ></v-img>
      </v-col>
      <v-col lg="4" md="5">
        <v-container class="fill-height" fluid>
          <v-row no-gutters justify="center">
            <v-col>
              <div class="d-flex justify-center">
                <v-card class="mx-auto px-12" elevation="0" rounded="lg">
                  <div class="d-flex justify-center mb-16 bg-surface-variant">
                      <v-img
                          class="bg-white"
                          height="86px"
                          aspect-ratio="16/9"
                          src="../globalimages/logo.png"
                      ></v-img>
                  </div>
                  <div class="d-flex mb-6">
                    <v-sheet class="">
                      <h2 class="text-h6 font-weight-black">
                        {{ $t("message.title") }}
                      </h2>
                      <p class="text-subtitle-1" style="color: #637381">
                        {{ $t("message.sublogin") }}
                      </p>
                    </v-sheet>
                  </div>
                  <!-- bg-primary-lighten text-primary  -->
                  <!-- icon="mdi-information-slab-circle-outline" -->
                  <v-alert
                    density="compact"
                    :text="alert.message"
                    :type="alert.type"
                    class="mt-4 mb-3 w-100"
                    variant="tonal"
                  >
                  </v-alert>

                  <v-text-field
                    class="mt-3"
                    v-model="email"
                    :label="$t('message.email')"
                    :placeholder="$t('message.placeholderEmail')"
                    variant="outlined"
                  ></v-text-field>
                  <v-text-field
                    :label="$t('message.password')"
                    v-model="password"
                    :append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'"
                    :type="visible ? 'text' : 'password'"
                    :placeholder="$t('message.placeholderPassword')"
                    variant="outlined"
                    @click:append-inner="visible = !visible"
                  ></v-text-field>
                  <div class="text-center">
                    <v-btn
                      :loading="loading"
                      @click="login"
                      class="mt-5 text-none"
                      color="blue"
                      size="large"
                      variant="elevated"
                      block
                    >
                      {{ $t("message.login") }}
                      <template v-slot:loader>
                        <!-- <v-progress-linear indeterminate></v-progress-linear> -->
                        <v-progress-circular indeterminate></v-progress-circular>
                      </template>
                    </v-btn>
                    <v-btn
                      class="my-5 text-none"
                      size="large"
                      @click="loginGoogle"
                      variant="outlined"
                      block
                    >
                      <v-img class="mr-2" src="./images/logo_google.svg" width="20px" height="20px"></v-img>
                      SIGN IN WITH GOOGLE
                    </v-btn>
                  </div>
                </v-card>
              </div>
            </v-col>
          </v-row>
        </v-container>
      </v-col>
    </v-row>
  </v-app>
</template>

<script type="module">
export default {
  name: "dekstop",
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    // Akses state dari store
    loading() {
      return this.$store.state.login.loading;
    },
    alert() {
      return this.$store.state.login.alert;
    },
    email: {
      get() {
        return this.$store.state.login.email;
      },
      set(val) {
        this.$store.commit("login/setEmail", val);
      },
    },
    password: {
      get() {
        return this.$store.state.login.password;
      },
      set(val) {
        this.$store.commit("login/setPassword", val);
      },
      loginGoogle() {
        this.$store.dispatch("login/loginGoogle")
      }
    },
  },
  methods: {
    // Dispatch action ke store
    login() {
      this.$store.dispatch("login/login");
    },
    increment() {
      this.$store.dispatch("increment");
    },
  },
};
</script>

<style scoped></style>
