<template>
  <div class="login-container">
    <div
      class="header"
      id="canvasWrap">
      <div class="title">
        <!-- <img
          src="~imgs/logo.png"
          class="logo"
        >
        <i></i>
        <span>徽黄票务管理平台</span> -->
      </div>

      <div class="welcome">
        <div style="padding: 20px;">
          <h1>{{ pageTitle }}</h1>
          <h2>欢迎使用</h2>
        </div>

        <div class="related-blocks">
          相关平台登录：
          <a
            :href="`${item.url}?project=${project}`"
            v-for="(item,index) in blocks"
            :key="index">{{ item.name }}</a>
        </div>
      </div>

      <div class="login-box">
        <div class="form-wrap">
          <h3
            :style="{transform:showCode?'translateY(-40px)':'translateY(0px)'}">
            用户登录
          </h3>
          <el-form
            auto-complete="on"
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
            :style="{transform:showCode?'translateY(-40px)':'translateY(0px)'}"
            label-position="left">
            <el-form-item prop="userName">
              <span class="svg-container">
                <svg-icon icon-class="user"/>
              </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"/>
              </span>
              <el-input
                name="password"
                :type="pwdType"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.password"
                auto-complete="on"
                placeholder="密码"/>
                <!-- <span
              class="show-pwd"
              @click="showPwd"><svg-icon icon-class="eye" /></span> -->
            </el-form-item>
            <el-form-item
              prop="authcode"
              v-if="showCode"
            >
              <span class="svg-container">
                <svg-icon icon-class="authCode"/>
              </span>
              <el-input
                name="authcode"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.authcode"
                placeholder="短信验证码"
              />
              <el-button
                class="authBtn"
                size="mini"
                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>

      <canvas id="canvasEle"></canvas>
    </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"
            :href="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 drawCanvas from './canvas'
import { authsmssend } from '@/api/login'
import { encrypt } from '@/utils'

const blocks = [
  {
    name: '自营销售系统',
    url: 'https://pqncdn.cleartv.cn/mgt/',
    cover: require('imgs/bg.jpg')
  },
  {
    name: '线下票务系统',
    tag: '软件',
    des: '仅在本地电脑安装后，才可打开',
    url: 'clearticket://',
    cover: require('imgs/bg2.jpg')
  }
]

export default {
  name: 'Login',
  data () {
    return {
      blocks,
      loginForm: {
        userName: 'hhtrip',
        password: 'Aa123456',
        authcode: ''
      },
      loginRules: {
        userName: [{required: true, trigger: 'blur', message: '请输入用户名'}],
        password: [{required: true, trigger: 'blur', message: '请输入密码'}],
        authcode: [{ required: true, trigger: 'blur', message: '请输入短信验证码' }]
      },
      loading: false,
      pwdType: 'password',
      authCodeDisable: false,
      showCode: false,
      count: 31
    }
  },
  methods: {
    getAuthCode (e) {
      if (!this.loginForm.userName) {
        this.$message.error('请输入用户名或手机号')
        return
      }
      this.authCodeDisable = true
      this.countDown()
      authsmssend({ userName: this.loginForm.userName }).then(res => {
        this.$message.success('发送成功。')
      })
    },
    countDown () {
      this.count--
      if (this.count === 0) {
        this.count = 31
        this.authCodeDisable = false
        return
      }
      setTimeout(() => {
        this.countDown()
      }, 1000)
    },
    showPwd () {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin () {
      const { userName, password, authcode } = this.loginForm
      let params = {
        userName: userName.trim(),
        password: encrypt(password)
      }
      this.showCode && (params.authcode = authcode)

      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', params).then(() => {
            this.loading = false
            this.$router.push('/systemSetting/project')
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  mounted () {
    // drawCanvas(this)
  },
  beforeDestroy () {
    this.stopCanvasAnimate = true
  }
}
</script>

<style rel="stylesheet/scss" 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 5px;  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 rel="stylesheet/scss" lang="scss" scoped>
$mainColor: #026b70;
$bg: rgb(0,145,229);
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  .header {
    position: relative;min-width: 1280px;height: 600px; min-height: 100vh; overflow: hidden;

    h1,h2 {
      font-weight: normal; text-shadow: 2px 2px 0px #000;
    }
    .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: 29px;
      }
    }
    &:before {
      position: absolute; top: 0;left: 0;width: 100%;height: 100%;content: ''; background: url('~imgs/bg1.jpg') no-repeat center center/cover; filter: blur(3px); transition: all 10s; transform: scale(1.1);
    }
    // &: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%; 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);
      }

      .related-blocks {
        color: #fff; background: rgba(2, 106, 112, 0.8); padding: 10px; font-size: 14px;
        a {
          color: #fff;
          &:hover {
            text-decoration: underline;
          }
        }
        a + a {
          margin-left: 20px;
        }
      }
    }
  }

  // .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; color: rgba(0,0,0,.65); background: #fff; border-radius: 5px; opacity: 0; transition: all .5s; transform: translateX(-50px);
      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 {
      margin-left: -4px;  font-size: 26px;
    }
  }
  .show-pwd {
    position: absolute;  top: 7px;  right: 10px;  font-size: 16px;  color: $dark_gray;  cursor: pointer;  user-select: none;
  }
}

</style>

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

</style>
