<!--
  @description: 电商登录
  @Modifier：haoFx
  @routerPath:/shopMallLogin
  @date：  2019/9/27-10:21
-->
<template>
  <div class="shopmall_login">
    <header class="login_title">
      <router-link to="/shop/shopHome">
        <img :src="WebConfig.imgMajor" class="logo">
        <h2>网上商城</h2>
      </router-link>
    </header>
    <el-scrollbar style="height:calc( 100vh + 17px)">
      <section class="login_view">
        <div class="clearfix box">
          <div class="login_left fl">
            <img src="@assets/img/shopmall/login_img.png">
          </div>
          <div class="login_right fr">
            <div class="login_right_content">
              <div class="normal_login">
                普通登录
              </div>
              <div v-if="loginType === 1" class="tabbody">
                <div class="user_layout_login">
                  <el-form
                    ref="loginShopForm"
                    :model="loginForm"
                    :rules="ruleForm"
                  >
                    <el-form-item prop="userName">
                      <el-input
                        v-model="loginForm.userName"
                        type="text"
                        placeholder="请输入用户名"
                        @keyup.enter.native="submitForm()"
                      />
                    </el-form-item>
                    <el-form-item prop="password">
                      <el-input
                        v-model="loginForm.password"
                        type="password"
                        placeholder="请输入密码"
                        @keyup.enter.native="submitForm()"
                      />
                    </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>
                      <el-row>
                        <el-col>
                          <div class="fr">
                            <router-link
                              class="pointer colorOrange"
                              to="/RetrievePassword"
                            >
                              忘记密码
                            </router-link>
                          </div>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        :loading="loading"
                        class="btn"
                        type="primary"
                        @click="submitForm()"
                      >
                        登 录
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="desc">
        {{ WebConfig.platform }}
        <!-- copyright© 2015 国信创新招标投标交易平台 版权所有 京ICP备09089782号-9 京公网安备 110108 -->
      </div>
    </el-scrollbar>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :width="dialog_width"
      title="请选择组织机构"
      top="calc(10vh + 140px)"
      custom-class="shop_mall_dialog"
    >
      <el-form :model="dialogForm" label-width="54px">
        <el-form-item label="用户名">
          {{ userinfo.user.userName }}
        </el-form-item>
        <el-form-item v-if="userinfo.orgNum > 1 && userinfo.orgList.length > 0" label="部门">
          <el-select v-model="dialogForm.orgId" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in userinfo.orgList"
              :key="item.id"
              :label="item.departname"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="userinfo.rolNum > 1" label="角色" style="margin-top: -14px;">
          <el-select v-model="dialogForm.rolId" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in userinfo.rolList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeDefaultOrgOrRolRest">确 定</el-button>
        <el-button @click="onClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { userLogin, randCodeImage } from '@/api/common/loginCenter'
// import { changeDefaultOrgOrRolRest } from '@/api/shoppingmall/common'
import { switchRoleDepart } from '@api/common/user'
import { randCode } from '@/assets/js/validate'
import { setToken } from '@/assets/js/utils/auth'
import website from '@/assets/js/config/website' // 获取Encrypt公钥
/* vuex*/
import { mapGetters } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      dialog_width: '',
      loading: false,
      dialogVisible: false,
      loginType: 1,
      loginForm: {
        isForceLogin: '00',
        loginType: '00', // 登录类型
        toolType: '01', // 工具类型
        password: '', // 密码
        userName: '' // 用户名
      },
      userinfo: {
        user: {}
      },
      accessToken: '',
      CodeImageSrc: '', // 验证码图片
      ruleForm: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        randCode: [{ required: true, validator: randCode, trigger: 'blur' }]
      },
      dialogForm: {},
      cavalue: '',
      calist: [],
      roleCode: '',
      token: ''
    }
  },
  computed: {
    /* WebConfig 项目配置数据*/
    ...mapGetters(['WebConfig'])
  },
  created() {
    this.randCodeChange() // 普通登录-验证码
  },
  mounted() {
    document.body.clientWidth < 768
      ? (this.dialog_width = '96%')
      : (this.dialog_width = '432px')
    window.onresize = function() {
      document.body.clientWidth < 768
        ? (this.dialog_width = '96%')
        : (this.dialog_width = '432px')
    }
  },
  methods: {
    // 普通登录-图片验证码
    randCodeChange() {
      const data = {
        type: 'login', // 登陆时
        a: new Date().getTime()
      }
      this.CodeImageSrc = randCodeImage(data)
    },
    submitForm() {
      this.loading = true
      this.$refs.loginShopForm.validate(valid => {
        if (valid) {
          this.userLogin()
        } else {
          this.loading = false
          return false
        }
      })
    },
    userLogin() {
      // 设置公钥
      this.$Encrypt.setPublicKey(website.publicKey)
      const data = {
        ...this.loginForm,
        password: this.$Encrypt.encryptLong(this.loginForm.password) // RSA非对称公钥密码加密
        // password: this.$Base64.encode(this.loginForm.password) // 密码转base64
      }
      userLogin(data).then((response) => {
        // 初始化用户信息
        // this.$store.commit('SET_SHOPMALL_INFO')
        this.$store.commit('SET_INFO')
        if (response.data.orgNum === 1 && response.data.rolNum === 1) {
          setToken(response.data.accessToken)
          this.getToken()
          // this.roleCode = response.data.rol.roleCode
          this.accessToken = response.data.accessToken
          this.dialogVisible = false
          this.loading = false
          // this.$router.push({ path: '/shop/shopHome' })
        } else {
          this.userinfo = response.data
          this.dialogVisible = true
          setToken(response.data.accessToken)
          this.token = response.data.accessToken
        }
      })
        .catch(() => {
          this.randCodeChange() // 普通登录-验证码
          this.loginForm.randCode = '' // 图片验证码清空
          this.loading = false
        })
    },
    changeDefaultOrgOrRolRest() {
      const data = { ...this.loginForm, ...this.dialogForm }
      if (this.userinfo.orgList.length === 0) {
        data.orgId = this.userinfo.org.id
      }
      data.token = this.token
      const params = {
        data: {
          orgId: this.dialogForm.orgId, // 当前部门id
          roleId: this.dialogForm.rolId // 当前角色id
        },
        accessToken: this.accessToken
      }
      switchRoleDepart(params).then(res => {
        this.accessToken && setToken(this.accessToken) // 存储用户Token
        // 重新获取用户信息
        this.$store.dispatch('setUserInfo').then(() => {
          // 关闭弹框
          this.dialogVisible = false
        })
      }).catch(() => {
      })
    },
    onClose() {
      this.loading = false
      this.dialogVisible = false
    },
    getToken() {
      this.loading = false // 登录按钮Loding
      // 获取用户信息
      this.$store.dispatch('setUserInfo').then(() => {
        this.dialogVisible = false
        this.$router.push({ path: '/shop/shopHome' })
      })
    }
  }
}
</script>
<style lang="less">
.shopmall_login {
  .el-dialog__body {
    padding: 10px 30px !important;
  }
  .login_title {
    width: 1126px;
    margin: 17px auto;
    h2 {
      height: 22px;
      font-size: 21px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333;
      line-height: 21px;
      padding-left: 20px;
      margin-left: 20px;
      display: inline-block;
      border-left: 1px solid #ccc;
    }
  }
  .login_view {
    overflow: hidden;
    min-height: 556px;
    background: url("../../../assets/img/shopmall/login_bg.png") no-repeat
      center top/100%;
    .box {
      width: 1016px;
      margin: 0 auto;
      margin: calc(10vh) auto 0;
      position: relative;
      .login_left {
        margin-top: calc(3vh);
        img {
          width: 355px;
          height: 353px;
        }
      }
      .login_right {
        width: 399px;
        padding: 26px 34px 49px;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0px 0px 10px 0px rgba(12, 3, 6, 0.19);
        border-radius: 3px;
        .login_right_content {
          .normal_login {
            color: @orange;
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            margin-bottom: 40px;
          }
          .colorOrange {
            color: #666;
            font-weight: 400;
            font-size: 14px;
          }
          .el-input__inner {
            height: 42px;
            font-size: 14px;
          }
          .btn {
            width: 100%;
            height: 44px;
          }
          .el-button--primary {
            border-color: @orange;
          }
        }
      }
    }
  }
  .desc {
    padding: 23px 0;
    font-size: 12px;
    width: 100%;
    text-align: center;
    color: #999999;
  }
}
.shopmall_login .user_layout_login{
  padding-top: 0;
 .btn{
  background: #00aaca;
  border: 1px solid #00aaca;
  border-color: #00aaca!important;
 }
}
</style>
