<template>
  <Form class="login-form" ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="username">
      <Input v-model="form.username" :placeholder="$t('developer_account_tips')">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" :placeholder="$t('developer_pwd_tips')">
        <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:310px;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:40px;" :src="codeImg" @click="changeSrc" alt="">
      </div>
    </FormItem>
    <FormItem>
      <div class="flexbox">
      <Checkbox class="label" @on-change="toggle">{{$t('keep_login')}}</Checkbox>
      <router-link v-if="canRegister" :to="{path:'/register'}">{{$t('login_tips')}}&gt;&gt;</router-link>
      </div>
      <Button class="flexbox-btn" @click="handleSubmit" type="primary" long>{{$t('login')}}</Button>
    </FormItem>

    <div class="thirdParty_login" v-if="isShowThirdParty">
        <div class="title-line">
          <div class="line"></div>
          <div class="text">第三方登录</div>
          <div class="line"></div>
        </div>
        <div class="select-list">
          <a @click="thirdpartyLogin" :href="item.callback_url" target="_blank" v-for="(item,index) in thirdPartyList" :key="index">
            <img :src="item.icon" alt="" srcset="">
            <div class="text">{{item.desc}}</div>
          </a>
        </div>
      </div>
  </Form>
</template>
<script>
import config from '@/config'

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

export default {
  name: 'LoginForm',
  props: {
    logincaptcha: {
      type: Boolean
    }
    // usernameRules: {
    //   type: Array,
    //   default: () => {
    //     return [
    //       // { required: true, message: this.$i18n.tc('account_empty'), trigger: 'blur' }
    //       { required: true, message: '账号不得为空', trigger: 'blur' }
    //     ]
    //   }
    // },
    // passwordRules: {
    //   type: Array,
    //   default: () => {
    //     return [
    //       // { required: true, message: this.$t('developer_pwd_tips'), trigger: 'blur' }
    //       { required: true, message: '密码不得为空', trigger: 'blur' }
    //     ]
    //   }
    // }
  },
  data () {
    return {
      codeImg: '/api/platform.php?service=Platform.Captcha.Create',
      form: {
        username: '',
        password: '',
        verification: ''
      },
      cookiesExp: 1,
      usernameRules: [
        { required: true, message: this.$i18n.tc('account_empty'), trigger: 'blur' }
        // { required: true, message: '账号不得为空', trigger: 'blur' }
      ],
      passwordRules: [
        { required: true, message: this.$t('developer_pwd_tips'), trigger: 'blur' }
        // { required: true, message: '密码不得为空', trigger: 'blur' }
      ],
      isShowThirdParty: false,
      thirdPartyList: []
    }
  },
  created () {
    // console.log('i18n', this.$t('welcome'))
    this.thirdpartyLogin()
  },
  computed: {
    rules () {
      return {
        username: this.usernameRules,
        password: this.passwordRules
      }
    },
    canRegister () {
      return this.$store.state.user.is_dev_register
    }
  },
  methods: {
    thirdpartyLogin () {
      let _this = this
      AuthorizationConfig().then(res => {
        if (res.ret == 200) {
          _this.isShowThirdParty = true
          _this.thirdPartyList = res.data.quick_login
        }
      })
    },
    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 () {
      let timestamp = Date.parse(new Date())
      this.codeImg = '/api/platform.php?service=Platform.Captcha.Create&t=' + timestamp
    }
  }
}
</script>

<style lang="less" scope>
.login-form {
  .flexbox {
   margin-top: 10px;
   width: 400px;
   display: flex;
   flex-flow: row;
   justify-content: space-between;

   &-btn {
     width: 100%;
     height: 40px;
   }
 }
 .thirdParty_login {

    .title-line {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .line {
        flex:1;
        background: #ECECEC;
        height: 1px;
      }
      .text {
        color: #666;
        padding: 0 15px;
      }
    }
    .select-list {
      display: flex;
      justify-content: center;

      a {
        margin: 0 40px;
        line-height: 1;
        display: flex;
        min-width: 60px;
        flex-flow: column;
        align-items: center;

        img {
          width: 24px;
          height: 24px;
          margin-bottom: 8px;
        }
        .text {
          color: #666 !important;
        }
      }
    }
  }
}
</style>
