<template>
  <div class="login" v-if="show">
    <div class="login-weaper">
      <div class="login-header">
        <div class="login-bar">
          <img src="@/assets/logo-3.png" class="logo">
        </div>
        <div class="login-time">{{ time.txt }}</div>
      </div>
      <div class="login-body">
        <div class="login-content">
          <div class="left">
            <div class="left-header">
              <div class="title">知识产权风控与组织记忆系统</div>
              <div class="title2">Intellectual property risk Control and organizational memory system</div>
            </div>
            <div class="left-content">
              <p>专利制度是企业参与市场竞争特别是国际化竞争所不能绕开的，只有充分的、熟练的掌握并利用好专利制度，才能在市场竞争中游刃有余，进而取得最大化的商业利益、国家利益。</p>
              <p>知识产权分析是在专利制度的框架下，充分利用现有的产业和专利信息，运用大数据和专利分析的手段与方法进行分析、梳理、总结、判断，发现问题并给出解决问题的方案。</p>
              <p>本系统为用户提供了一种知识产权风控体系和组织记忆的操作思路和方法，通过解决企业具体问题场景的方式，为用户提供了具有可操作性的参考，并由此协助企业形成自主知识传承、叠加、不断衍化提升并且能够重复再应用的核心智谋知识系统。</p>
            </div>
          </div>
          <div class="right">
            <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="bottom-menu">
              <div>
                <el-link class="font" @click="resePassword">重置密码</el-link>
              </div>
              <div>
                <el-link class="font" @click="inviteUser">邀请码激活</el-link>
              </div>
            </div>
          </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>

    <resePassword ref="resePassword"></resePassword>
    <invite ref="inviteDialog" @username="handleName"></invite>
  </div>
</template>

<script>
import Storage from '@/utils/storage';
import { formatDate, formatAxis } from '@/utils/formatTime';

import resePassword from './compoments/resePassword.vue'
import invite from './compoments/invite'
import { commonData,webSocket } from "@/views/layout/mixins";

export default {
  components: {
    resePassword,
    invite
  },
  mixins:[commonData,webSocket],
  data() {
    return {
      show:false,
      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: {
    canShow(){
      return this.$route.params.canShow
    },
    // 获取当前时间
    currentTime() {
      return formatAxis(new Date());
    },
    // 获取布局配置信息
    getThemeConfig() {
      return {
        globalViceTitle: '权限管理系统',
        globalViceDes: '用以辅助对用户权限管理的系统',
        globalTitle: '系统登录'
      };
    },
  },
  created() {
    
    var time = new Date(this.$c.updateTime).getTime()
    var time2 = new Date().getTime()
    if(time2 < time){
      if(!this.canShow){
        this.$router.push({path: '/'})
        return false
      }else{
        this.show = true
      }
      
    }else{
      this.show = true
    }
    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: {
    //注册账号
    inviteUser() {
      this.$refs.inviteDialog.open()
    },
    // 获取注册的账号
    handleName(val) {
      this.$set(this.ruleForm,'username',val)
    },
    // 重置密码
    resePassword() {
      this.$refs.resePassword.open()
    },
    // 随机语录
    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)
        this.$cookie.set('token',response.data.token)
        this.btnLoading = false
          this.$message.success('登录成功')
            this.$router.push({
              path: '/home'
            })
            this.DictMessage()
            this.getUserInfo()
            this.getScenario()
            this.getMatter()
            this.getPermissionList()
      }).catch(error => {
        this.getCode()
        this.btnLoading = false
      })
    },
  },
  destroyed() {
    clearInterval(this.time.fun);
  },
};
</script>

<style lang="scss">
.login {
  --headerHeight:70px;
  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{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 99;
    .login-header{
      height: var(--headerHeight);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .login-bar {
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
        cursor: pointer;
        .logo {
          margin-right: 10px;
          height: calc(var(--headerHeight) - 10px);
        }
      }
      .login-time {
        width: 100%;
        color: black;
        font-family: var(--fm);
        opacity: 1;
        font-size: 18px;
        overflow: hidden;
        text-align: right;
      }
    }
    .login-body{
      width: 100%;
      height: calc(100% - var(--headerHeight) - 10px);
      background:linear-gradient(rgba(167, 189, 213,0.3), rgba(178, 186, 225,0.3));
      display: flex;
      .login-content{
        opacity: 1;
        width:auto;
        z-index: 23;
        display: flex;
        align-items: start;
        margin:auto;
        .left{
          // width:100%;
          width: 650px;
          min-width: 650px;
          float: right;
          padding-right:100px;
          flex-basis: 0;
          flex-grow: 1;
          .left-header{
            text-align: center;
            font-family: var(--fm);
            .title{
              font-size: 50px;
              font-weight: bold;
            }
            .title2{
              font-size: 18px;
              font-weight: bold;
            }
          }
          .left-content{
            font-weight: 530;
            color: black;
            font-size: 22px;
          }
        }
        
        .right{
          // width:100%;
          width: 400px;
            min-width: 400px;
          float: left;
          padding:0 100px 30px;
          flex-basis: 0;
          border: 2px solid var(--bg);
          border-radius: 10px;
          margin-top: 20px;
          .login-title{
            font-family: var(--fm);
            text-align: center;
            font-size: 24px;
          }
          .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: 36px;
                  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;
              }
            }
            .el-form-item:last-child{
              margin-bottom: 10px !important;
            }
          }
          .bottom-menu {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .font{
              font-size: 14px;
              font-weight: bolder;
            }
          }
        }
        @media screen and (max-width: 5000px) {
          .left{
            width: 650px;
            min-width: 650px;
            padding-right:100px;
            .left-header{
              .title{
                font-size: 50px;
              }
              .title2{
                font-size: 18px;
              }
            }
            .left-content{
              font-size: 22px;
            }
          }
          .right{
            width: 400px;
            min-width: 400px;
            padding:0 100px 30px;
          }
        }
        @media screen and (max-width: 1400px) {
          .left{
            min-width: 550px;
            width: 550px;
            padding-right:100px;
            .left-header{
              .title{
                font-size: 42px;
              }
              .title2{
                font-size: 16px;
              }
            }
            .left-content{
              font-size: 20px;
            }
          }
          .right{
            min-width: 290px;
            width: 290px;
            padding:0 80px 30px;
          }
        }
        @media screen and (max-width: 1200px) {
          .left{
            min-width: 450px;
            width: 450px;
            padding-right:80px;
            .left-header{
              .title{
                font-size: 34px;
              }
              .title2{
                font-size: 12px;
              }
            }
            .left-content{
              font-size: 16px;
            }
          }
          .right{
            width: 290px;
            min-width: 290px;
            padding:0 60px 30px;
            margin-top: 10px;
          }
        }
        @media screen and (max-width: 1024px) {
          .left{
            min-width: 380px;
            width: 380px;
            padding-right:80px;
            .left-header{
              .title{
                font-size: 29px;
              }
              .title2{
                font-size: 12px;
              }
            }
            .left-content{
              font-size: 14px;
            }
          }
          .right{
            min-width: 270px;
            width: 270px;
            padding:0 60px 30px;
            margin-top: 10px;
          }
        }
        @media screen and (max-width: 800px) {
          .left{
            min-width: 350px;
            width: 350px;
            padding-right: 45px;
            padding-left: 10px;
            .left-header{
              .title{
                font-size: 26px;
              }
              .title2{
                font-size: 12px;
              }
            }
            .left-content{
              font-size: 12px;
            }
          }
          .right{
            width: 220px;
            min-width: 220px;
            padding:0 50px 30px;
            margin-top: 10px;
            .login-title{
              margin: 10px 0;
              font-size: 20px;
            }
            .login-form {
              .el-form-item {
                margin-bottom: 10px !important;
              }
            }
            
          }
        }
      }
    }
  }
}
  </style>
