<template>
  <div class="login-container">
    <div
      class="header"
      id="canvasWrap">
      <div class="login-box">
        <div class="left-wrapper">
          <img src="/images/login/left-bg.png">
        </div>
        <div class="form-wrap">
          <div class="title">
            <img
              :src="logo"
              class="logo"
            >
            <h1>欢迎使用  {{ appName || '售检票系统' }}</h1>
          </div>
          <h3>
            用户登录
          </h3>
          <el-form
            auto-complete="on"
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
            label-position="left"
          >
            <el-form-item prop="userName">
              <span class="svg-container">
                <i
                  class="iconfont icon-yonghu"
                  style="font-size:22px"
                />
              </span>
              <el-input
                name="userName"
                type="text"
                v-model="loginForm.userName"
                auto-complete="on"
                placeholder="用户名或手机号"
              />
            </el-form-item>
            <el-form-item prop="password">
              <span class="svg-container">
                <i
                  class="iconfont icon-mimatianchong"
                  style="font-size:22px"
                />
              </span>
              <el-input
                name="password"
                type="password"
                show-password
                @keyup.enter.native="handleLogin"
                v-model="loginForm.password"
                auto-complete="on"
                placeholder="密码"
              />
            </el-form-item>
            <el-form-item
              prop="authcode"
              v-if="showCode"
            >
              <span class="svg-container">
                <svg-icon
                  icon-class="authCode"
                  style="font-size:24px; margin-left:-3px"
                />
              </span>
              <el-input
                name="authcode"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.authcode"
                placeholder="短信验证码"
              />
              <el-button
                class="authBtn"
                size="small"
                type="primary"
                :disabled="authCodeDisable"
                @click.prevent.stop="getAuthCode"
              >
                {{ authCodeDisable?`${count}s后重试`:'获取短信验证码' }}
              </el-button>
            </el-form-item>
            <div class="login-btn-wrap">
              <div>
                <el-checkbox v-model="savePwd">
                  记住密码
                </el-checkbox>
              </div>
              <el-button
                type="primary"
                class="login-btn"
                :loading="loading"
                @click.native.prevent="handleLogin"
              >
                登录
              </el-button>
            </div>
          </el-form>
        </div>

        <!-- <div class="qr-wrap">
          <img src="~/imgs/qr.png">
          <div class="des">
            微信扫描<br>
            关注公众号
          </div>
        </div> -->
      </div>

      <div class="appVersion">
        <span>
          当前版本：{{ version }}
        </span>
        <span v-if="appStatus.status===0">
          【 正在下载更新 {{ appStatus.process }}% 】
        </span>
        <span v-if="appStatus.status===2">
          <a @click="updateNow">
            【 <i></i>有新版本，立即更新 】
          </a>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { authsmssend } from '@/api/login'
import readCard from '@/utils/readCard'
// import { Base64 } from 'js-base64'
import { encrypt } from '@/utils'
// const Store = require('electron-store')
// const localStore = new Store()

const { app } = require('electron').remote

export default {
  name: 'Login',
  computed: {
    logo () {
      return this.$store.state.app.customLogo
    },
    ...mapGetters([
      'appStatus'
    ])
  },
  data () {
    return {
      projectName: process.env.VUE_APP_PROJECT,
      version: app.getVersion(),
      appName: this.$localStore.get('appName') || process.env.VUE_APP_PROJECT_NAME,
      loginForm: {
        projectName: '',
        userName: 'admin',
        password: 'Aa123456',
        authcode: ''
      },
      loginRules: {
        userName: [{ required: true, trigger: 'blur', message: '请输入用户名或手机号' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        authcode: [{ required: true, trigger: 'blur', message: '请输入短信验证码' }]
      },
      loading: false,
      showCode: false,
      pwdType: 'password',
      savePwd: false, // 是否记住密码
      authCodeDisable: false,
      count: 31 // 倒计时
    }
  },
  mounted () {
    this.loginForm.userName = this.$localStore.get('userName') || ''
    this.loginForm.password = this.$localStore.get('password') || ''
    this.savePwd = !!this.loginForm.password
  },
  methods: {
    openLink (url) {
      const { shell } = require('electron')

      shell.openExternal(url)
    },
    updateNow () {
      const { ipcRenderer } = require('electron')
      ipcRenderer.send('updateNow')
    },
    showPwd () {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    getAuthCode (e) {
      if (!this.loginForm.userName) {
        this.$message.error('请输入用户名或手机号')
        return
      }
      this.authCodeDisable = true
      authsmssend({ userName: this.loginForm.userName }).then(res => {
        this.$message.success('发送成功。')
        this.countDown()
      }).catch(e => {
        this.authCodeDisable = false
      })
    },
    countDown () {
      this.count--
      if (this.count === 0) {
        this.count = 31
        this.authCodeDisable = false
        return
      }
      setTimeout(() => {
        this.countDown()
      }, 1000)
    },
    handleLogin () {
      const params = {
        userName: this.loginForm.userName.trim(),
        password: this.loginForm.password
      }

      if (this.savePwd) {
        this.$localStore.set('userName', params.userName)
        this.$localStore.set('password', params.password)
      } else {
        this.$localStore.set('userName', '')
        this.$localStore.set('password', '')
      }

      params.password = encrypt(params.password)

      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$log.info(`用户【${this.loginForm.userName}】 登录操作`)

          this.loading = true
          this.$store.dispatch('Login', params).then(() => {
            this.$router.push({ name: 'dashboard' })
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    readCard () {
      readCard()
    }
  }
}
</script>

<style lang="scss">
$bg: #283443;
$light_gray: #eee;

/* reset element-ui css */
.login-container {
  .el-form-item__content {
    line-height: 36px;
    color: #454545;
    border: 1px solid #C3D5E8;
    border-radius: 8px;
    margin-bottom: 15px;
  }
  .el-input {
    display: inline-block;
    height: 40px;
    margin-left: 10px;
    width: 320px !important;
    input {
      height: 40px;
      vertical-align: middle;
      -webkit-appearance: none;
      padding: 12px 5px 10px 2px;
      color: darken(#a3a0a0,20%);
      background: transparent;  border: 0;
      border-radius: 0;
      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px #fff inset !important;  -webkit-text-fill-color: darken(#a3a0a0,20%) !important;
      }
    }
  }
  .authBtn {
    position: absolute; right: 0; bottom: 5px;
  }
  .svg-icon {
    margin-left: -3px;  font-size: 24px;
  }
}
</style>

<style lang="scss" scoped>
$mainColor: $blue;
$bg: rgb(0, 117, 255);
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  width: 100%;
  height: 100%;
  background: url('/images/login/bg.png') no-repeat center center/cover;
  .header {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .login-box {
      position: absolute;
      z-index: 20;
      top: 50%;
      margin-top: -300px;
      height: 600px;
      left: calc(50% - 480px);
      display: flex;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 3px 5px rgba(0,0,0,.4);

      .left-wrapper {
        height: 100%;
        width: 480px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .form-wrap {
        position: relative;
        z-index: 2;
        width: 480px;
        height: 100%;
        box-sizing: border-box;
        padding: 40px 50px;
        padding-top: 60px;

        .title {
          display: flex;
          flex-direction: column;
          align-items: center;

          .logo {
            height: 90px;
            margin-bottom: 20px;
          }

          h1 {
            color: $blue;
            text-align: center;
          }
        }
        h3 {
          margin-top: 20px;
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          transition: all .5s;
        }
        .login-btn-wrap {
          padding-top: 10px;
          text-align: left;
          .login-btn {
            margin-top: 20px;
            width: 100%;
            padding: 10px 0;
            border-radius: 12px;
            font-size: 16px;
          }
        }
        .el-form {
          transition: all .3s;
        }
        .qr-wrap {
          position: absolute; top: 0; right: -170px; z-index: 1;  width: 150px; box-sizing: border-box; padding: 10px; background: #fff; border-radius: 5px; opacity: 0; transition: all .5s; transform: translateX(-50px);color: rgba(0,0,0,.65);
          img {
            width: 100%;
          }
          .des {
            text-align: center;
          }
        }
      }
    }

    .tips {
      margin-bottom: 10px;  font-size: 14px;  color: #fff;
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .svg-container {
      display: inline-block;
      width: 20px;
      font-size: 20px;
      color: #C3D5E8;
      vertical-align: middle;
      padding: 0 10px;
      margin: 4px 0;
      border-right: 1px solid #C3D5E8;
    }
    .show-pwd {
      position: absolute;  top: 7px;  right: 10px;  font-size: 16px;  color: $dark_gray;  cursor: pointer;  user-select: none;
    }

    .appVersion{
      position: absolute;
      right: 20px;
      bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    #canvasEle {
      position: absolute; top: 0;left: 0;z-index: 10;
    }

    .welcome {
      position: absolute;
      top: 50%;
      left: 10%;
      z-index: 20;
      width: 40%;
      padding: 20px;
      margin-top: -70px;
      background: rgba(255, 255, 255, .2);
      opacity: .8;;
      h1,h2 {
        padding: 10px 0;
        margin: 0;
        line-height: 1;
        color: #fff;
      }
      h1 {
        border-bottom: 1px solid rgba(255, 255, 255, .3);
      }
    }
  }

  .header:hover{
    &:before {
      transform: scale(1.3);
    }
  }
}

</style>

<style lang="scss">
.login-box {
  .el-form-item__error{
    margin-top: 5px; margin-left: 45px;
  }
}
</style>
