<!--
  @description: 系统管理员-代理登陆
  @author:  肖文龙
  @routerPath: /proxyAdminLogin
  @date:  2020/01/08
-->
<template>
  <div class="login">
    <section class="login_view">
      <div class="login_view-content clearfix">
        <!-- 左边内容 -->
        <div class="fl login_left">
          <div class="login_left_content" />
        </div>
        <!-- 右边内容 -->
        <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 === '02'">
                <el-form
                  ref="loginForm"
                  :model="loginForm"
                  :rules="ruleForm"
                >
                  <el-form-item prop="userName">
                    <el-input
                      v-model="loginForm.userName"
                      type="text"
                      placeholder="请输入用户名或手机号"
                      @keyup.enter.native="submitForm()"
                      @focus="loginFocus"
                    />
                  </el-form-item>
                  <el-form-item
                    class="clearfix"
                    prop="randCode"
                  >
                    <el-input
                      v-model="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>
                    <!-- 滑动验证码 暂时注释 接口已调好-->
                    <!-- <slideVerify @successVerify="successVerify"> slot="reference"-->
                    <el-button
                      :loading="loading"
                      class="btn"
                      type="primary"
                      @click="submitForm()"
                    >
                      登 录
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </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 {
  proxyAdminLogin,
  randCodeImage
} from '@/api/common/loginCenter'
/* 常用方法*/
import { setToken } from '@/assets/js/utils/auth' /* 公用方法 */
// import { randCode } from '@/assets/js/validate'
/* 组件*/
import switchRoleDepartDialog from '@views/common/user/switchRoleDepart-dialog'
/* vuex*/
import { mapGetters } from 'vuex'
export default {
  name: 'ProxyAdminLogin',
  components: {
    switchRoleDepartDialog
    // slideAly
  },
  data() {
    return {
      loginType: '02', // 索引  å登录
      // tabBar标题
      tabbarList: [
        { typename: '登录', typeCode: '02' }
      ],
      /* -----------登录----------- */
      loading: false, // 登录按钮Loding
      loginForm: {
        userName: '' // 用户名
        // randCode: '' // 验证码
      },
      CodeImageSrc: '', // 验证码图片
      // 校验
      ruleForm: {
        userName: [
          { required: true, message: '请输入用户名或手机号', trigger: 'blur' }
        ]
        // randCode: [{ required: true, validator: randCode, trigger: 'blur' }]
      }
    }
  },
  computed: {
    /* WebConfig 项目配置数据*/
    ...mapGetters(['WebConfig'])
  },
  created() {
    this.randCodeChange() // 普通登录-验证码
  },
  methods: {
    // 获取token 登录
    getToken() {
      this.loading = false // 登录按钮Loding
      this.$store.dispatch('setUserInfo')// 获取用户信息
    },
    /* -----------登录----------- */
    // 登录-图片验证码
    randCodeChange() {
      const data = {
        type: 'login', // 登陆时
        a: new Date().getTime()
      }
      this.CodeImageSrc = randCodeImage(data)
    },
    // 用户名/密码失去焦点
    loginFocus() {
    },
    // 登录方法调用
    submitForm() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.userLogin() // 封装登录接口
        }
      })
    },
    // 封装登录接口
    userLogin() {
      this.loading = true // 登录按钮Loding
      const data = {
        ...this.loginForm
      }
      proxyAdminLogin(data).then((response) => {
        // 判断是否为单一角色
        if (response.data.orgNum === 1 && response.data.rolNum === 1) {
        // 初始化用户信息
          this.$store.commit('SET_INFO')
          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(() => {
        this.randCodeChange() // 普通登录-验证码
        this.loginForm.randCode = '' // 图片验证码清空
        this.loading = false // 登录按钮Loding
      })
    },
    // 请选择组织机构弹框打开状态回调
    // dialog true 打开弹框 false 关闭弹框
    switchRoleDepartChange(dialog) {
      this.loading = dialog // 登录按钮Loding
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@assets/style/common/public.less";
.login {
  .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: calc(100vh - 56px);
    .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_right {
          width: calc(100% - 387px);
          padding: 79px 0;
          .login_right_content {
            width: 365px;
            margin: 0 auto;
            .user_layout_login{
              padding: 60px 0px;
            }
          .btn {
            margin-top: 10px;
          }
          }
        }
      }
      // 版权所有-样式
      .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;
    }
  }
}
</style>
