<template>
  <div class="index">
      <Header :isShowMenu='false'></Header>
      <div class='login-context'>
           <Form ref="formInline" class='formLogin' :model="formInline" :rules="ruleInline" :label-width="80">

              <FormItem prop="userName" label="账号：" style='color:#fff'>
                  <Input type="text" v-model="formInline.userName" placeholder="用户名">  </Input>
              </FormItem>

              <FormItem prop="password" label="密 码：">
                  <Input type="password" v-model="formInline.password" placeholder="密码">
                  </Input>
              </FormItem>

              <FormItem style='text-align: left;margin-left:0;width: 100%'>
                  <Button type="primary" style='width:100%;' @click="handleSubmit('formInline')">登录</Button>
              </FormItem>
              <FormItem style='text-align: center;'>
                  <a href="#" style='color:#EB980E'>忘记密码？</a>
              </FormItem>
               <FormItem style='text-align: left;'>
              <div class='tips-attion'> 
                <h3>所需的浏览器设置</h3>
                <ul>  
                  <li>1、允许来自此网站的弹出窗口 <span id="enablePopupBlock"><img v-if='enableScript' src="../assets/ok.png" alt="">
                                              <img v-else src="../assets/crit.png" alt=""></span></li>
                  <li>2、允许从此网站下载文件.  <span id="popupBlock">(help<img src="../assets/helpicon.png" alt=""></span>)</li>
                  <li>3、为此网站启用javascript <span id="popupBlock"><img v-if='enableScript' src="../assets/ok.png" alt="">
                                              <img v-else src="../assets/crit.png" alt=""></span></li>
                  <li>4、为此网站启用Cookie <span id="enableCookie"><img v-if='enableScript' src="../assets/ok.png" alt="">
                                              <img v-else src="../assets/crit.png" alt=""></span></li>
                  
                </ul>
                  <strong>建议不要使用浏览器的刷新、后退和前进选项。</strong>
              </div>
            </FormItem>
              
          </Form>
      </div>
  </div>
</template>

<script>
  import Header from '@/components/header'
export default {
  name: 'index',
  data(){
    return {
        enableScript: true, //是否启用javascript
        enablePopupBlock: true, //是否启用弹窗
        enableCookie:navigator.cookieEnabled, //是否启用cookie
       formInline: {
            userName: '',
            password: '',
        },
        ruleInline: {
            userName: [
                { required: true, message: '请输入用户名', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' }
            ]
        }
    }
  },
  components:{Header},
  props: {
    msg: String
  },
  created(){

  },
  methods: {
      handleSubmit (name) {
          this.$refs[name].validate((valid) => {
              if (valid) {
                  this.$Message.success('登录成功!');
                  this.$router.push("/index")
              } else {
                  this.$Message.error('Fail!');
              }

          })
      },
      handleReset (name) {
          this.$refs[name].resetFields();
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
.index{
  
}
.login-context{
  height: 250px;
  width: 450px;
  margin: 0 auto;
  margin-top:180px; 
  /*background-color: #fff;*/
  padding: 30px;
  border-radius: 7px;
}
.tips-attion{
  margin-top:30px;
  h3{
    font-size:14px;
  }
  h2{
    font-size:15px;
  }
  color:#fff;
  ul{
    li{
        height: 28px;
        font-size: 13px;
        img{
          padding-left: 4px;
          position: relative;
          /*top: 4px;*/
          width: 20px;
        }
    }
  }
}

.login-context >>> .ivu-form-item-label{
      color:#fff;
    }

</style>
