<template>
  <Form class="loginForm" ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="username">
      <Input v-model="form.username" style="width:400px" clearable :placeholder="$t('please_enter_your_account')">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" clearable style="width:400px" v-model="form.password" :placeholder="$t('please_enter_your_password')">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem v-if="logincaptcha">
      <div style="display: flex;align-items: center;">
        <Input clearable style="width:260px;margin-right:10px" v-model="form.verification" :placeholder="$t('input_captcha_case_sensitive')">
        <span slot="prepend">
          <Icon :size="14" type="md-barcode"></Icon>
        </span>
        </Input>
        <img style="height:32px;" :src="codeImg" @click="changeSrc" alt="">
      </div>

    </FormItem>
    <FormItem>
      <Checkbox class="label" @on-change="toggle">{{$t('keep_login')}}</Checkbox>
      <div class="flexbox">
        <Button class="flexbox-btn" @click="handleSubmit" type="primary" long>{{$t('login')}}</Button>
        <!-- <router-link :to="{path:'/register'}">还没账号？免费注册&gt;&gt;</router-link> -->
      </div>
    </FormItem>
  </Form>
</template>
<script>

import config from '@/config'
const { cookieExpires_long, cookieExpires_short } = config

export default {
  name: 'LoginForm',
  props: {
    logincaptcha: {
      type: Boolean
    }
  },
  data () {
    return {
      codeImg: '/api/platform.php?service=Platform.Captcha.Create',
      form: {
        username: '',
        password: '',
        verification: ''
      },
      cookiesExp: 1,
      usernameRules: [
        { required: true, message: this.$t('account_empty'), trigger: 'blur' }
      ],
      passwordRules: [
        { required: true, message: this.$t('developer_pwd_tips'), trigger: 'blur' }
      ]
    }
  },
  computed: {
    rules () {
      return {
        username: this.usernameRules,
        password: this.passwordRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            username: this.form.username,
            password: this.form.password,
            captcha: this.form.verification,
            cookiesExp: this.cookiesExp
          })
        }
      })
    },
    toggle (value) {
      this.cookiesExp = value ? cookieExpires_long : cookieExpires_short
    },
    changeSrc () {
      // if (this.codeImg === '/api/platform.php?service=Platform.Captcha.Create') {
      //   this.codeImg = '/api/platform.php?service=Platform.Captcha.Create&t=1'
      // } else {
      //   this.codeImg = '/api/platform.php?service=Platform.Captcha.Create'
      // }
      let timestamp = Date.parse(new Date())
      // timestamp = timestamp.toString().slice(5)
      this.codeImg = '/api/platform.php?service=Platform.Captcha.Create&t=' + timestamp
    }
  }
}
</script>

<style lang="less" scope>
.loginForm {
  .flexbox {
   margin-top: 25px;
   width: 400px;
   display: flex;
   flex-flow: row;
   justify-content: center;
   &-btn {
     width: 100%;
     height: 34px;
   }
 }
.label{
  position: absolute;
  top: -33px;
  left: 0px;
}
}
</style>
