<template>
  <div id="login">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="24" class="title">环南湖科创先导区双创服务平台</el-col>
            <el-col :span="24" class="info">
              <el-col :span="24" class="infoText">管理登录</el-col>
              <el-col :span="24" class="form">
                <el-form ref="form" :model="form">
                  <el-form-item>
                    <el-input v-model="form.code_phone" prefix-icon="el-icon-user-solid" maxlength="11" placeholder="请输入账号"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input v-model="form.passwd" prefix-icon="el-icon-lock" placeholder="请输入账号" show-password></el-input>
                  </el-form-item>
                  <el-col :span="24" class="btn">
                    <el-button type="danger" @click="resetBtn">取消登录</el-button>
                    <el-button type="primary" @click="onSubmit">提交登录</el-button>
                  </el-col>
                </el-form>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: login } = createNamespacedHelpers('login');
export default {
  name: 'login',
  props: {},
  components: {},
  data: function () {
    return {
      loginBj: require('@a/loginBj.jpg'),
      form: {},
    };
  },
  created() {},
  methods: {
    ...login(['login']),
    async onSubmit() {
      let data = _.get(this, 'form');
      const res = await this.login(data);
      if (this.$checkRes(res)) {
        this.$router.push({ path: '/adminCenter/homeIndex' });
      }
    },
    resetBtn() {
      this.$router.push({ path: '/' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  background: url('~@/assets/loginBj.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  .one {
    padding: 6% 26%;
    .title {
      text-align: center;
      font-size: 35px;
      font-weight: bold;
      font-family: cursive;
      padding: 60px 0;
      color: #fff;
    }
    .info {
      height: 400px;
      padding: 0 50px;
      border-radius: 5px;
      box-shadow: 0 0 5px #f1f1f1;
      background-color: #ffffff5f;
      .infoText {
        font-size: 28px;
        text-align: center;
        padding: 30px 0;
        font-weight: bold;
        -webkit-text-stroke: 1px #fe950e;
        color: #fff;
      }
      .form {
        .btn {
          text-align: center;
        }
        /deep/.el-form-item {
          margin-bottom: 40px;
        }
      }
    }
    // .title {
    //   text-align: center;
    //   font-size: 30px;
    //   color: #ff0000;
    // }
    // .form {
    //   padding: 0 10px;
    // }
  }
}
</style>
