<template>
  <div class="login-wrap">
    <header>
      <div class="login-wrap-header">
        <img class="login-wrap-inline" src="../../assets/logo.png" alt="logo"/>
        <span class="login-wrap-inline">好办管理后台</span>
      </div>
    </header>
    <section>
      <div class="login-wrap-body">
        <div class="login-wrap-out">
          <div class="login-wrap-inner">
            <div class="login-wrap-inner__block" v-if="canSelectFlag">
              <div class="login-wrap-inner__head">扫码登录</div>
              <div class="login-wrap-inner__body">
                <!-- 二维码失效 -->
                <div class="login-wrap-inner__expired" v-if="expiredFlag">
                  <p class="login-wrap-expired__title">您的二维码已失效，</p>
                  <p class="login-wrap-expired__title m-t-10">请点击下方刷新按钮</p>
                </div>
                <div id="qrcode"></div>
                <p class="login-wrap-inner__title">请使用好办APP扫一扫登录<i class="el-icon-refresh" @click="refreshCode">刷新</i></p>
              </div>
            </div>
            <!-- 选择企业 -->
            <div class="login-wrap-inner__block" v-if="!canSelectFlag">
              <div class="login-wrap-inner__head">选择已有企业</div>
              <div class="login-wrap-inner__selectBody">
                <!-- <el-carousel :autoplay="false" arrow="always" height="100px">
                  <el-carousel-item v-for="item in enterpriseList" :key="item.id">
                    <img :src="item.src" alt="src" />
                    <p>{{item.name}}</p>
                  </el-carousel-item>
                </el-carousel> -->
                <div class="login-wrap-inner__swiper">
                  <!-- swiper -->
                  <swiper :options="swiperOption">
                    <!-- <div class="login-wrap-inner__swiperWrap"> -->
                      <swiper-slide v-for="item in enterpriseList" :key="item.id">
                        <img class="swiper-slide__img" :src="item.src" alt="src" />
                        <p class="swiper-slide__p">{{item.name}}</p>
                      </swiper-slide>
                    <!-- </div> -->
                    <!-- <div class="swiper-pagination" slot="pagination"></div> -->
                    <div class="swiper-button-prev" slot="button-prev"><i class="el-icon-arrow-left"></i></div>
                    <div class="swiper-button-next" slot="button-next"><i class="el-icon-arrow-right"></i></div>
                  </swiper>
                </div>
                <el-button type="primary" @click="toIndex">登录</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <vue-gic-footer></vue-gic-footer>
    </footer>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

import QRCode from 'qrcodejs2'
export default {
  name: "login",
  data() {
    return {
      qrcodeCase: '', // 二维码实例
      expiredFlag: false, // 二维码过期标志
      canSelectFlag: false, // 能否选择企业标志
      // 企业列表
      enterpriseList:[
        {
          id: '1231',
          src: require("../../assets/logo.png"),
          name: '达摩网络'
        },
        {
          id: '1232',
          src: require("../../assets/logo.png"),
          name: '达摩网络2'
        },
        {
          id: '1233',
          src: require("../../assets/logo.png"),
          name: '达摩网络'
        },
        {
          id: '1234',
          src: require("../../assets/logo.png"),
          name: '达摩网络2'
        }
      ],
      // swiper
      swiperOption: {
        slidesPerView: 3,
        centeredSlides: true,
        spaceBetween: 30,
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
    }
  },
  computed: {

  },
  methods: {
    /**
     * 处理路由跳转
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据
      // //有两个参数
      //{
      //  name:,
      //  path:
      //}
      console.log(val);
      that.$router.push({
        path: val.path
      })
    },

    /**
     *  折叠事件
     */
    collapseTag(val){
      const that = this;
      console.log(val);
      that.collapseFlag = val
    },

    /**
     *  生成二维码
     */
    qrcode (text) {
      const that = this;
      that.qrcodeCase = new QRCode('qrcode',
        {
          width: 210,
          height: 210, // 高度
          text: text, // 二维码内容 //
          //render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas） //
          //background: '#f0f',
          //foreground: '#ff0'
        }
      )
      console.log(that.qrcodeCase)
    },

    /**
     *  刷新二维码
     */
    refreshCode() {
      const that = this;
      document.getElementById("qrcode").innerHTML = '';
      that.qrcodeCase.clear(); // 先清除原有的
      that.qrcode(5666315956663159)
      that.expiredFlag = false; //隐藏过期遮罩层
    },

    /**
     *  登录
     */
    toIndex() {
      const that = this
      that.$router.push('/index')
    }


  },
  mounted() {
    const that = this

    /**
     *生成二维码
     */

    // that.qrcode(55555566767)
  },
  components: {
    swiper,
    swiperSlide
  }
}

</script>
<style lang="less" scoped>
  .login-wrap {
    position: relative;

    header {
      width: 100%;
      padding: 0;
      margin: 0;
      background: rgba(255,255,255,1);
    }

    &-header {
      width: 1400px;
      height: 64px;
      line-height: 64px;
      padding: 0 0 0 60px;
      margin: 0 auto;
      background: rgba(255,255,255,1);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      /*-webkit-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
      -moz-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
      box-shadow: 0px 0px 10px rgba(147,165,184,0.13);*/
    }

    &-inline {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #1F2F3D;
    }

    &-body {
      width: 100%;
      background: url("../../assets/login/banner.png") no-repeat left top;
      background-size: auto 640px;
    }

    &-out {
      position: relative;
      width: 1400px;
      height: 640px;
      margin: 0 auto;
      /*background: rgba(0,0,0,1);*/
    }

    &-inner {
      position: absolute;
      top: 77px;
      right: 170px;
      width: 356px;
      height: 382px;
      background: rgba(255,255,255,1);
      border: 1px solid rgba(235,238,245,1);
      border-radius: 4px;
      -webkit-box-shadow: 2px 0px 12px rgba(6,19,33,0.1);
      -moz-box-shadow: 2px 0px 12px rgba(6,19,33,0.1);
      box-shadow: 2px 0px 12px rgba(6,19,33,0.1);

      &__block {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
      }

      &__head {
        width: 100%;
        height: 64px;
        line-height: 64px;
        border-bottom: 1px solid rgba(235,238,245,1);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 18px;
        color: #303133;
      }
      &__body {
        position: relative;
        width: 100%;
        height: 317px;
        text-align: center;
        padding: 32px 0 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        #qrcode {
          width: 210px;
          margin: 0 auto;
        }
      }

      &__title {
        width: 100%;
        margin-top: 20px;
        font-size: 14px;
        color: #606266;
      }

      &__expired {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 32px;
        left: 73px;
        width: 210px;
        height: 210px;
        background: rgba(255,255,255,1);
        opacity: 0.9;
      }

      &__selectBody {
        position: relative;
        width: 100%;
        height: 317px;
        text-align: center;
        padding: 32px 21px 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        .el-button--primary {
          width: 100%;
          margin-top: 67px;
        }
      }

      &__swiper {
        margin-top: 30px;

        .swiper-slide {
          &__img {
            width: 72px;
            height: 72px;
            border-radius: 8px;
          }
          &__p {
            margin-top: 14px;
            font-size: 14px;
            color: #6B6D71;
          }
        }
        .swiper-button-prev {
          height: 97px;
          margin-top: -55px;
          left: 0;
          padding-top: 55px;
          background: #fff;
          background-image: none;

          i {
            color: #303133;
          }
        }
        .swiper-button-next {
          height: 97px;
          margin-top: -55px;
          right: 0;
          padding-top: 55px;
          background: #fff;
          background-image: none;

          i {
            color: #303133;
          }
        }
      }

    }


    &-expired__title {
      font-size: 14px;
      color: #F56C6C;
    }

    .el-icon-refresh {
      color: #1890ff;
      cursor: pointer;
    }
  }
</style>
