<template>
  <div id="login">
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-col :span="24" class="main">
            <div class="w_1200">
              <el-col :span="24" class="login">
                <div class="ms-title">长春市保安服务监管系统-公安端</div>
                <el-form :model="form" :rules="rules" ref="login" label-width="0px" class="ms-content">
                  <el-form-item prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11">
                      <el-button slot="prepend" icon="el-icon-user"></el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="form.password">
                      <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                  </el-form-item>
                  <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                  </div>
                </el-form>
              </el-col>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('login');
export default {
  metaInfo: { title: '登录' },
  name: 'login',
  props: {},
  components: {},
  data: function () {
    return {
      form: {},
      rules: {
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },
  created() {},
  methods: {
    ...mapActions(['login']),
    submitForm() {
      this.$refs.login.validate(async (valid) => {
        if (valid) {
          let res = await this.login({ table: 'system_account', ...this.form });
          if (this.$checkRes(res)) {
            this.$message.success('登录成功');
            this.$router.push('/adminCenter/homeIndex');
          }
        } else {
          this.$message.error('请输入账号和密码');
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  background-image: url(../assets/img/login-bg.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  .login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: hsla(0, 0%, 100%, 0.3);
    overflow: hidden;
    .ms-title {
      width: 100%;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-bottom: 1px solid #ddd;
    }
    .ms-content {
      padding: 30px 30px;
    }
    .login-btn {
      text-align: center;
    }
    .login-btn button {
      width: 100%;
      height: 36px;
      margin-bottom: 10px;
    }
    .login-tips {
      font-size: 12px;
      line-height: 30px;
      color: #fff;
    }
    /deep/.js .el-form-item__content {
      padding: 0 25px;
      .el-radio {
        color: #fff;
      }
    }
  }
}
</style>
