<template>
  <div class="layer">
    <div class="content">
      <div class="info">
        <h1>中免VR商城管理后台</h1>
        <p>宅家中，云逛街，轻松买</p>
      </div>
      <el-form class="login" :model="form" @submit.stop>
        <h2>登录</h2>
        <el-form-item class="login-form-item">
          <p class="err-info">{{verification.phone}}</p>
          <el-input v-model="form.phone" placeholder="手机号" @keydown.enter="submitClick"></el-input>
        </el-form-item>
        <el-form-item class="login-form-item">
          <p class="err-info">{{verification.psw}}</p>
          <el-input v-model="form.psw" placeholder="密码" type="password" @keydown.enter="submitClick"></el-input>
        </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-item class="login-form-item remember">
          <el-checkbox label="记住密码(公共场所请勿勾选)" v-model="form.remember"></el-checkbox>
        </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: '',
      psw: '',
      // 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:  res.data.userVo.roleId == 3 ?'shop':'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 {
    min-height: 626px;
    background: url('~@/assets/image/img_loginbg.png') no-repeat center center;
    background-size: cover;
    width: 100%;
  }
}

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

  >.info {
    color: #fff;

    img {
      width: 76px;
      height: 76px;
    }
    h1 {
      font-size: 3rem;
      line-height: 3.5rem;
      font-weight: normal;
      margin: 0.41rem 0 0.91rem;
    }
    p {
      font-size: 1.6rem;
      line-height: 2.3rem;

    }
  }

  >.login {
    background: #FFFFFF;
    border-radius: 2px;
    width: 264px;
    padding: 0 20px 20px;

    h2 {
      color: var(--primaryColor);
      font-size: 1.66rem;
      padding: 15px 0;
      border-bottom: 1px solid #D9D9D9;
      text-align: center;
      margin-bottom: 1rem;
    }
  }
}

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

 
  &.remember {
    padding: 0;
  }


  .err-info {
    position: absolute;
    bottom: 100%;
    font-size: 1rem;
    line-height: 1.5em;
    color: #F2969B;
  }
}
</style>

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

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