<template>
  <div id="login">
    <!--图-->
    <canvas id="canvas"></canvas>

    <div class="box">
      <!-- <transition appear name="slide-fade-right">
        <div v-if="show" class="right"></div>
      </transition>
      <transition appear name="slide-fade-left">
        <div v-if="show" class="left"></div>
      </transition> -->

      <transition appear >
        <div class="login">

          <br>
          <br>
          <h1>客服后台</h1>
          <br>
          <el-form :model="user" :rules="rules" ref="userForm">

            <el-form-item class="login-input" label="" prop="username">
              <el-input name="username" placeholder="账户" v-model="user.username" size="large"
                        @keyup.enter.native="submit"
                        :autofocus="true">
                <template slot="prepend">账户</template>
              </el-input>
            </el-form-item>
            <el-form-item class="login-input" label="" prop="password">
              <el-input name="password" type="password" placeholder="密码" v-model="user.password" size="large"
                        @keyup.enter.native="submit">
                <template slot="prepend">密码</template>
              </el-input>
            </el-form-item>
            <el-form-item class="login-input" label="" prop="vcode">
              <el-input name="vcode"  placeholder="请输入验证码"  style="width:55%;margin-right:15px" :loading="sendLoad"   v-model="user.vcode" size="large"
                        @keyup.enter.native="submit">
                <template slot="prepend">验证码</template>
              </el-input>
              <el-button type="success" plain  @click="sendMail()">{{text}}</el-button>
            </el-form-item>
            <br>
            <el-button :loading="ui.loginLoading" class="login-btn"
                       size="large" type="info" @click="submit">登录
            </el-button>
          </el-form>

        </div>
      </transition>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'SisLogin',
    data() {
      return {
        show: true,
        sendLoad:false,
        time: '获取验证码',
        ui: {
          loginLoading: false,
          errorAlert: {isShow: false, title: ''}
        },
        rules: {
          userId: [
            {required: true, message: '请输入账户', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
          ]
        },
        user: {
          userId: '',
          password: '',
          username:'',
          vcode:'',
          smsType:'backLogin',
        }
      }
    },

    methods: {
      submit() {
        this.$refs['userForm'].validate((valid) => {
          if (!valid) {
            return false
          }
          this.ui.loginLoading = true

          this.$cacheUtils.cleanCache();
          this.$$post('/login', this.user)
            .then(res => {
              if (res.data.code == 200) {

                localStorage.setItem('userName', res.data.result.userName);
                localStorage.setItem('agentNo', res.data.result.extensionNumber);
                localStorage.setItem('loginName', res.data.result.loginName);

                var userRolePermission = this.userRolelistToStringUtils(res.data.result.userRole);
                localStorage.setItem('userRole', userRolePermission);


                var btnPermission = this.listToStringUtils(res.data.result.buttonList);
                localStorage.setItem('btnPermission', btnPermission)

                var arr = new Array();
                var arr2 = new Array();

                  var a = new Object();


                  localStorage.setItem('authaaaa', JSON.stringify(res.data.result.menuList))

                  const uName = res.data.result.loginName;

                  var canvas = document.getElementById('canvas')
                  canvas.width = 300
                  canvas.height = 300
                  var context = canvas.getContext('2d')
                  context.translate(-85,125);
                  context.rotate(-35 * Math.PI / 180);
                  context.font = 'normal 30px Arial'
                  context.fillStyle = '#d1d1d1'
                  context.fillText(uName, 50, 150);


                  localStorage.setItem('bg',context.canvas.toDataURL());


                this.$router.push('/index')
              } else {
                this.ui.loginLoading = false
                this.$message({
                    message: `${res.data.message}`,
                    type: 'warning'
                });
                // throw (res.data)
              }
            })
            // .catch(err => {
            //   //this.showErrorAlert(err)
            //   this.$message({
            //         message: `${res.data.msg}`,
            //         type: 'warning'
            //     });
            // })
        })
      },

      sendMail() {

          if(!this.user.username){
              this.$message({
                      message: `用户名不能为空`,
                      type: 'warning'
                  });
              return;
          }

          if(!this.user.password ){
              this.$message({
                      message: `密码不能为空`,
                      type: 'warning'
                  });
              return;
          }

          if(this.sendLoad){
              return;
          }
          //java发送验证码接口
           this.$$post('/login/sendLoginSms', this.user)
            .then(res => {
              console.log(res)
              if (res.data.code == 200) {
                  this.sendLoad = true;
                  this.time = 60;
                  this.timer();
                    this.$message({
                      message: '验证码发送成功，请查看',
                      type: 'success'
                  });
              } else {
                  this.sendLoad = false;
                  this.$message({
                      message: `${res.data.message}`,
                      type: 'warning'
                  });
              }
          })

      },
      timer () {
          if (this.time > 0) {
              this.time--;
              setTimeout(this.timer, 1000);
          }
      },


      listToStringUtils(list) {
        var returnStr = ''
        for (var num in list) {
          if (num == list.length - 1) {
            returnStr = returnStr + list[num].code
          } else {
            returnStr = returnStr + list[num].code + ","
          }
        }
        return returnStr;
      },

      userRolelistToStringUtils(list) {
        var returnStr = ''
        for (var num in list) {
          if (num == list.length - 1) {
            returnStr = returnStr + list[num].roleCode
          } else {
            returnStr = returnStr + list[num].roleCode + ","
          }
        }
        return returnStr;
      },

      showErrorAlert(err) {
        this.$message.error(err.msg === undefined ? '404' : err.msg)
        this.ui.loginLoading = false
      }
    },
     computed:{
        text: function () {
            if(this.time == 0) {
            this.sendLoad = false;
            }
            return this.time > 0 ? this.time + 's 后重新获取' : '获取验证码';
        }
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #login {
    width 100%
    height 100%
    background-image url('../../assets/image/backimg20190828.jpg')
    background-repeat no-repeat
    background-position center
    background-size cover

    .box {
      position absolute
      top 50%
      left 50%
      background-color: rgba(30,30,30,0.6)
      width bw = 700px
      height bh = 600px
      margin-left -(bw/ 2)
      margin-top -(bh/ 2)

      .slide-fade-left-enter-active {
        transition: all 2s ease;
      }
      .slide-fade-left-leave-active {
        transition: all 2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
      .slide-fade-left-enter, .slide-fade-left-leave-to {
        transform: translateX(-150px);
        opacity: 0;
      }

      .slide-fade-right-enter-active {
        transition: all 2s ease;
      }
      .slide-fade-right-leave-active {
        transition: all 2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
      .slide-fade-right-enter, .slide-fade-right-leave-to {
        transform: translateX(150px);
        opacity: 0;
      }

      .slide-fade-top-enter-active {
        transition: all 2.5s ease;
      }
      .slide-fade-top-leave-active {
        transition: all 2.5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
      .slide-fade-top-enter, .slide-fade-top-leave-to {
        transform: translateY(100px);
        opacity: 0;
      }

      .right {
        position absolute
        top 0
        right 0

        width bw - 120
        height bh - 60

        background-color rgba(255, 255, 255, .5)
        border-radius 3px
      }

      .left {
        position absolute
        bottom 0
        left 0

        width bw - 120
        height bh - 60

        background-color rgba(0, 0, 0, .5)
        border-radius 3px
      }

      .login {
        position absolute
        top 60px
        left 150px
        z-index 10
        width 400px
        height 480px

        h1 {
          color white
          text-align center
        }

        .login-input {
          width 90%
          margin 20px

          .el-form-item__error {
            font-size 13px
          }
        }

        .login-btn {
          display block
          width 80%
          margin auto
          background-color #3592FE
          border-color #162938
        }
      }
    }

  }
  #canvas {
      position: fixed;
      left: 0;
      top: 15vh;
      bottom: 0;
      right: 0;
      margin: auto;
      z-index: 8888;
      display: none;
  }
</style>


