<template>
  <div class="login-form" @keyup.enter="submit">
    <!-- <xm-polygon color="#044281" :dots="800" class="xm-polygon" /> -->
    <el-container class="login-layout">
      <el-main>
        <div class="head">
          <div class="logo"></div>
          <div class="title">
            <h2>欢迎使用营销云系统</h2>
          </div>
        </div>
        <div class="body">
          <el-form size="medium" :model="formdata">
            <el-form-item>
              <el-input class="large-input" v-model="formdata.username" placeholder="请输入手机号">
                <xm-icon name="user" size="small" slot="prefix"/>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-row :gutter="10">
                <el-input class="large-input" v-model="formdata.password" placeholder="请输入密码"></el-input>
                <!-- <el-col :span="18">
                  <el-input class="large-input" v-model="formdata.password" placeholder="请输入验证码">
                    <xm-icon name="password" size="small" slot="prefix" :style="{ lineHeight: '36px' }"/>
                  </el-input>
                </el-col>
                <el-col :span="4">
                  <el-button type="success">验证码</el-button>
                </el-col> -->
              </el-row>              
            </el-form-item>
            <el-form-item>
              <div class="form-action">
                <el-button type="primary" @click="submit">登录</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
      <el-footer class="foot">
        <xm-footer company="知与行" />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
// import md5 from 'blueimp-md5'

export default {
  name: 'login',
  components: {
    xmFooter: () => import('@/components/XMFooter.vue'),
    // xmPolygon: () => import('@/components/XMPolygon.vue'),
  },
  data() {
    return {
      formdata: {
        username: '',
        password: '',
      },
    }
  },
  computed: {
    fromRoute() {
      return this.$route.query.from || 'index'
    }
  },
  methods: {
    ...mapActions([
      'login',
    ]),
    submit() {
      this.login({ phone: this.formdata.username, captcha: this.formdata.password }).then(() => {
        this.$router.push({ name: this.fromRoute })
      }).catch((err) => {
        this.$message({
          showClose: true,
          message: err.msg || err.message,
          type: 'error'
        });
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-form {
  width: 100%;
  height: 100%;

  .login-layout {
    padding: 0;
    height: 100%;
    z-index: 100;
    position: relative;

    .head {
      margin: 10em auto 4em;
      text-align: center;
    }

    .body {
      width: 400px;
      margin: 0 auto;

      .form-action {
        margin: 24px 0;

        button {
          width: 100%;
          font-size: 16px;
          padding: 0.64em 20px;
        }
      }
    }

    .foot {
      padding: 0;
    }
  }

  .xm-polygon {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>

<style lang="scss">
.login-form {
  .large-input {
    font-size: 18px;

    .el-input__inner {
      height: 2em;
      line-height: 2.2em;
    }
  }
}
</style>

