<!--
  @description: 登录页面
  @author: change by sunxinman
  @routerPath: /login
  @date:  2019/11/15-23:33
-->
<template>
  <div class="login">
    <!-- navbar 头部导航-->
    <headerBar class="headerBar" />
    <section class="login_view">
      <div class="login_view-content clearfix">
        <!-- 左边内容 -->
        <div class="login_left fl" />
        <!-- 右边内容 -->
        <div class="login_right fr">
          <div class="login_right_content">
            <el-row class="tabbar">
              <el-col
                v-for="(item, index) in tabbarList"
                :key="index"
                :span="24 / tabbarList.length"
                class="pointer"
              >
                <div
                  :class="{ selected: loginType === item.typeCode }"
                  class="bar"
                  @mouseenter="loginType = item.typeCode"
                >
                  {{ item.typename }}
                </div>
              </el-col>
            </el-row>
            <div class="user_layout_login">
              <!--扫码登录-->
              <div v-if="loginType === '00'">
                <div style="text-align:center">
                  <img
                    :src="codeContentSrc"
                    draggable="false"
                  >
                </div>
                <div style="text-align:center;margin-top:10px;">
                  打开
                  <span class="colorOrange">中招互连APP，</span>扫码登录
                </div>
              </div>
              <!--CA登录-->
              <div v-if="loginType === '01'">
                <el-select
                  v-model="cavalue"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in calist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-row class="textCenter mt16">
                  <span class="colorOrange">驱动下载</span>
                  <div class="fr">
                    <span class="gray">若使用CA登录，请使用</span>
                    <span class="colorOrange">IE9以上浏览器</span>
                  </div>
                </el-row>
                <el-button
                  class="btn mt16"
                  type="primary"
                >
                  登 录
                </el-button>
              </div>
              <!--普通登录-->
              <div v-if="loginType === '02'">
                <el-form
                  ref="loginForm"
                  :model="loginForm"
                  :rules="ruleForm"
                >
                  <el-form-item prop="userName">
                    <el-input
                      v-model.trim="loginForm.userName"
                      type="text"
                      placeholder="请输入用户名"
                      @keyup.enter.native="submitForm()"
                      @focus="loginFocus"
                    />
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      v-model.trim="loginForm.password"
                      type="password"
                      placeholder="请输入密码"
                      @keyup.enter.native="submitForm()"
                      @focus="loginFocus"
                    />
                  </el-form-item>
                  <el-form-item
                    class="clearfix"
                    prop="randCode"
                  >
                    <el-input
                      v-model.trim="loginForm.randCode"
                      class="fl rand-code-input"
                      placeholder="请输入验证码"
                      @keyup.enter.native="submitForm()"
                    />
                    <img
                      :src="CodeImageSrc"
                      class="rand-code-img fr pointer"
                      title="看不清？换一张"
                      @click.stop="randCodeChange"
                    >
                  </el-form-item>
                  <!-- 滑动验证码 -->
                  <!-- <el-form-item class="clearfix">
                    <slideAly ref="sildeAly" />
                  </el-form-item>-->
                  <el-form-item>
                    <el-row>
                      <el-col>
                        <!-- <el-checkbox
                          v-model="checked"
                          class="gray"
                        >
                          记住账号
                        </el-checkbox> -->
                        <div class="fr">
                          <router-link
                            class="pointer colorOrange"
                            to="/RetrievePassword"
                          >
                            忘记密码
                          </router-link>
                        </div>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item>
                    <!-- 滑动验证码 暂时注释 接口已调好-->
                    <!-- <slideVerify @successVerify="successVerify"> slot="reference"-->
                    <el-button
                      :loading="loading"
                      class="btn"
                      type="primary"
                      @click="submitForm()"
                    >
                      登 录
                    </el-button>
                  </el-form-item>
                  <!--                  <el-form-item>
                    <el-row>
                      <el-col>
                        <div class="fr">
                          <router-link class="pointer colorOrange" to="/register/registerType">
                            用户注册
                          </router-link>
                        </div>
                      </el-col>
                    </el-row>
                  </el-form-item>-->
                </el-form>
              </div>
            </div>
          </div>
          <!--          <div class="back">
            <el-button @click="backHome">
              返回首页
            </el-button>
          </div>-->
        </div>
      </div>
      <div class="desc">
        {{ WebConfig.platform }}
        <!-- copyright© 2015 国信创新招标投标交易平台 版权所有京ICP备09089782号-9 京公网安备 11010802020431号-->
      </div>
    </section>
    <!--选择角色部门弹框组件-->
    <switchRoleDepartDialog
      ref="switchRoleDepart"
      @dialogChange="switchRoleDepartChange"
    />
  </div>
</template>
<script>
/* api*/
import {
  userLogin,
  qRCodeContent,
  getQRCodeContent,
  getQRCodeIsScaned,
  judgeBindingScanCode,
  randCodeImage
} from '@/api/common/loginCenter'
/* 常用方法*/
import { setToken } from '@/assets/js/utils/auth' /* 公用方法 */
import { randCode } from '@/assets/js/validate'
import website from '@/assets/js/config/website' // 获取Encrypt公钥
/* 组件*/
import switchRoleDepartDialog from '@views/common/user/switchRoleDepart-dialog'
// import slideAly from '@comp/common/slideVerify/slideAly.vue'// 滑动验证码
import headerBar from '@/components/layout/components/headerBar'
/* vuex*/
import { mapGetters } from 'vuex'
export default {
  name: 'Login',
  components: {
    switchRoleDepartDialog,
    headerBar
    // slideAly
  },
  data() {
    return {
      loginType: '02', // 索引  00 扫码登录 01 CA登录 02 普通登录
      // tabBar标题
      tabbarList: [
        { typename: '普通登录', typeCode: '02' }
        // { typename: '扫码登录', typeCode: '00' }
        // { typename: 'CA登录', typeCode: '01' },
      ],
      /* -----------普通登录----------- */
      loading: false, // 登录按钮Loding
      checked: false, // 是否记住账号
      loginForm: {
        isForceLogin: '00', // 是否强制登录 00否 01是
        loginType: '00', // 登录类型
        toolType: '01', // 工具类型
        password: '', // 密码
        userName: '' // 用户名
        // randCode: '' // 验证码
      },
      CodeImageSrc: '', // 验证码图片
      // 校验
      ruleForm: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        randCode: [{ required: true, validator: randCode, trigger: 'blur' }]
      },
      // 用户角色信息
      dialogForm: {},
      /* -----------CA登录----------- */
      cavalue: '', // CA登录信息
      calist: [], // CA登录列表信息
      /* -----------扫码登录----------- */
      codeContentSrc: '', // 二维码图片
      tid: '', // 获取二维码的id
      setIntervalQRCode: '', // 定时器-是否已扫码成功
      setJudgeBinding: '' // 定时器-扫描是否登录成功
    }
  },
  computed: {
    /* WebConfig 项目配置数据*/
    ...mapGetters(['WebConfig'])
  },
  watch: {
    // 登录类型索引
    loginType(type) {
      if (type !== '00') {
        clearInterval(this.setIntervalQRCode) // 清除定时器-校验是否已扫描二维码
        clearInterval(this.setJudgeBinding) // 清除定时器-扫描是否登录成功
      } else if (type === '00') {
        // 扫码登录
        this.getQRCodeContent() // 获取二维码
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.setIntervalQRCode) // 清除定时器-校验是否已扫描二维码
    clearInterval(this.setJudgeBinding) // 清除定时器-扫描是否登录成功
  },
  created() {
    this.randCodeChange() // 普通登录-验证码
  },
  methods: {
    backHome() {
      const [url] = window.location.href.split('/bidweb')
      window.location.href = url
    },
    // 获取token 登录
    getToken() {
      this.loading = false // 登录按钮Loding
      this.$store.dispatch('setUserInfo')// 获取用户信息
    },
    /* -----------普通登录----------- */
    // 普通登录-图片验证码
    randCodeChange() {
      const data = {
        type: 'login', // 登陆时
        a: new Date().getTime()
      }
      this.CodeImageSrc = randCodeImage(data)
    },
    // 用户名/密码失去焦点
    loginFocus() {
      // this.$refs.sildeAly.reset()// 重置滑动验证
    },
    // 登录方法调用
    submitForm() {
      this.loading = true // 登录按钮Loding
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.userLogin('00') // 封装登录接口
        } else {
          this.loading = false // 登录按钮Loding
          return false
        }
      })
    },
    // 封装登录接口
    userLogin(isForceLogin) {
      // 设置公钥
      this.$Encrypt.setPublicKey(website.publicKey)
      // 滑动验证码验证是否已滑动
      // this.$refs.sildeAly.validator().then(sildeAly => {
      const data = {
        // ...sildeAly.data, // 滑动验证码-参数
        ...this.loginForm,
        isForceLogin: isForceLogin, // 是否强制登录 00否 01是
        password: this.$Encrypt.encryptLong(this.loginForm.password) // RSA非对称公钥密码加密
        // password: this.$Base64.encode(this.loginForm.password) // 密码转base64
      }
      userLogin(data).then((response) => {
        // 初始化用户信息
        this.$store.commit('SET_INFO')
        // 如果 data为空 则为已登陆账号 通过状态设置是否强制登陆
        if (!response.data) {
          this.$confirm('该账号已在其他地方登录, 是否继续登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            this.userLogin('01')
          })
        } else if (response.data.orgNum === 1 && response.data.rolNum === 1) {
        // 判断是否为单一角色
          setToken(response.data.accessToken) // 存储用户Token
          this.getToken() // 获取token 登录
        } else if (response.data.orgNum >= 1 && response.data.rolNum >= 1) {
          // 判断是否为多角色
          this.$refs.switchRoleDepart.openSwitchRoleDepartDialog(
            {
              ...this.loginForm,
              accessToken: response.data.accessToken // token
            }
          ) // 打开选择组织机构
        } else {
          // 没有角色或机构时
          this.$alert('角色机构信息不完整，请联系系统管理员', '提示', {
            type: 'warning',
            showClose: false,
            confirmButtonText: '确定'
          })
        }
        this.loading = false // 登录按钮Loding
      })
        .catch(() => {
          // sildeAly.reset() // 滑动验证码-重置方法
          this.randCodeChange() // 普通登录-验证码
          this.loginForm.randCode = '' // 图片验证码清空
          this.loading = false // 登录按钮Loding
        })
    },
    // 请选择组织机构弹框打开状态回调
    // dialog true 打开弹框 false 关闭弹框
    switchRoleDepartChange(dialog) {
      this.loading = dialog // 登录按钮Loding
    },
    /* -----------扫码登录----------- */
    // 扫码登录-获取二维码
    getQRCodeContent() {
      getQRCodeContent().then((res) => {
        this.codeContentSrc = qRCodeContent + res.data.data.content // 二维码预览
        this.getQRCodeIsScaned(res.data.data.tid) // 校验是否已扫描二维码
      })
    },
    // 校验是否已扫描二维码
    getQRCodeIsScaned(tid) {
      // 使用定时器进行定时扫描
      this.setIntervalQRCode = setInterval(function() {
        getQRCodeIsScaned({ tid: tid }).then((response) => {
          if (response.data.code === '0') {
            if (response.data.data === '01') {
              clearInterval(this.setIntervalQRCode)
              this.judgeBindingScanCode(tid) // 扫描是否登录成功
            }
          }
        })
      }, 2000)
    },
    // 扫描是否登录成功
    judgeBindingScanCode(tid) {
      // 使用定时器进行定时扫描
      this.setJudgeBinding = setInterval(function() {
        judgeBindingScanCode({ tid: tid }).then((rsp) => {
          if (rsp.data.code === '1') {
            clearInterval(this.setJudgeBinding) // 清除定时器-扫描是否登录成功
          } else if (rsp.data.code === '0') {
            clearInterval(this.setJudgeBinding) // 清除定时器-扫描是否登录成功
            this.getToken() // 获取token 登录
          }
        })
      }, 2000)
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@assets/style/common/public.less";
.login {
  .headerBar {
    display: none;
  }
  .login_view {
    width: 100%;
    min-height: 100%;
    position: relative;
    .login_right {
      .login_right_content {
        .tabbar {
          font-size: 18px;
          .bar {
            color: #131217;
            text-align: center;
            font-weight: 400;
            position: relative;
            &:after {
              content: " ";
              width: 100%;
              height: 2px;
              display: block;
              bottom: -19px;
              left: 0px;
              position: absolute;
              background: #eeeeee;
            }
            &.selected {
              color: @hyacinthine;
            }
            &.selected:after {
              background: @hyacinthine;
            }
          }
        }
      }
    }
    // 版权所有-样式
    .desc {
      width: 100%;
      text-align: center;
      color: @light-font;
    }
  }
}
.web,
.tool {
  .login {
    height: 100vh;
    .login_view {
      background: url("~@/assets/img/common/login/loginbg.png") no-repeat
      center/100% 100%;
      padding-top: calc((100vh - 660px) / 2);
      .login_view-content {
        width: 962px;
        background: #fff;
        margin: 0 auto;
        .login_left {
          width: 387px;
          height: 561px;
          background: url("~@/assets/img/common/login/login.png") no-repeat
            center/ 100% 100%;
          .login_left_content {
            width: 203px;
            margin: calc(255px - 45px) auto 0;
            .login_IsuserTitle {
              color: #fff;
              font-size: 22px;
              font-weight: 400;
              margin-bottom: 26px;
            }
            .el-button {
              padding-left: 10px;
              padding-right: 10px;
              color: #fff;
              text-align: center;
            }
            .el-button--blue {
              background: #5a95f6;
              border: 1px solid #5a95f6;
              margin-right: 14px;
            }
            .el-button--green {
              background: #1bab7a;
              border: 1px solid #1bab7a;
            }
          }
        }
        .login_right {
          width: calc(100% - 387px);
          padding: 79px 0;
          .login_right_content {
            width: 365px;
            margin: 0 auto;
          }
        }
      }
      // 版权所有-样式
      .desc {
        padding: 23px 0;
        font-size: 12px;
      }
    }
  }
}
.app {
  .login {
    .login_view {
      padding: 0.625rem;
      padding-top:2.5rem;
      .login_view-content {
        margin: 0 auto;
        width: 90%;
        .login_left {
          display: none;
        }
        .login_right {
          float: none;
          .login_right_content {
            // .tabbar {
            //   display: none;
            // }
            /deep/.el-input {
              overflow: hidden;
              .el-input__inner {
                border-radius: 4px;
                height: 3.125rem;
              }
            }
            .rand-code-img {
              height: 3.125rem;
              width: auto;
            }
            .rand-code-input {
              width: 50%;
            }
            .rand-code-img {
              height: 3.125rem;
            }
          }
          .colorOrange{
            font-size: 0.875rem;
          }
          .btn {
            font-size: 1rem !important;
            height: 3.125rem;
          }
        }
      }
    }
    // 版权所有-样式
    .desc {
      padding: 1.4375rem 0rem;
      font-size: 0.75rem;
    }
  }
}
.back {
  text-align: center;
}
</style>
