<template>
  <div class="login">
    <div class="login-weaper">
      <div class="login-left">
        <div class="login-time">{{ time.txt }}</div>
        <div class="login-left-box">
          <div>
            <div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
            <h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
            <div class="msg">
              <div class="msg-author">
                <span>{{ quotations.name }}</span>
                <span>{{ quotations.comeFrom }}</span>
              </div>
              <div class="msg-txt">{{ quotations.content }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="login-right">
        <div class="login-main">
          <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
          <el-form class="el-form login-form">
            <el-form-item prop="username" class="margin-left_0">
              <el-input
                  type="text"
                  placeholder="请输入账号"
                  prefix-icon="el-icon-user"
                  v-model="ruleForm.username"
                  clearable
                  autocomplete="off"
                  @keyup.enter.native="submitForm"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="password" class="margin-left_0">
              <el-input
                  type="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  :show-password="true"
                  @keyup.enter.native="submitForm"
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="code" class="margin-left_0">
              <div class="el-row" span="24">
                <div class="el-col el-col-16">
                  <el-input
                      type="text"
                      maxlength="4"
                      placeholder="请输入验证码"
                      prefix-icon="el-icon-position"
                      v-model="ruleForm.code"
                      clearable
                      autocomplete="off"
                      @keyup.enter.native="submitForm"
                  ></el-input>
                </div>
                <div class="el-col el-col-8">
                  <div class="login-code">
                    <img @click="getCode" class="login-code-img" style="margin-top: 0" :src="captcha" title="点击获取新的验证码">
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="login-submit" @click="submitForm" :loading="btnLoading">
                <span>登 录</span>
              </el-button>
            </el-form-item>
          </el-form>
          <div class="login-menu"></div>
        </div>
      </div>
    </div>
    <div class="vue-particles">
      <vue-particles color="#dedede" shapeType="star" linesColor="#dedede" hoverMode="grab" clickMode="push" style="height: 100%"></vue-particles>
    </div>
  </div>
</template>

<script>
import Storage from '@/utils/storage';
import { formatDate, formatAxis } from '@/utils/formatTime';
import Cookies from "js-cookie";
export default {
  data() {
    return {
      quotationsList: [
        {
          name: '颜渊',
          comeFrom: '论语',
          content:
              '自己不喜欢的，就不要强加给别人。饥寒是自己不喜欢的，不要把它强加给别人；耻辱是自己不喜欢的，也不要把它强加给别人。将心比心，推己及人，从自己的利与害想到对别人的利与害，多替别人着想，这是终生应该奉行的原则。',
        },
        {
          name: '荀子',
          comeFrom: '劝学',
          content:
              '木料经过木工用墨线（木工用具）划直线加工以后，就变直了；金属物品在磨刀石上磨砺后，就能锋利。人经过学习磨练，自我反省，就会变得聪慧明智，不犯错误，也越来越坚强。',
        },
        {
          name: '里仁',
          comeFrom: '论语',
          content:
              '见到贤人，就应该想着向他学习；看见不贤的人，便应该自己反省，对不如自己的人喜欢讥笑、轻视，因而沾沾自喜；对比自己强的人喜欢贬低，甚至嫉妒、畏惧退缩，害怕与他们交往：这都是不正确的态度。',
        },
        {
          name: '述而',
          comeFrom: '论语',
          content:
              '君子心地平坦宽广，小人却经常局促忧愁。君子襟怀坦白，安贫乐业，与人为善，知足常乐，所以能坦荡荡。小人欲念太多，患得患失，忧心忡忡，怨天尤人，局促不安，所以常心怀戚戚。',
        },
        {
          name: '老子',
          comeFrom: '第六十四章',
          content:
              '千里遥远的路程是从脚下第一步开始的。任何事情的成功都是从头开始，从小到大逐渐积累的。万事开头难，没有个开头就不会有结果。任何事情都要从一点一滴的小事开始做起。',
        },
        {
          name: '朱熹',
          comeFrom: '训学斋规',
          content:
              '读书有三到，谓心到，眼到，口到。心不在此，则眼看不仔细，心眼既不专一，却只漫浪诵读，决不能记，久也不能久也。三到之中，心到最急，心既到矣，眼口岂不到乎？',
        },
      ],
      quotations: {},
      btnLoading: false,
      ruleForm: {
        username: '',
        password: '',
        code: '',
        uuid: ''
      },
      time: {
        txt: '',
        fun: null,
      },
      captcha: ''
    };
  },
  computed: {
    // 获取当前时间
    currentTime() {
      return formatAxis(new Date());
    },
    // 获取布局配置信息
    getThemeConfig() {
      return {
        globalViceTitle: '报告管理系统',
        globalViceDes: '用以对报告进行管理的系统',
        globalTitle: '系统登录'
      };
    },
  },
  created() {
    
    var url=location.href;
    var params=url.split("?");
       if(params[1]){
         var a = params[1]
          var b= a.split("=")
          // console.log(b[1])
          if(b){
            var token=b[1]
            this.$api.IsadminLogin({token:token}).then(response=>{
              // console.log(response)
              if(response.data==true){
                 this.$router.push({
                    path: '/admin/rManage'
                  })
              }else{
                this.$message.error('您未登录，请重新登录！')
              }
              
            })
             
          }
 
       }
   
    this.initTime();
   
  },
  mounted() {
    this.initRandomQuotations();
    this.getCode()
    const username = Storage.getStr('username')
    const password = Storage.getStr('password')
    if (username) {
      this.ruleForm.username = username
    }
    if (password) {
      this.ruleForm.password = password
    }
  },
  methods: {
    // 随机语录
    initRandomQuotations() {
      this.quotations = this.quotationsList[Math.floor(Math.random() * this.quotationsList.length)];
    },
    // 初始化左上角时间显示
    initTime() {
      this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
      this.time.fun = setInterval(() => {
        this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
      }, 1000);
    },
    getCode() {
      this.$api.getVerifyCode().then(response => {
        this.ruleForm.uuid = response.data.uuid
        this.captcha = response.data.captcha
      })
    },
    // 登录按钮点击
    submitForm() {
      this.btnLoading = true;
      this.$api.adminLogin(this.ruleForm).then(response => {
        Storage.setStr('username', this.ruleForm.username)
        Storage.setStr('password', this.ruleForm.password)
        Cookies.set("token", response.data);
        let redirect = decodeURIComponent(this.$route.params.redirect||'/admin')
        console.log(redirect)
        this.btnLoading = false
          this.$message.success('登录成功')

            this.$router.push({
              path: redirect
            })
    
      }).catch(error => {
        this.getCode()
        this.btnLoading = false
      })
    },
  },
  destroyed() {
    clearInterval(this.time.fun);
  },
};
</script>

<style lang="scss">
.login {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  position: relative;
  .vue-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
  }
  .login-weaper {
    margin: auto;
    height: 500px;
    display: flex;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .login-left {
      width: 491px;
      padding: 20px;
      font-size: 16px;
      color: #fff;
      position: relative;
      background-color: rgba(64, 158, 255, 0.8);
      display: flex;
      flex-direction: column;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      .login-time {
        width: 100%;
        color: #fff;
        opacity: 0.9;
        font-size: 14px;
        overflow: hidden;
      }
      .login-left-box {
        flex: 1;
        overflow: hidden;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 80px 45px;
        .logo {
          font-size: 22px;
          margin-bottom: 15px;
        }
        .title {
          color: #fff;
          font-weight: 300;
          letter-spacing: 2px;
          font-size: 16px;
        }
        .msg {
          color: #fff;
          font-size: 13px;
          margin-top: 35px;
          .msg-author {
            opacity: 0.6;
            span:last-of-type {
              margin-left: 15px;
            }
          }
          .msg-txt {
            margin-top: 15px;
            line-height: 22px;
          }
        }
      }
    }
    .login-right {
      width: 491px;
      padding: 20px;
      position: relative;
      align-items: center;
      display: flex;
      background-color: rgba(255, 255, 255, 1);
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      .login-main {
        margin: 0 auto;
        width: 70%;
        .login-title {
          color: #333;
          margin-bottom: 40px;
          font-weight: 500;
          font-size: 22px;
          text-align: center;
          letter-spacing: 4px;
        }
        .login-form {
          margin: 10px 0;
          i {
            color: #333;
          }
          .el-form-item {
            margin-bottom: 20px !important;
            .login-code {
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin: 0 0 0 10px;
              user-select: none;
              .login-code-img {
                margin-top: 2px;
                width: 100px;
                height: 38px;
                border: 1px solid #dcdfe6;
                color: #333;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 5px;
                line-height: 38px;
                text-indent: 5px;
                text-align: center;
                cursor: pointer;
                transition: all ease 0.2s;
                border-radius: 4px;
                &:hover {
                  border-color: #c0c4cc;
                  transition: all ease 0.2s;
                }
              }
            }
            .login-submit {
              width: 100%;
              height: 45px;
              letter-spacing: 2px;
              font-weight: 300;
            }
          }
        }
        .login-menu {
          margin-top: 30px;
          width: 100%;
          text-align: left;
          a {
            color: #999;
            font-size: 12px;
            margin: 0 8px;
            text-decoration: none;
            &:hover {
              color: #1e9fff;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style>
