<template>
  <div class="layer">
    <div class="content">
      <div class="info">
        <h1>中免VR商城管理後臺</h1>
      </div>
      <el-form class="login" :model="form" @submit.stop>
        <div class="lg-title">歡迎登錄</div>
        <el-form-item class="login-form-item">
          <el-input v-model="form.phone" placeholder="手機號" @keydown.enter="submitClick"></el-input>
          <p class="err-info">{{verification.phone}}</p>
        </el-form-item>
        <el-form-item class="login-form-item">
          <el-input v-model="form.psw" placeholder="密碼" type="password" @keydown.enter="submitClick"></el-input>
          <p class="err-info">{{verification.psw}}</p>
        </el-form-item>

        <el-form-item class="login-form-item remember">
          <el-checkbox label="記住密碼" v-model="form.remember"></el-checkbox>
        </el-form-item>
        
        <el-form-item class="login-form-item">
          <el-button type="primary" class="fill" @click="submitClick">登錄</el-button>
        </el-form-item>
   
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, watch } from 'vue'
import axios from 'axios'
import { setToken, setInfo, setRole } from '@/state/user'
import { userLogin } from '@/request/config'
import {PHONE} from '@/constant/REG'
import { openErrorMsg } from '@/request/errorMsg.js'
import { encryption } from '@/util'

export default {
  name: 'login',
  setup() {
    const form = reactive({
      phone: localStorage.getItem('userName') || '',
      psw: localStorage.getItem('password') || '',
      // phone: '13888888888',
      // psw: 'Aa123456',
      remember: localStorage.getItem('remember') === '1'
    })
    const verification = reactive({ phone: '', psw: '' })


    watch(form, () => {
      if (!form.phone) {
        verification.phone = '請輸入手機號'
      } else {
        verification.phone = PHONE.REG.test(form.phone) ? '': PHONE.tip
      }
      if (!form.psw) {
        verification.psw = '請輸入密碼'
      } else {
        verification.psw = ''
      }
    }, {immediate: true})

    return {
      form,
      verification
    }
  },
  methods: {
    async submitClick(ev) {
      ev.stopPropagation()

      if (this.verification.psw) return openErrorMsg(this.verification.psw, '提示')
      if (this.verification.code) return openErrorMsg(this.verification.code, '提示')

      try {
        // await axios.get(checkCode, {params: { code: this.form.code, key: this.imgKey }})
        let res = await axios.post(userLogin, {
          phone: this.form.phone,
          password: encryption(this.form.psw)
        })


        if (this.form.remember) {
          localStorage.setItem('userName', this.form.phone)
          localStorage.setItem('password', this.form.psw)
          localStorage.setItem('remember', '1')
        } else {
          localStorage.setItem('userName', '')
          localStorage.setItem('password', '')
          localStorage.setItem('remember', '0')
        }

        setRole(res.data.userVo.roleId)
        setInfo(res.data.userVo)
        setToken(res.data.token)
        this.$router.replace({ name: 'scene' })
        
      } catch(e) {
        console.log(e);
      }


    },
  
  },
  data() {

    return {
    }
  },
  computed: {
    
  }
}
</script>

<style lang="scss" scoped>
.layer {
  position: absolute;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;

  >.content {
    height: 100vh;
    background: url('~@/assets/image/bg.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
  }
}

.content {
  display: flex;
  align-items: center;
  justify-content: space-around;

  >.info {
    color: #fff;
    transform: translateY(-70px);
    img {
      width: 76px;
      height: 76px;
    }
    h1 {
      font-size: 3rem;
      line-height: 3.5rem;
      font-weight: bold;
      margin: 0.41rem 0 0;
    }
    p {
      font-size: 1.2rem;
      line-height: 2.3rem;

    }
  }

  >.login {
    width: 400px;
    background: #FFFFFF;
    box-shadow: 0px 2px 20px 0px rgba(5, 38, 38, 0.15);
    border-radius: 10px;
    padding: 40px 40px 20px;
    box-sizing: border-box;
    .lg-img{
      width: 12rem;
    }

    .lg-title {
      font-size: 1.7rem;
      color: #646566;
      margin-bottom: 1rem;
    }
  }
}

.login-form-item {
  position: relative;
  padding: 1rem 0;
  margin: 0;

 
  &.remember {
    padding: 0;
  }


  .err-info {
    position: absolute;
    top: 110%;
    color: #FA5555;
    font-size: 0.7rem;
    line-height: 1.5em;
  }
}
</style>

<style>
.code-input .el-input-group__append{
  padding: 0;
}

.code-input .el-input-group__append img {
  height: 100%;
  cursor: pointer;
}
</style>
