<template>
  <div class="login">
     <div class="login-top">智慧城轨大数据管理平台</div>
      <div class="login-body">
        <div class="login-body-main">
          <div class="login-body-title">登录入口</div>
            <Form ref="loginForm" :model="loginForm" :rules="loginRules" class="loginForm">
              <FormItem prop="userName">
                <Input type="text" placeholder="输入用户名" v-model.trim="loginForm.userName"  class="login-input">
                  <i class="iconfont icon-people" slot="prefix"></i>
                </Input>
              </FormItem>
              <FormItem prop="password">
                <Input type="password" placeholder="输入密码" v-model.trim="loginForm.password" class="login-input" @keyup.enter.native="handleLogin('loginForm')">
                  <i class="iconfont icon-suoding" slot="prefix"></i>
                </Input>
              </FormItem>
              <Button type="primary" @click="handleLogin('loginForm')" long class="login-btn" style="">登录</Button>
            </Form>
            <!-- <div class="forget-password">忘记密码？</div> -->
            </div>
      </div>
      <!-- <Table :columns="columns1" :data="data1" class="aa" @click="login"></Table> -->
  </div>
</template>
<script>
import md5 from "js-md5";
import moment from "moment";
import utils from "../libs/utils";
export default {
  name: "Login",
  components:{
  },
  data() {
    return {
      loginForm: {
        userName: '',
        password: '',
        vCode: 111111
      },
      loginRules: {
          userName: [
            { required: true, type: 'string', trigger: 'blur', message: '输入用户名' }
          ],
          password: [
            { required: true, trigger: 'blur', message: '输入密码',trigger: 'blur' }
          ],
          // vCode: [
          //   { required: true, trigger: 'blur', message: '请输入验证码',trigger: 'blur' }
          // ]
        },
      columns1: [
          {
              title: 'Name',
              key: 'name'
          },
          {
              title: 'Age',
              key: 'age'
          },
          {
              title: 'Address',
              key: 'address',
             render: (h, params) => {
              return h('div',[
                h('i', {class: 'iconfont icon-shezhi'}),
                h('i',{class: 'iconfont icon-shijian'}),
                h('span',params.row.address),                
              ])
            }
          }
      ],
    };
  },
  mounted() {
  },
  methods: {
     handleLogin(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const { userName, password, vCode } = this.loginForm;
          const mdTime = moment().format("YYYY-MM-DD");
          const tomdpsw ="userName:" + userName + "-userPwd:" + password + "-time:" + mdTime;
          const formtmdpsw = md5(tomdpsw);
          // let params = {
          //   feature: formtmdpsw,
          //   userName: userName,
          //   vCode: 111111
          // }
          // this.$store.dispatch('userLogin', params).then(() => { //直接调用vuex里的登录方法 Action 通过 store.dispatch 方法触发
          //   utils.storage("sw_user", {
          //     user: userName,
          //     menus: this.$store.state.user.userInfo.menus,
          //     userId: this.$store.state.user.userInfo.userId
          //   });
          //   this.$Message.info('登录成功');
          //   this.$router.push("/mainPage");
          //   sessionStorage.setItem("id", 0);
          // })
          let that = this;
          this.$post('metroapi/login', { userName, feature: formtmdpsw, vCode }).then(res => {
              if (res.httpCode == 1) {
                utils.storage("sw_user", {
                  user: userName,
                  menus: res.data.menus,
                  userId: res.data.userId
                });
                that.$Message.info(res.msg);
                setTimeout(() => {
                  that.$router.push("/mainPage");
                  sessionStorage.setItem("id", 0);
                }, 1000);
              } else {
                that.$Message.info(res.msg);
              }
            }
          );
        }
      })
    } 
  }
};
</script>
<style scoped lang="stylus">
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url('../assets/images/loginBg.png') no-repeat center;
  background-size: 100% 100%;
}
.login-top {
  width: 100%;
  height: 130px;
  text-align: center;
  line-height: 130px;
  font-size: 44px;
  font-weight: 700;
  color: rgba(47, 206, 241, 0.7);
  background: url('../assets/images/titleBg.png') no-repeat center;
  background-size: 100% 100%;
}
.login-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-body-main {
  width: 965px;
  height: 554px;
  background: url('../assets/images/mainBox.png') no-repeat center;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.login-body-title {
  font-size: 30px;
  color: #2BA3FF;
  text-align: center;
  line-height: 70px;
}
.loginForm {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding-right: 50px;
}
>>> .ivu-form-item {
  margin-bottom: 25px;
}
.login-input {
 width: 378px;
 height: 58px;
 border: 1px solid #5DB5FC;
}
>>> .ivu-form-item-error .login-input {
  border: 1px solid #ed4014;
}
>>> .ivu-input-icon {
  height: 56px;
  line-height: 56px;
}
>>> .ivu-input-prefix, .ivu-input-suffix {
  width: 58px;
  background: #064CAC;
}
>>> .ivu-input-prefix i, .ivu-input-suffix i {
   line-height: 56px;
   color: #fff;
   font-size: 28px;
}
>>> .ivu-input {
  height: 56px;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid transparent;
  color: #F5F5F5;
}
>>> .ivu-input-with-prefix {
  padding-left: 70px;
}
 >>> input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
  background-color: rgba(0, 0, 0, 0.2);
  background-image: none;
  transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
}
/deep/ .ivu-input::-webkit-input-placeholder{
  color: #285EC7;
}
/deep/ .ivu-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color: #285EC7;
}
/deep/ .ivu-input::-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color: #285EC7;
}
/deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
  color: #285EC7;
}
.login-btn {
  width: 378px;
  height: 60px;
  background: #0055D4;
  border-radius: 6px;
  font-size: 26px;
  color: #B5E1F7;
  margin-top: 5px;
}
>>> .ivu-btn-primary:hover {
  background-color: #076fbe;
}
</style>