<template>
    <div>
        <form-data :item="config" ref="form" @keyUpEnter="handleLogin">
            <!-- <template slot="verification">
                <img v-if="showVerify" class="imgCode" :src="verificationCodeSrc" title="获取验证码" @click="fetchGetVerificationCode" />
            </template> -->
            <template slot="default">
                <v-btn
                    :loading="loading"
                    color="primary"
                    style="width: 100%; margin-bottom: 30px;"
                    @click.native.prevent="handleLogin"
                >
                    登 录
                </v-btn>
            </template>
        </form-data>
    </div>
</template>

<script>

import FormData from '@/components/Form'

export default {
  name: 'login-page',
  components: { FormData },
  data () {
    return {
      loading: false,
      config: {
        options: [
          {
            label: '登录账号',
            type: 'text',
            key: 'username',
            value: '',
            outlined: true,
            class: 'mt-5',
            autofocus: true,
            prependInnerIcon: 'mdi-account',
            autocomplete: 'username',
            rules: [v => !!v || '请填写登录账号'],
            keyupEnterNative: this.handleLogin,
            change: this.handleChange
          },
          {
            label: '密码',
            type: 'password',
            key: 'password',
            value: '',
            outlined: true,
            prependInnerIcon: 'mdi-lock',
            rules: [v => !!v || '请填写密码'],
            appendIcon: 'mdi-eye-off-outline',
            autocomplete: 'current-password',
            keyupEnterNative: this.handleLogin,
            clickAppend: this.clickAppendPasswordType,
            change: this.handleChange
          }
          // {
          //   label: '验证码',
          //   type: 'text',
          //   key: 'verificationCode',
          //   slotName: 'verification',
          //   rules: [v => !!v || '请填写验证码'],
          //   hide: true,
          //   value: '',
          //   outlined: true,
          //   prependInnerIcon: 'mdi-email',
          //   keyupEnterNative: this.handleLogin,
          //   change: this.handleChange
          // }
        ]
      },
      queryForm: {
        username: '',
        password: ''
        // verificationCode: ''
      },
      passwordType: false,
      errorCount: 0,
      errorCountTop: 3,
      showVerify: false,
      // verificationCodeSrc: '',
      query: '1'
    }
  },
  methods: {
    handleChange (v) {
      Object.assign(this.queryForm, v)
    },
    async handleLogin () {
      if (this.$refs.form.$refs.form.validate()) {
        this.loading = true
        try {
          const query = Object.assign(this.queryForm, {
            query: this.query
          })
          await this.$store.dispatch('user/login', query)
          const routes = await this.$store.dispatch('menu/getMenu2')
          if (!routes.length) {
            this.$snackbar.error('没有访问权限')
            return
          }
          this.$snackbar.success('登录成功')
          if (this.$route.query?.redirect) {
            this.$router.push(this.$route.query.redirect)
            return
          }
          this.$router.push('/')
        } catch (error) {
          this.$snackbar.error(error)
        } finally {
          this.loading = false
        }
      }
    },
    clickAppendPasswordType () {
      this.passwordType = !this.passwordType
      if (this.passwordType) {
        this.config.options[1].type = 'text'
        this.config.options[1].appendIcon = 'mdi-eye-outline'
        return
      }
      this.config.options[1].type = 'password'
      this.config.options[1].appendIcon = 'mdi-eye-off-outline'
    }
  }
}
</script>
<style lang="scss" scoped>
.imgCode {
  position: absolute;
  width: 100px;
  height: 40px;
  top: 8px;
  right: 10px;
}
</style>
