<template>
  <div>
    <div class="bg">
      <div class="main">
        <div class="head_wrap">
          <!-- <img src="@/assets/images/login/login_title.png" alt /> -->
        </div>
        <div class="login-wrap">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label>
              <el-input
                  v-model="formInline.username"
                  @keyup.enter="onSubmit"
                  prefix-icon="user"
                  class="user-inp input"
                  placeholder="请输入用户名称"
              ></el-input>
            </el-form-item>
            <el-form-item label>
              <el-input
                  v-model="formInline.password"
                  @keyup.enter="onSubmit"
                  prefix-icon="password"
                  class="password-inp input"
                  placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btn" @click="onSubmit">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage} from "element-plus";

export default defineComponent({
  name: '',
  components: {},
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      formInline: {
        // code: '1212',
        username: 'admin',
        password: 'admin123',
        uuid: ''
      },
    })
    const onSubmit = () => {
      that.$api.login(state.formInline).then((res: { token: string; }) => {
        ElMessage.success({
          message: '登录成功',
          type: 'success'
        })
        sessionStorage.setItem('ax_token', res.token)
        location.replace('/')
      }).catch(() => {
        // ElMessage.warning('获取菜单错误,请检查网络返回!')
      })
    }
    onMounted(() => {
      sessionStorage.clear()
    })
    return {
      ...toRefs(state),
      onSubmit
    }
  },
})
</script>

<style scoped lang="scss">
.bg {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/images/global/login_bg.jpeg") no-repeat;
  background-size: cover;
  .main {
    width: 800px;
    margin: auto;
    .head_wrap {
      padding-top: 30vh;
      padding-bottom: 8vh;
      img {
        width: 450px;
        display: block;
        margin: auto;
      }
    }
    .login-wrap {
      display: flex;
      justify-content: center;
      .input {
        width: 300px;
        box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.25);
      }
      .btn {
        background-color: #2655ef;
        border-color: #2655ef;
        width: 110px;
        box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.25);
      }
    }
  }
}
:deep(.el-input__inner) {
  height: 40px;
  line-height: 40px;
}
:deep(.user-inp .el-input__prefix) {
  height: 34px;
  width: 34px;
  top: 3px;
  left: 0;
  background-image: url("@/assets/images/global/user.png");
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
}
:deep(.password-inp .el-input__prefix) {
  height: 34px;
  width: 34px;
  top: 3px;
  left: 0;
  background-image: url("@/assets/images/global/password.png");
  background-repeat:  no-repeat;
  background-size: 60%;
  background-position: center;
}
:deep(.el-form-item) {
  margin-right: 15px;
}
:deep(.el-form-item:nth-child(3)) {
  margin-right: 0;
}
</style>
