<template>
  <div :class="projectName && projectName === 'leifengjinianguan' ? 'login-container-leifeng': 'login-container'">
    <div
      class="header"
      id="canvasWrap">
      <div class="title">
        <img
          :src="logo"
          class="logo"
        >
        <i></i>
        <span>{{ appName||'清鹤售检票系统' }}</span>
      </div>

      <div class="welcome">
        <h1>欢迎使用</h1>
        <!-- <h2>清鹤云致力于互联网智慧平台系统搭建</h2> -->
      </div>
      <div class="login-box">
        <div class="form-wrap">
          <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 svg-container_login">
                <svg-icon
                  icon-class="user"
                  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">
                <svg-icon
                  icon-class="password"
                  style="font-size:24px; margin-left:-3px"
                />
              </span>
              <el-input
                name="password"
                :type="pwdType"
                @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="btn-wrap">
              <el-button
                type="primary"
                style="width:100%; border-radius:20px"
                :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 class="related-blocks">
      <h3><span>相关平台登录</span></h3>
      <ul class="block-list">
        <li
          class="block-item"
          v-for="(item,index) in blocks"
          :key="index"
          :style="{backgroundImage:`url(${item.cover})`}"
        >
          <a
            class="text"
            @click="openLink(item.url)"
          >
            {{ item.name }}
            <div class="des">
              {{ item.des }}
            </div>
          </a>
          <span
            class="tag"
            v-show="item.tag">
            {{ item.tag }}
          </span>
        </li>
        <li
          v-for="i in 3"
          :key="'a'+i"
        ></li>
      </ul>
    </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
const blocks = [
  {
    name: '票务自营渠道销售系统',
    url: 'https://pqncdn.cleartv.cn/mgt/',
    cover: require('imgs/bg.jpg')
  },
  {
    name: '票务OTA分销系统',
    url: 'https://pqncdn.cleartv.cn/ota/',
    cover: require('imgs/bg1.jpg')
  }
]

export default {
  name: 'Login',
  computed: {
    logo () {
      return this.$store.state.app.customLogo
    },
    ...mapGetters([
      'appStatus'
    ])
  },
  data () {
    return {
      blocks,
      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',
      authCodeDisable: false,
      count: 31 // 倒计时
    }
  },
  mounted () {
    // authsmsneed().then(res => {
    //   if (res?.data === '1') {
    //     this.showCode = true
    //   }
    // })
  },
  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 (localStore.get('encryption')) {
      //   params.password = Base64.encode('CTICKET' + params.password)
      // }
      // if (localStore.get('encryption_aes')) {
      // }
      params.password = encrypt(params.password)
      // params.password = 'f9106ac71ecb19ec1c4dfc6182198e9d'
      // this.showCode && (params.authcode = this.loginForm.authcode)

      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;
  }
  .el-input {
    display: inline-block; height: 40px;
    input {
      height: 40px;  -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;
      }
    }
  }
  .el-form-item {
    color: #454545; border-bottom: 1px solid #ccc;
  }
  .authBtn {
    position: absolute; right: 0; bottom: 5px;
  }
  .svg-icon {
    margin-left: -3px;  font-size: 24px;
  }
}

// 雷锋纪念馆
.login-container-leifeng {
  .el-form-item__content {
    line-height: 36px;
  }
  .el-input {
    display: inline-block; height: 40px;
    input {
      height: 40px;  -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;
      }
    }
  }
  .el-form-item {
    color: #454545; border-bottom: 1px solid #ccc;
  }
  .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,145,229);
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  .header {
    position: relative;min-width: 1280px;height: 600px; overflow: hidden;
    h1,h2 {
      font-weight: normal;
    }
    .title {
      position: absolute; top: 40px; left: 10%; z-index: 10; display: flex; font-size: 24px; line-height: 1;color: #fff; justify-content: center; align-items: center;
      i {
        width: 5px;height: 5px; margin: 0 10px; background: #fff;border-radius: 50%;
      }
      .logo {
        height: 70px;
      }
    }
    &:before {
      position: absolute; top: 0;left: 0;width: 100%;height: 100%;content: ''; background: url('~imgs/bg2.jpg') no-repeat center center/cover; filter: blur(3px); transform: scale(1.1); transition:all 10s;
    }
    // &:after {
    //   position: absolute; top: 0;left: 0;width: 100%;height: 100%;content: ''; background: rgba(0,0,0,.4);
    // }
    #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);
    }
  }

  &:before {
    position: absolute;top: 50%; right: 10%;  width: 790px; height: 412px;margin-top: -200px;content: ''; background: inherit;filter: blur(10px);
  }

  .login-box {
    position: absolute; top: 50%; right: 280px; z-index: 20; width: 320px; height: 360px; margin-top: -200px;
    h3 {
      margin: 0 0 10px; font-weight: normal; color: $mainColor;  transition: all .5s;
    }
    .form-wrap {
      position: relative; z-index: 2;  height: 100%; box-sizing: border-box; padding: 30px; padding-top: 60px;background: #fff;border-radius: 8px; box-shadow: 0 3px 5px rgba(0,0,0,.4);
    }
    .btn-wrap {
      padding-top: 10px;
    }
    .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;
      }
    }

    // &:hover {
    //   .qr-wrap {
    //     opacity: 1;transform: translateX(0px);
    //   }
    // }
  }

  .tips {
    margin-bottom: 10px;  font-size: 14px;  color: #fff;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    display: inline-block;  width: 20px;  padding: 0 5px 0 15px;  font-size: 20px; color: $dark_gray;  vertical-align: middle;
    &_login {
      font-size: 26px;
    }
  }
  .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: #fff; font-size: 12px;
  }
}

// 雷锋定制背景图
.login-container-leifeng {
  .header {
    position: relative;min-width: 1280px;height: 600px; overflow: hidden;
    h1,h2 {
      font-weight: normal;
    }
    .title {
      position: absolute; top: 40px; left: 10%; z-index: 10; display: flex; font-size: 24px; line-height: 1;color: #fff; justify-content: center; align-items: center;
      i {
        width: 5px;height: 5px; margin: 0 10px; background: #fff;border-radius: 50%;
      }
      .logo {
        height: 70px;
      }
    }
    &:before {
      position: absolute; top: 0;left: 0;width: 100%;height: 100%;content: ''; background: url('~imgs/leifeng/leifeng-bg2.png') no-repeat center center/cover; filter: blur(3px); transform: scale(1.1); transition:all 10s;
    }
    // &:after {
    //   position: absolute; top: 0;left: 0;width: 100%;height: 100%;content: ''; background: rgba(0,0,0,.4);
    // }
    #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);
    }
  }

  &:before {
    position: absolute;top: 50%; right: 10%;  width: 790px; height: 412px;margin-top: -200px;content: ''; background: inherit;filter: blur(10px);
  }

  .login-box {
    position: absolute; top: 50%; right: 280px; z-index: 20; width: 320px; height: 360px; margin-top: -200px;
    h3 {
      margin: 0 0 10px; font-weight: normal; color: $mainColor;  transition: all .5s;
    }
    .form-wrap {
      position: relative; z-index: 2;  height: 100%; box-sizing: border-box; padding: 30px; padding-top: 60px;background: #fff;border-radius: 8px; box-shadow: 0 3px 5px rgba(0,0,0,.4);
    }
    .btn-wrap {
      padding-top: 10px;
    }
    .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;
      }
    }

    // &:hover {
    //   .qr-wrap {
    //     opacity: 1;transform: translateX(0px);
    //   }
    // }
  }

  .tips {
    margin-bottom: 10px;  font-size: 14px;  color: #fff;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    display: inline-block;  width: 20px;  padding: 0 5px 0 15px;  font-size: 20px; color: $dark_gray;  vertical-align: middle;
    &_login {
      font-size: 26px;
    }
  }
  .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: #fff; font-size: 12px;
  }
}

.related-blocks {
  padding: 20px 0;  margin: 0 10%; color: #4a4a4a;
  h3 {
    font-size: 18px; font-weight: normal; line-height: 1.5; padding: 0;margin: 0 0 20px;
    span {
      display: inline-block;  border-bottom: 2px solid #4a4a4a;
    }
  }

  .block-list {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    li {
      width: 30%;
    }
    .block-item {
      position: relative;  padding-bottom: 15%; cursor: pointer; background: center center no-repeat/100% 100%; transition: all 2s; overflow: hidden;
      // &:hover {
      //   background-size: 120% 120%;
      // }
      .tag{
        position: absolute; background: #f00; color: #fff; text-align: center; padding: 10px 20px 2px; transform:rotate(45deg); right: -18px; top: 0px; font-size: 12px;
      }
    }
    .text {
      position: absolute;top: 0; left: 0; display: flex; width: 100%; height: 100%;font-size: 18px; color: #fff;flex-direction: column; justify-content: center; align-items: center; text-shadow: 0 0 10px #000; line-height: 1.5;
    }
    .des {
      font-size: 14px ;
    }
  }
}

</style>

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