<template>
  <el-container style="padding: 0;height: 100%">
    <el-main id="login_out" ref="login_out">
      <div class="card_out">
        <el-card class="box-card">
          <div slot="header" class="clearfix">环思智慧</div>
          <el-form v-if="tal_log" :model="form" label-width="80px">
            <el-form-item prop="name" style="margin-top: 20px">
              <el-input
                @keyup.enter.native="tabPwd"
                v-model="form.user_name"
                size="medium"
                placeholder="用户名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password" style="margin-top: 20px">
              <el-input
                ref="pwdInput"
                @keyup.enter.native="submitForm('ruleForm')"
                size="medium"
                type="password"
                placeholder="请输入密码"
                v-model="form.password"
              ></el-input>
            </el-form-item>
            <el-form-item  >
              <el-button
                @click="submitForm('ruleForm')"
                size="medium"
                style="width:70%;margin-top:20px"
                type="primary"
              >登录</el-button>
            </el-form-item>
          </el-form>
            <div style="margin-top:20px;color:#31a9d3">
            <span style="display: inline-block;width:49%;" v-if="!user_name" @click="setting_login">设置登陆信息</span>
          </div>
        </el-card>
      </div>
    </el-main>
      <el-dialog
            title="设置登陆信息"
            :visible.sync="menu_data_dialog"
            width="600px">
            <el-form :model="ruleForm2" status-icon :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="age" style="margin-top:15px;">
              <el-input class="demo" v-model.number="ruleForm2.user_name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass" style="margin-top:15px;">
              <el-input class="demo" type="password" v-model="ruleForm2.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm_user('ruleForm2')">提交</el-button>
            </el-form-item>
          </el-form>
      </el-dialog>
  </el-container>
</template>
<script>
import axios from 'axios'
// import API from '@utils/sha256/myHttpClient'
export default {
  inject: ['reload'],
  data() {
    return {
      user_name: false,
      sign: '',
      ruleForm2: {
        user_name: '',
        password: ''
      },
      menu_data_dialog: false,
      flag: true,
      tal_log: true,
      Global_data_select: [],
      form: {
        user_name: '',
        password: ''
      },
      rules: {
      },
      module_name: '/mesAPI/authorization/'
    }
  },
  activated() {
    this.get_user()
  },
  mounted() {
    this.get_user()
  },
  methods: {
    submitForm_user() {
      if (!this.ruleForm2.user_name) {
        this.$message.error('用户名不能为空')
        return
      }
      if (!this.ruleForm2.password) {
        this.$message.error('密码不能为空')
        return
      }
      this.$API.post(`${this.module_name}/`, {}, {}, this.ruleForm2).then(res => {
        this.$message.success('设置成功')
      })
    },
    // 设置登陆信息
    setting_login() {
      this.menu_data_dialog = true
    },
    // 查询用户信息
    get_user() {
      this.$API.get(`${this.module_name}/`).then(res => {
        this.user_name = res.data
      })
    },
    // 登录
    submitForm() {
      this.$API.post(`${this.module_name}/login/`, {}, {}, this.form).then(res => {
        sessionStorage.setItem('user', true)
        this.$router.push({ path: '/hs/system' })
        this.$message('登录成功')
      })
    },
    getUserData() {
      return axios.get(`/authAPI/user/myinfo/`)
    }
  }
}
</script>
<style scoped>
#login_out {
  padding: 0;
  height: 900px;
  position: relative;
  background: url("../../assets/img/login_bg.jpeg") no-repeat center center;
  /*background: url("https://bing.ioliu.cn/v1/rand?w=1920&h=1080") no-repeat center center;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.demo>>>.el-input__inner{
  width: 300px;
}
.verification >>> .el-input {
  width: 55%;
}
.verification {
  text-align: left;
}
.el-input {
  width: 100%;
}
.card_out {
  position: absolute;
  top: 30%;
  right: 10%;
  backface-visibility: hidden;

  /*transform: translate(50%, -49%);*/
}
.card_out >>> .el-form-item__content {
  margin-left: 0 !important;
}
.card_out >>> .el-form-item__error {
  padding-top: 14px !important;
}
.box-card {
  border: none;
  /*background: rgba(255,255,255,.2);*/
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  width: 320px;
  height: 370px;
}
.box-card >>> .el-card__header {
  border: none;
  padding-top: 15px;
  padding-bottom: 10px;
}
.clearfix {
  color: #666;
  font-size: 22px;
}
.toggle-box {
  text-indent: 15px;
  height: 90px;
  line-height: 90px;
  text-align: left;
  background-color: transparent;
  color: #999;
}
.img_logo {
  margin-top: 17px;
  height: 50px;
}
.header-tab {
  position: fixed;
  width: 250px;
  right: 0px;
  top: 10px;
  text-align: left;
  cursor: pointer;
}
.baniframe {
  padding: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
}
</style>
