<template>
  <v-app>
      <v-main>
        <v-container
          class="fill-height"
          fluid
        >
          <v-row
            align="center"
            justify="center"
            class="flex-column"
          >
            <v-col
              cols="12"
              sm="8"
              md="4"
            >
              <v-card class="elevation-12">
                <v-toolbar
                  color="primary"
                  dark
                  flat
                >
                  <v-toolbar-title>B Ware HQ</v-toolbar-title>
                </v-toolbar>
                <v-card-text>
                  <v-form>
                    <v-alert 
                      :value="isLoginError"
                      type="error"
                    >
                      아이디와 비밀번호를 확인해 주세요.
                    </v-alert>
                    <v-alert 
                      :value="isLogin"
                      type="success"
                    >
                      로그인이 완료 되었습니다.
                    </v-alert>
                    
                    <v-text-field
                      v-model="userid"
                      label="ID"
                      name="login"
                      prepend-icon="mdi-account"
                      type="text"
                      :rules="rules"
                      hide-details="auto"
                    ></v-text-field>
  
                    <v-text-field
                      v-model="password"
                      id="password"
                      label="Password"
                      name="password"
                      prepend-icon="mdi-lock"
                      type="password"
                      :rules="rules"
                      hide-details="auto"
                    ></v-text-field> <!-- https://vuetifyjs.com/en/components/text-fields/#password-input 참고 -->

                    <v-checkbox
                      v-model="checkbox"
                      label="Remember ID"
                    ></v-checkbox>

                  </v-form>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="primary"
                    depressed
                    @click="login({userid,password})">Sign in</v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
            <v-footer color="transparent" padless>
              <v-col
                class="text-center"
                cols="12"
              >
                &copy; 2020 B GAGAGE
              </v-col>
            </v-footer>
          </v-row>
        </v-container>
      </v-main>
  </v-app>
</template>

<script>
import {mapActions,mapState} from 'vuex'

export default {
  data:()=>({
    rules: [
      value => !!value || 'Required.',
      value => (value && value.length >= 3) || 'Min 3 characters',
    ],
    userid:null,
    password:null,
  }),
  computed:{
    //...mapState(['isLoginError','isLogin','userInfo'])
    ...mapState('loginStore',['isLoginError','isLogin','userInfo'])
  },
  methods:{
    ...mapActions('loginStore',['login'])
    //...mapActions(['login'])
    //$store.dispatch('logout')
  }
}
</script>