<template>
  <div id="login">
    <h1>数字孪生金华横锦水库</h1>
    <div class="line"></div>
    <div class="login-panel">
      <h2>用户登录</h2>
      <!-- 表单 -->
      <el-form
        :model="formData"
        :rules="formRules"
        ref="loginForm"
        v-show="true"
      >
        <el-form-item prop="user_name">
          <div class="user-icon"></div>
          <!-- 输入框 -->
          <el-input
            autocomplete
            name="username"
            v-model="formData.user_name"
            placeholder="请输入用户账号"
            autofocus
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <div class="pwd-icon"></div>
          <!-- 输入框 -->
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
            type="password"
            @keydown.enter.native="loginBtn"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <label for="rem-username">
            <input type="checkbox" id="rem-username" v-model="remUsername" />
            记住用户名
          </label>
          <!-- <button class="forget">忘记密码</button> -->
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="loading"
            class="login-btn"
            type="primary"
            @click.prevent="loginBtn"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="login-panel" v-else>
      <div class="youke">自动登录中... ({{ threeTime }})</div>
    </div> -->
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
export default {
  name: 'Login',
  // created () {
  //   this.threeTime1 = setInterval(async () => {
  //     if (this.threeTime === 0) {
  //       clearInterval(this.threeTime1)

  //       // 自动登录
  //       // sessionStorage.setItem('hjsk_token', JSON.stringify(token))
  //       await this.getTokenAction({
  //         user_name: 'hj15868480508',
  //         password: 'Gcszsk123!!'
  //       })
  //       this.$router.replace('/jump')
  //       return
  //     }
  //     this.threeTime -= 1
  //   }, 1000)
  //   if (localStorage.getItem('hjsk_username')) {
  //     this.formData.user_name = localStorage.getItem('hjsk_username')
  //     this.remUsername = true
  //   }
  // },
  data () {
    return {
      threeTime1: 0,
      threeTime: 3,
      formData: {
        user_name: '',
        password: ''
        // user_name: 'dysk001',
        // password: 'dongyangshuiku'
        // user_name: 'cools',
        // password: 'abc123'
        // user_name: 'qjcools',
        // password: 'vabc123'
      },
      formRules: {
        user_name: [
          { required: true, message: '请输入用户账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度大于等于 6 个字符', trigger: 'blur' }
        ]
      },
      remUsername: false,
      // 登录回跳
      redirect: undefined,
      // 登录按钮
      loading: false
    }
  },
  methods: {
    ...mapMutations('user', ['setToken']),
    ...mapActions('user', ['getTokenAction']),
    async loginBtn () {
      this.loading = true
      try {
        await this.$refs.loginForm.validate()
        await this.getTokenAction(this.formData)
        if (this.remUsername) {
          localStorage.setItem('hjsk_username', this.formData.user_name)
        } else {
          localStorage.removeItem('hjsk_username')
        }
        document.documentElement.requestFullscreen()
        this.$router.replace(this.redirect || '/jump')
        this.$message({
          type: 'success',
          message: '登陆成功',
          offset: 80,
          showClose: true
        })
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  destroyed () {
    this.formData = {
      user_name: '',
      password: ''
    }
  }
}
</script>

<style lang="scss" scoped>
$pry: #00ffff; // rgba(0, 255, 255, 1)
$pry2: #2792a0; // rgba(39, 146, 160, 1)

#login {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1920px;
  height: 1080px;
  background: url("~@/assets/images/login/bg.png") no-repeat top center / 100%
    100%;
  h1 {
    margin-top: 156px;
    margin: 156px 0 36px;
    color: #fff;
    font-size: 46px;
    font-weight: 400;
  }
  .line {
    width: 230px;
    height: 2px;
    margin-bottom: 80px;
    background-color: #fff;
  }
  .login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 440px;
    height: 430px;
    background-color: rgba(4, 28, 75, 0.5);
    h2 {
      color: #fff;
      font-size: 28px;
      font-weight: 400;
      margin: 50px auto 50px;
    }
    .youke {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: transparent;
      color: #fff;
      font-size: 28px;
      font-weight: 400;
      margin: 30px auto 50px;
    }
  }
  /* 表单 */
  .el-form ::v-deep {
    width: 100%;
    height: 100%;
    padding: 0 48px;
    // 表单项
    .el-form-item {
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 20px;
      // 表单项label标签
      .el-form-item__label {
        width: 100px;
        color: $pry;
        font-size: 14px;
        text-align: right;
      }
      // 表单项内容
      .el-form-item__content {
        display: flex;
        align-items: center;
        flex: 1;
        .user-icon,
        .pwd-icon {
          position: absolute;
          width: 28px;
          height: 28px;
          background-color: pink;
          top: 11px;
          left: 7px;
          z-index: 1;
        }
        .user-icon {
          background: url("~@/assets/images/login/user_icon.png") no-repeat
            center / 100% 100%;
        }
        .pwd-icon {
          background: url("~@/assets/images/login/pwd_icon.png") no-repeat
            center / 100% 100%;
        }
        .login-btn {
          // background-color: #0080ff;
          // border-color: #0080ff;
          font-size: 18px;
        }
      }
      // 表单校验错误输入框边框颜色
      &.is-error .el-input__inner {
        border-color: #f56c6c;
      }
    }
    .el-form-item:nth-child(3) {
      height: 50px;
      .el-form-item__content {
        position: relative;
        width: 100%;
        height: 50px;
        label {
          position: absolute;
          left: 10px;
          top: 18px;
          display: flex;
          align-items: center;
          color: #fff;
          cursor: pointer;
          input {
            width: 14px;
            height: 14px;
            margin-right: 18px;
          }
        }
        .forget {
          position: absolute;
          right: 20px;
          color: #fff;
          background-color: transparent;
        }
      }
    }
  }
  /* 输入框 */
  .el-input ::v-deep {
    .el-input__inner {
      width: 100%;
      height: 50px;
      padding-left: 42px;
      background-color: #fff;
      // border-color: #2e6d8d;
      color: #000;
      font-size: 14px;
      &:hover {
        // border-color: $pry2;
        border-color: transparent;
      }
      &:focus {
        // border-color: $pry;
        border-color: transparent;
      }
      &::placeholder {
        color: #9f9f9f;
        font-size: 14px;
      }
    }
  }
  .login-btn {
    width: 100%;
  }
}
</style>
