<template>
  <div class="main">
    <div class="header">
      <div class="area fx-r fx-bc">

        <div class="greeting fx-g1">后台登录</div>

      </div>
    </div>

    <!--中间部分-->
    <!--登录部分-->
    <div id="showcaseBox">
      <div class="loginbox">
        <h1>账号登录</h1>
        <Form ref="formInline" @keyup.enter="handleSubmit('formInline')" :model="formInline" :rules="ruleInline"  class="login-form">
          <FormItem prop="username">
            <Input type="text" prefix="ios-contact-outline"
                   v-model="formInline.username"
                   placeholder="请输入用户名" size="large"/>
          </FormItem>
          <FormItem prop="password">
            <Input type="password" v-model="formInline.password"  prefix="ios-lock-outline"
                   placeholder="请输入密码" size="large"/>
          </FormItem>

          <FormItem prop="code">
            <div class="code fx-r fx-bc">
              <Input type="text" style="width: 150px;" v-model="formInline.code" prefix="ios-keypad-outline"
                     placeholder="请输入验证码" size="large"/>
              <img :src="verifyImg" class="pictrue" @click="tapCaptchas"/>
            </div>
          </FormItem>

          <FormItem>
            <Button v-if="!isLogin" type="primary" long size="large" @click="handleSubmit('formInline')" class="btn">
             登录系统
            </Button>
            <Button v-if="isLogin" type="primary"  long size="large" class="btn">
              <div class="fr-x">
                <Icon type="ios-sync" class="loadingImg" />登录中..
              </div>
            </Button>
          </FormItem>

        </Form>
      </div>

      <div class="bannerBox">
        <div class="vsite-name">{{ globalSite.seo_title }}</div>
      </div>
    </div>


    <div class="bottom">
      <div class="area info">
        <p> {{ globalSite.seo_title }} Network - All Rights Reserved.</p>
      </div>
    </div>

  </div>
</template>


<script>
    import Setting from "../../../setting";
    import {SystemLogin} from "../../../api/system/login";
    import util from '@/libs/util';
    import { mapState, mapMutations } from 'vuex';
    //globalSite
    export default {
        name: "systemLoginIndex",
        computed: {
            ...mapState('system/page', [
                  'globalSite'
                ])
        },
        data() {
            return {
                verifyImg: "",
                isLogin : false,
                formInline: {
                    username: '',
                    password: '',
                    code: ''
                },
                ruleInline: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                },
                sass:{
                    logo : "",
					// logo : require("@/assets/system/img/logo.png"),
                    title : "",
                    custom_tel : "",
                    custom_qq : "",
                    record_code:""
                }
            };
        },

        created() {
            var _this = this;
            document.onkeydown = function (e) {
                let key = window.event.keyCode;
                if (key === 13) {
                    _this.handleSubmit('formInline');
                }
            };
            this.tapCaptchas();
        },
        methods: {
            /**
             * 验证码
             */
            tapCaptchas:function () {
                this.verifyImg = Setting.apiBaseURL + "/systemv1/login/captcha?" + Date.parse(new Date());
            },

            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.errorNum >= 2) {
                            this.modals = true;
                        } else {
                            this.tapLogin();
                        }
                    }
                })
            },
            /**
             * 用户登录
             */
            tapLogin:function () {
                if(this.isLogin) return ;
                this.isLogin = true;
                SystemLogin({
                    account: this.formInline.username,
                    pwd: this.formInline.password,
                    imgcode: this.formInline.code
                })
                    .then(async  res=>{
                        this.isLogin = false;
                            if (res.code == 200) {
                                let expires = this.getExpiresTime(res.data.expires_time);
                                // 记录用户登陆信息
                                util.cookies.set('system_uuid', res.data.user_info.id, {
                                    expires: expires
                                });
                                //用户token
                                util.cookies.set('system_token', res.data.token, {
                                    expires: expires
                                });
                                //过期时间
                                util.cookies.set('system_expires_time', res.data.expires_time, {
                                    expires: expires
                                });

                                this.$store.dispatch('system/menu/set', res.data.menus);
                                this.$store.dispatch('system/user/set', res.data.user_info);
                                this.$store.dispatch('system/user/setpaths', res.data.paths);
                                // this.$router.replace({path: '/system/index'});
								location.href = "/system/index";
								
								
                            } else {
                                this.tapCaptchas();
                                this.$Message.error(res.msg || '登录失败');
                            }
                    })
                    .catch(err=>{
                        let data = err === undefined ? {} : err;
                        this.isLogin = false;
                        this.tapCaptchas();
                    });

            },
            getExpiresTime (expiresTime) {
                let nowTimeNum = Math.round(new Date() / 1000);
                let expiresTimeNum = expiresTime - nowTimeNum;
                return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
            }
        }
    }
</script>
<style scoped>
  .header{width: 100%;height: 94px;margin: 0 auto;padding: 20px 0;background: #fff;}
  @media screen and (min-width:1200px) {
    .area{width:1200px;margin:0 auto;}
    #showcaseBox{width:100%; min-width:1200px;}
    .loginbox{margin-left:240px;}
  }
  @media screen and (max-width:1200px) {
    .area{width:1000px; margin:0 auto;}
    #showcaseBox{width:100%; min-width:1000px;}
    .loginbox{margin-left:140px;}
  }
  .img-logo img{ height: 80px;}
  .header .greeting {height: 30px;margin: 0px 20px 0;line-height: 30px;color: #666;font-size: 24px;text-align: left;}
  .header .menu {height: 30px;margin: 0px 10px 0;line-height: 30px;color: #999;font-size: 14px;text-align: left;}
  .header .menu a{ color: #999;}
  /* .bannerBox {width: 100%;min-width: 1200px;height: 560px;position: relative; background: rgb(51, 127, 254);} */
  .bannerBox {width: 100%;min-width: 1200px;height: 560px;position: relative; background: url("../../../assets/system/img/20190610logo.png") center top no-repeat rgb(51, 127, 254);}
  #showcaseBox {
    height: 560px;
    position: relative;
    text-align: center;
    overflow: hidden;
  }
  .loginbox {
    width: 320px;
    height: 380px;
    float: left;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    background: #fff;
    background: rgba(255,255,255,.9);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    z-index: 55;
  }
  .loginbox h1{width:100%; height:60px; float:left; border-bottom:1px solid #ddd; color:#8b949b; font-size:20px; font-weight:normal; line-height:60px;}

  .loginbox .submit{width:280px; height:40px; margin:20px 20px 0; float:left; background:#19a3d1; color:#fff; text-align:center; font-size:20px; line-height:40px; font-weight:normal; border-radius:2px; cursor:pointer;}
  .loginbox .submit:hover{background:#09c;}
  .loginbox .submit:active{background:#08c;}


  .bottom{width:100%; margin:0 auto; padding:20px 0; clear:both; background:#fff;}
  .bottom a{text-decoration:none;}
  .bottom .info{padding:5px 0; text-align:center; font-size:14px; color:#999; line-height:24px;}
  .bottom .info a{color:#777;}
  .bottom .info a:hover{color:#333; text-decoration:underline;}
  .bottom{opacity:0.6; transition:opacity .5s ease;}
  .bottom:hover{opacity:1;}
  .verify-empty{ height: 35px; width: 100px;color: #ccc; line-height: 35px; text-align: center;}

  .login-form{padding:20px; margin-top: 60px}
  .code .pictrue {height: 30px;cursor: pointer}
  .vsite-name{position: absolute;font-size: 40px;width: 500px;color: #fff;left: 20px;text-align: right; top: 100px;}
</style>
