<template>
  <div class="login-container" ref="login" @keyup.enter.native="handleLogin">
    <!-- <cmanage-title @change="changeActive"></cmanage-title> -->
    <div class="login-weaper animated bounceInDown">
      <div class="login-page-title">
        <img src="/img/icon/logo_sczj.png" alt="">
        四川省人力资源和社会保障</div>
      <div class="login-wrapper-small">
        <div class="login-content">
          <div class="login-left">
            <img class="img" src="/img/bg/back_zj.png" alt />
          </div>
          <div class="login-border">
            <user-login v-if="activeName === 'login'" @change="changeActive" />
            <forget-pwd v-else-if="activeName === 'pwd'" @change="changeActive" />
            <user-register v-else-if="activeName === 'register'" @change="changeActive" />
            <work-station-login v-else-if="activeName === 'workstation'" @change="changeActive"></work-station-login>
          </div>
        </div>
      </div>

      <div data-v-3c692830="" style="text-align: center; margin-top: 20px; padding-bottom: 30px;">
        <div data-v-3c692830="" style="font-size: 12px; color: #40a9ff;">Copyright @ 德阳市人力资源和社会保障局</div>
      </div>
    </div>
  </div>
</template>
<script>
import userLogin from "./userlogin";
import forgetPwd from "./forgetPwd";
import userRegister from "./userRegister";
import workStationLogin from "./workStationLogin";
import topLang from "@/page/index/top/top-lang";
import CmanageFooter from './CmanageFooter'
import CmanageTitle from './CmanageTitle'
import jlTab from "@/components/jl-tab/main";

export default {
  name: "login",
  components: {
    topLang,
    forgetPwd,
    userLogin,
    userRegister,
    workStationLogin,
    CmanageFooter,
    CmanageTitle,
    jlTab
  },
  data() {
    return {
      activeName: "login",
      fixed: 0,
      homeList: [],
      fixedShow: false,
      maxFixed: 2000
    };
  },
  watch: {},
  created() {
  },
  mounted() {
    this.$refs.login.addEventListener('scroll', this.scroll)
    this.maxFixed = this.$refs.login.scrollHeight
  },
  computed: {},

  props: [],
  methods: {
    introduce(item) {
      const arr = { "企业招聘": 0, "一键录用": 1, "电子合同": 2, "职业伤害": 3, "工资结算": 4, "信用评价": 5 }
      this.$refs.intro[arr[item]].scrollIntoView()
    },
    changeActive(name) {
      this.activeName = name;
    },
    handleSelect(index) {
      if (index == 1) {
        this.$router.push({ path: "/login" });
      } else if (index == 2) {
        window.location.href = "http://crm.jobslink.cn/crm";
      }
    },
    scroll() {
      const tab = this.$refs.tab.$el
      const login = this.$refs.login
      this.fixedShow =
        login.scrollTop > tab.offsetTop &&
        login.scrollTop < this.maxFixed - tab.clientHeight;
      if (this.fixedShow) {
        const number = login.scrollTop - tab.offsetTop
        const index = Math.floor(number / 410)
        const tabData = this.$refs.tab._data
        if (tabData.active === 4 && tabData.activeStatus) return
        this.$refs.tab.tabNum(index)
      }
    }
  },
};
</script>

<style lang="scss">
@import "@/styles/login.scss";
</style>
