<template>
  <div class="admin-login-page">
    <div class="admin-login-cont">
      <div class="header-title">
        <h2 class="title">admin</h2>
      </div>
      <div class="form-cont">
        <el-form :model="formData" :rules="formRules"
                 ref="adminForm" label-width="3rem"
                 @submit.native.prevent
                 class="admin-Form">
          <el-form-item label="账号" prop="phone">
            <el-input v-model="formData.phone"
                      placeholder="管理员账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input :type='inputType'
                      v-model="formData.password"
                      placeholder="管理员密码"></el-input>
            <i class="toggle el-icon-view"
               :class="{'color':formData.password==''}"
               @click="changeInputType"></i>
          </el-form-item>
        </el-form>
        <el-button type="primary"
                   @click="submitForm()">登录
        </el-button>
        <el-button @click="resetForm()">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'

export default {
  data () {
    return {
      inputType: 'password',
      formData: {
        phone: '',
        password: ''
      },
      formRules: {
        phone: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {pattern: /^1[3-8][0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },
  mounted () {
    window.onkeydown = (e) => {
      let key = window.event.keyCode
      if (key === 13) {
        this.submitForm('adminForm')
      }
    }
  },
  methods: {
    changeInputType () {
      this.inputType = (this.inputType == 'password') ? 'text' : 'password'
    },
    submitForm () {
      this.$refs.adminForm.validate((valid) => {
        if (valid) {
          // const baseUrl = 'http://localhost:8083/api/'
          // const baseUrl = 'https://api.tomey.live/api/'
          const baseUrl = 'http://mytwins.top/api/'
          axios({
            method: 'post',
            url: baseUrl + 'login',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
            },
            data: qs.stringify(this.formData, {arrayFormat: 'brackets'})
          }).then(res => {
            console.log(res)
            var data = res.data
            console.log(data)
            if (data.success) {
              sessionStorage.setItem('token', data.data.token)
              sessionStorage.setItem('username', data.data.uaername)
              sessionStorage.setItem('identity', data.data.identity)
              sessionStorage.setItem('phone', data.data.phone)
              sessionStorage.setItem('createTime', data.data.createTime)
              this.$notify({
                title: '登录成功',
                duration: 2000,
                type: 'success'
              })
              if (data.data.identity == 3) {
                this.$router.push({path: '/home'})
              } else if (data.data.identity == 2) {
                this.$router.push({path: '/woker'})
              } else {
                this.$router.push({path: '/admin'})
              }
            } else {
              this.$notify({
                title: '登录失败',
                message: data.msg,
                duration: 2000,
                type: 'error'
              })
            }
          })
        } else {
          return null
        }
      })
    },
    resetForm () {
      this.$refs.adminForm.resetFields()
    }
  },
  destroyed () {
    window.onkeydown = null
  },

}
</script>

<style lang='scss'>
.admin-login-page {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
  background-color: #cff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.admin-login-cont {
  position: relative;
  width: 25rem;
  height: 20rem;
  background-color: #fff;
  box-shadow: 2rem 2rem 3rem #423f3f;

  .header-title {
    height: 4rem;

    .title {
      line-height: 4rem;
      font-size: 1.5rem;
      letter-spacing: 0.05rem;
      color: #777;
    }
  }

  .form-cont {
    width: 70%;
    margin: 2rem auto;

    .admin-Form {
      margin-bottom: 3rem;
    }

    .el-form-item {
      margin-bottom: 1.5rem;
    }

    .toggle.el-icon-view {
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      line-height: 1.5rem;
      top: 50%;
      transform: translate(0, -50%);
      right: 0.2rem;
    }

    .toggle.color {
      color: #ccc;
    }

    // 登录按钮
    .el-button--primary {
      margin-right: 0.5rem;
    }
  }
}

</style>

