<template>
  <div class="login-container">
    <div class="login-logo">
      <!--<el-image :src="require('@/assets/login_images/logo.png')"></el-image>-->
      <!--<el-button class="login-el-button" type="primary" @click="trialShow">
        云平台免费使用
      </el-button>-->
    </div>
    <div class="login">
      <img
        :src="require('@/assets/login_images/login_wrap.png')"
        style="width: 100%"
      />
      <div class="el-tabs">
        <div class="el-tabs-left">
          <div style="text-align: center">
            <img
              class="el-tabs-ewm"
              style="width: 160px; height: 160px; margin: auto"
              :src="codeUrl"
              alt=""
            />
            <div>
              <!-- <span v-show="show" class="getCode" @click="getQrCode">
                点击扫码登录
              </span>
              <span v-show="!show" class="count">{{ count }}s后失效</span>-->
            </div>
          </div>
        </div>
        <div class="el-tabs-right">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item prop="userName">
              <el-input
                v-model="form.userName"
                v-focus
                :placeholder="$t('login.username')"
                tabindex="1"
                type="text"
              >
                <template #prefix>
                  <vab-remix-icon icon="user-line" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passwords">
              <el-input
                :key="passwordType"
                ref="password"
                v-model="form.passwords"
                :placeholder="$t('login.password')"
                :type="passwordType"
                tabindex="2"
                @keyup.enter="handleLogin"
              >
                <template #prefix>
                  <vab-remix-icon icon="lock-line" />
                </template>
                <template v-if="passwordType === 'password'" #suffix>
                  <vab-remix-icon
                    class="show-password"
                    icon="eye-off-line"
                    @click="handlePassword"
                  />
                </template>
                <template v-else #suffix>
                  <vab-remix-icon
                    class="show-password"
                    icon="eye-line"
                    @click="handlePassword"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-button
              :loading="loading"
              class="login-btn"
              type="primary"
              size="small"
              style="width: 77%; margin-left: 23%"
              @click="handleLogin"
            >
              {{ $t('login.login') }}
            </el-button>
          </el-form>
        </div>
      </div>
      <!--<el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="密码登录" name="first">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            class="login-form"
            label-position="left"
          >
            <el-form-item prop="userName">
              <el-input
                v-model="form.userName"
                v-focus
                placeholder="请输入用户名"
                tabindex="1"
                type="text"
              >
                <template #prefix>
                  <vab-remix-icon icon="user-line" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passwords">
              <el-input
                :key="passwordType"
                ref="password"
                v-model="form.passwords"
                placeholder="请输入密码"
                :type="passwordType"
                tabindex="2"
                @keyup.enter="handleLogin"
              >
                <template #prefix>
                  <vab-remix-icon icon="lock-line" />
                </template>
                <template v-if="passwordType === 'password'" #suffix>
                  <vab-remix-icon
                    class="show-password"
                    icon="eye-off-line"
                    @click="handlePassword"
                  />
                </template>
                <template v-else #suffix>
                  <vab-remix-icon
                    class="show-password"
                    icon="eye-line"
                    @click="handlePassword"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-button
              :loading="loading"
              class="login-btn"
              type="primary"
              @click="handleLogin"
            >
              登录
            </el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="微信扫码登录" name="second">
          <div style="text-align: center">
            <p style="color: orangered">{{ loginMessage }}</p>
            <img style="width: 200px; height: 200px" :src="codeUrl" alt="" />
            <div>
              <span v-show="show" class="getCode" @click="getQrCode">
                刷新二维码
              </span>
              <span v-show="!show" class="count">{{ count }}s后失效</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>-->
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { isPassword } from '@/utils/validate';
import { getQrCode, codeLoginCallback } from '@/api/user';
import { getToken, removeToken, setToken } from '@/utils/token';
export default {
  name: 'Login',
  components: {},
  directives: {
    focus: {
      inserted(el) {
        el.querySelector('input').focus();
      },
    },
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer);
    next();
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if ('' === value) {
        callback(new Error('用户名不能为空'));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码不能少于6位'));
      } else {
        callback();
      }
    };
    return {
      nodeEnv: process.env.NODE_ENV,
      form: {
        userName: '',
        passwords: '',
      },
      activeName: 'first',
      rules: {
        userName: [
          {
            required: true,
            trigger: 'blur',
            validator: validateUsername,
          },
        ],
        passwords: [
          {
            required: true,
            trigger: 'blur',
            validator: validatePassword,
          },
        ],
      },
      show: true,
      count: '',
      loading: false,
      passwordType: 'password',
      timer: 0,
      codeUrl: '',
      loginMessage: '',
      realtimeLoginDataTimer: '',
      wechat: {
        ticket: '',
        expire_seconds: '',
        url: '',
        scene: '',
        ShowQrCodeUrl: '',
      },
    };
  },
  computed: {
    ...mapGetters({
      title: 'settings/title',
    }),
  },
  mounted() {
    this.form.userName = '';
    this.form.passwords = '';
  },
  methods: {
    ...mapActions({
      login: 'user/login',
    }),
    async handleClick(tab, event) {
      if (tab.paneName == 'second') {
        this.getQrCode();
      }
    },
    refresh() {
      // this.timer=null
      // clearInterval(this.timer)
      // this.timer = setTimeout(()=>{
      //   // location.reload() //原生刷新
      //    //路由刷新
      // },5000)
      // var timer = setTimeout(() => {
      //   //需要定时执行的代码
      // this.$router.go();
      // }, 1000);
      // window.location.href = '';
    },
    // 监听扫码登录
    async isLogin() {
      const { code, data, msg } = await codeLoginCallback(this.wechat);
      if (code == 0 || code == '0') {
        setToken(data.token);
        clearInterval(this.timer);
        // console.log(window.location.hostname);
        window.location.href = '/#/index';
      } else {
        this.loginMessage = msg;
        if (data.openid != undefined) {
          sessionStorage.setItem('userOpenid', data.openid);
        }
      }
    },
    async jump() {
      await this.$router.push('/');
    },
    getCode() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            this.isLogin();
          } else {
            this.show = true;
            clearInterval(this.timer);
            // clearInterval(this.realtimeLoginDataTimer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    async getQrCode() {
      const { data } = await getQrCode();
      const url = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=';
      this.codeUrl = url + data.ticket;
      this.wechat.scene = data.scene;
      this.getCode();
    },
    trialShow() {
      this.$router.push({
        path: 'trialAdd',
      });
    },
    handlePassword() {
      this.passwordType === 'password'
        ? (this.passwordType = '')
        : (this.passwordType = 'password');
      this.$nextTick(() => {
        this.$refs.passwords.focus();
      });
    },
    handleLogin() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.loading = true;
            await this.login(this.form);
            await this.$router.push('/');
          } finally {
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.login-container {
  height: 100vh;
  background: url('~@/assets/login_images/background.png') center center fixed
    no-repeat;
  background-size: 100% 100%;
  .login-item {
    margin-left: 50px;
  }
  .login {
    width: 660px;
    margin: auto;
    position: relative;
    .el-tabs__nav-wrap::after {
      background-color: white;
    }
    .el-tabs {
      position: absolute;
      top: 80px;
      left: 0;
      width: 560px;
      margin: 30px 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-tabs__nav-wrap {
        padding: 30px 0;
        padding-left: 120px;
      }
      .el-tabs-left {
        width: 200px;
        .getCode {
          color: white;
        }
        .count {
          color: white;
        }
      }
      .el-tabs-right {
        width: 350px;
        .el-form-item {
          margin-bottom: 10px !important;
          .el-input__inner {
            background: rgba(2, 35, 115, 0.6) !important;
            border: 1px solid rgba(11, 161, 248, 0.3) !important;
            color: white;
          }
        }
      }
    }
    .login-form i {
      top: 0 !important;
    }
  }
}
.login-logo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 60px 60px;
  .login-el-button {
    background: rgba(2, 35, 115, 0.6);
  }
}
.login-form {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  background-size: 100% 100%;
  padding: 0 60px 30px;
  .title {
    font-size: 54px;
    font-weight: 500;
    color: $base-color-black;
  }
  .title-tips {
    margin-top: 29px;
    font-size: 20px;
    font-weight: 400;
    color: $base-color-black;
  }
  .login-btn {
    display: inherit;
    width: 100%;
    margin-top: 5px;
    border: 0;
    &:hover {
      opacity: 0.9;
    }
    .forget-passwordword {
      width: 100%;
      margin-top: 40px;
      text-align: left;
      .forget-password {
        width: 129px;
        height: 19px;
        font-size: 20px;
        font-weight: 400;
        color: rgba(92, 102, 240, 1);
      }
    }
  }
  .tips {
    margin-bottom: 10px;
    font-size: $base-font-size-default;
    color: $base-color-black;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .title-container {
    position: relative;
    .title {
      margin: 0 auto 40px auto;
      font-size: 34px;
      font-weight: bold;
      color: $base-color-blue;
      text-align: center;
    }
  }
  i {
    position: absolute;
    top: 8px;
    left: 5px;
    z-index: $base-z-index;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }
  .show-password {
    position: absolute;
    right: 25px;
    left: -35px;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }
  :deep {
    .el-form-item {
      padding-right: 0;
      margin: 20px 0;
      color: #454545;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2px;
      &__content {
        min-height: $base-input-height;
        line-height: $base-input-height;
      }
      &__error {
        position: absolute;
        top: 100%;
        left: 18px;
        font-size: $base-font-size-small;
        line-height: 18px;
      }
    }
    .el-input {
      box-sizing: border-box;
      input {
        height: 48px;
        padding-left: 50px;
        font-size: $base-font-size-default;
        line-height: 58px;
        background-color: white;
        border-radius: 2px;
      }
    }
  }
}
</style>
