<template>
<!-- 登录页面 -->
  <div>
    <Row class="container">
      <i-col span="13" offset="2" class="login-img-box">
        <img src="static/img/sale.jpg" alt="">
      </i-col>
      <i-col span="7" class="login-box">
        <div class="login-container">
          <div class="login-header">
            <p>欢迎登录</p>
          </div>
          <div class="form-box">
            <Form ref="formInline" :model="formData" :rules="ruleInline">
              <FormItem prop="name">
                  <i-input type="text" v-model="formData.name" clearable size="large" placeholder="用户名">
                      <Icon type="person" slot="prepend"></Icon>
                  </i-input>
              </FormItem>
              <FormItem prop="password">
                  <i-input type="password" v-model="formData.password" clearable size="large" placeholder="密码">
                      <Icon type="ios-locked-outline" slot="prepend"> </Icon>
                  </i-input>
              </FormItem>
              <FormItem>
                  <Button type="error" size="large" @click="handleSubmit('formInline')" long>登录</Button>
              </FormItem>
          </Form>
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapMutations, mapActions } from 'vuex';
export default {
  name: 'Login',
  data () {
    return {
      formData: {
        name: '',
        password: ''
      },
      ruleInline: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    ...mapMutations(['SET_USER_LOGIN_INFO']),
    ...mapActions(['login']),
    getUid () {
      let localStorage = window.localStorage;
      let loginInfo = localStorage.getItem('loginInfo');
      this.uid = (JSON.parse(loginInfo))['uid'];
    },
    handleSubmit (name) {
      const father = this;
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.login(father.formData).then(result => {
            if (result) {
              this.$Message.success('登录成功');
              // this.accessWebSocket();
              father.$router.push('/');
            } else {
              this.$Message.error('用户名或密码错误');
            }
          });
        } else {
          this.$Message.error('请填写正确的用户名或密码');
        }
      });
    },
    // accessWebSocket () {
    //   var socket;
    //   if (typeof (WebSocket) === 'undefined') {
    //     console.log('您的浏览器不支持WebSocket');
    //   } else {
    //     console.log('您的浏览器支持WebSocket');
    //     // 实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
    //     let uid = this.getUid();
    //     socket = new WebSocket('ws://localhost:8443/websocket');
    //     // 打开事件
    //     socket.onopen = function () {
    //       console.log('Socket 已打开');
    //     };
    //     // 获得消息事件
    //     socket.onmessage = function (msg) {
    //       console.log(msg.data);
    //       // 发现消息进入    开始处理前端触发逻辑
    //     };
    //     // 关闭事件
    //     socket.onclose = function () {
    //       console.log('Socket已关闭');
    //     };
    //     // 发生了错误事件
    //     socket.onerror = function () {
    //       alert('Socket发生了错误');
    //       // 此时可以尝试刷新页面
    //     };
    //   }
    // }
  },
  store
};
</script>

<style scoped>
.container {
  margin-top: 30px;
  height: 485px;
  background-color: #fff;
}
.login-img-box {
  height: 485px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-img-box>img {
  width: 68%;
}
.login-box {
  height: 485px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-container {
  width: 80%;
  height: 280px;
  border: #ED3F14 solid 1px;
}
.login-header {
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 5px;
  color: #fff;
  background-color: #ED3F14;
}
.form-box {
  width: 80%;
  margin: 30px auto;
}
</style>
