<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-04-04 09:45:36
 -->
<template>
  <div class="login-wrap">
    <section>
      <div class="login-body-head border-box flex">
        <img class="login-body-logo" src="../../assets/logo-text.png" alt="logo" />
      </div>
      <div class="login-body">
        <i class="iconfont-hb3 iconpre" @click="arrowClick('left')"></i>
        <i class="iconfont-hb3 iconnext" @click="arrowClick('right')"></i>
        <el-carousel arrow="never" ref="cardShow" height="262px" indicator-position="none" :autoplay="false" @change="changeEnterprise">
          <el-carousel-item v-for="item in enterpriseList" :key="item.wxEnterpriseId">
            <div class="info flex">
              <p class="info_img"><img :src="item.corpSquareLogoUrl" alt="" /></p>
              <p class="info_name">{{ item.corpName }}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
        <el-button type="primary" @click="toIndex">登录</el-button>
      </div>
    </section>
  </div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';

export default {
  name: 'login',
  data() {
    return {
      active: 0,
      enterpriseId: '', // 当前选择的 企业 id
      // 企业列表
      enterpriseList: [
        /*{
            enterpriseId  : '1231',
            logoUrl: require("../../assets/logo.png"),
            enterpriseName: '达摩网络'
          },*/
      ],

      // 登录
      numberCode: ''
    };
  },
  computed: {},
  methods: {
    /**
     * 处理路由跳转
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      that.$router.push({
        path: val.path
      });
    },
    /**
     *  登录
     */
    toIndex: _debounce(function() {
      const that = this;
      that.toLogin();
    }, 500),

    /**
     *  登录 --- api
     */
    toLogin() {
      const that = this;
      const href = `${window.location.origin}/haoban-manage3-web/gic-login?wxEnterpriseId=${that.enterpriseList[that.active].wxEnterpriseId}&random=${that.$route.query.random}`;
      window.location.href = href;
    },
    changeEnterprise(val) {
      this.active = val;
    },
    getList() {
      getRequest(`/haoban-manage3-web/login-wx-enterprise-list?random=${this.$route.query.random}`, {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            this.enterpriseList = resData.result;
            if (resData.result.length === 1) {
              this.toLogin();
              return;
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          this.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    arrowClick(val) {
      if (val === 'right') {
        this.$refs.cardShow.next();
      } else {
        this.$refs.cardShow.prev();
      }
    }
  },
  mounted() {
    const that = this;
    if (this.$route.query.random) {
      that.getList();
    }
    if (!!sessionStorage.getItem('userInfos')) {
      sessionStorage.removeItem('userInfos');
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.login-wrap {
  width: 100%;
  min-height: 100vh;
  padding-top: 178px;
  box-sizing: border-box;
  background: url('../../assets/BG.png') no-repeat;
  background-size: cover;

  .login-body-head {
    justify-content: center;
    align-items: center;
    margin-bottom: 34px;
    .login-body-logo {
      height: 32px;
      margin-right: 13px;
    }
    .login-body-title {
      font-size: 16px;
      font-weight: 600;
      color: #2da8ff;
      line-height: 22px;
    }
  }
  .login-body {
    position: relative;
    width: 430px;
    height: 283px;
    background: #ffffff;
    box-shadow: 0px 6px 8px 0px rgba(215, 218, 231, 0.49);
    border-radius: 8px;
    margin: 0 auto;
    .iconfont-hb3 {
      position: absolute;
      top: 116px;
      z-index: 4;
      font-size: 30px;
      color: #ebecf0;
    }
    .iconpre {
      left: 26px;
    }
    .iconnext {
      right: 30px;
    }
    .info {
      padding-top: 70px;
      flex-direction: column;
      align-items: center;
      .info_img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 46px;
        height: 46px;
        border-radius: 100%;
        overflow: hidden;
        margin-bottom: 17px;
        img {
          width: 100%;
        }
      }
      .info_name {
        font-size: 14px;
        font-weight: 400;
        color: #303133;
        line-height: 20px;
      }
    }
  }
  .el-button {
    position: relative;
    top: -56px;
    z-index: 3;
    display: block;
    margin: 0 auto;
    width: 281px;
    height: 40px;
    font-size: 16px;
    background: #2f54eb;
    border-radius: 2px;
  }
}
</style>
