<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <h2 class="brand-info__text">企业数字化管理系统</h2>
        </div>
        <div class="login-main">
          <h3 class="login-title">用户登录</h3>
          <el-form
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            @keyup.enter.native="handleLogin()"
            status-icon
          >
            <el-form-item prop="userName">
              <el-input clearable v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input clearable v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
<!--            <el-form-item prop="captcha">-->
<!--              <el-row :gutter="20">-->
<!--                <el-col :span="14">-->
<!--                  <el-input-->
<!--                    @key.enter.native="handleLogin"-->
<!--                    clearable-->
<!--                    v-model="dataForm.captcha"-->
<!--                    placeholder="验证码"-->
<!--                  ></el-input>-->
<!--                </el-col>-->
<!--                <el-col :span="10" class="login-captcha">-->
<!--                  <img :src="captchaPath" @click="handleGetImgCaptcha" />-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-form-item>-->
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.verify" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <el-button v-if="!hasSendCode"  type="primary" @click="handleVerify">获取验证码</el-button>
                  <el-button v-else type="primary">重新发送({{time}}S)</el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-btn-submit"
                type="primary"
                :loading="isloading"
                @click="handleLogin"
              >登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUUID } from '@/utils'
import { apiLogin, apiSsysSendSMS } from '@/api/api_sys'
import { apiDingtalkLogin } from '@/api/api_staff'
import * as dd from 'dingtalk-jsapi'
var dingCode = ''
export default {
  data () {
    return {
      isloading: false,
      dataForm: {
        userName: '',
        password: '',
        uuid: '',
        // captcha: ''
        verify: ''
      },
      dataRule: {
        userName: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        // captcha: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
        verify: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      },
      // captchaPath: '' // 图像验证码请求地址
      time: 0,
      timer: true,
      hasSendCode: false
    }
  },
  created () {
    // this.handleGetImgCaptcha()
  },
  mounted () {
  },
  methods: {
    // // 获取图像验证码
    // handleGetImgCaptcha () {
    //   this.dataForm.uuid = getUUID()
    //   this.captchaPath = `/lz_management/captcha.jpg?uuid=${this.dataForm.uuid}`
    // },
    // 登录提交表单
    handleLogin () {
      let param = Object.assign(this.dataForm, {'userName': this.dataForm.userName}, {'uuid': this.dataForm.uuid}, {'verifyCode': this.dataForm.verify})
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.isloading = true
          apiLogin(param).then(res => {
            this.isloading = false
            if (res && res.code === 0) {
              console.log('获取token')
              this.$cookie.set('token', res.token)
              console.log('保存token')
              this.$router.replace({ name: 'home' })
              console.log('跳转')
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    // 获取验证码
    handleVerify () {
      this.dataForm.uuid = getUUID()
      if (!this.dataForm.userName) {
        this.$message('请输入账号')
        return false
      }
      // if (!this.dataForm.captcha) {
      //   this.$message('请输入图形验证码')
      //   return false
      // }
      let parmse = {
        userName: this.dataForm.userName,
        // captcha: this.dataForm.captcha,
        password: this.dataForm.password,
        uuid: this.dataForm.uuid
      }
      apiSsysSendSMS(parmse).then(res => {
        if (res.code === 0) {
          this.time = 60
          this.hasSendCode = true
          this.timer = setInterval(() => {
            if (this.time === 0) {
              this.hasSendCode = false
            }
            this.time--
          }, 1000)
          this.$message.success(res.msg)
        } else {
          // this.getCaptcha()
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, 0.6);
  overflow: hidden;
  &:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/login/login_bg.jpg);
    background-size: cover;
  }
  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }
  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }
  .brand-info {
    margin: 220px 100px 0 90px;
    color: #fff;
  }
  .brand-info__text {
    margin: 0 0 22px 0;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
  }
  .brand-info__intro {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.58;
    opacity: 0.6;
  }
  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }
  .login-title {
    font-size: 16px;
  }
  /*.login-captcha {*/
  /*  overflow: hidden;*/
  /*  > img {*/
  /*    width: 100%;*/
  /*    cursor: pointer;*/
  /*  }*/
  /*}*/
  .login-btn-submit {
    width: 100%;
    margin-top: 38px;
  }
}
</style>
