<template>
  <el-container class="container login-container">
    <el-main>
      <div class="login-card__container">
        <div class="login-illustration_container">
          <div class="title">
            <div class="welcome">
              欢 迎 使 用
            </div>
            <div class="platform">
              机 电 采 购 平 台
            </div>
          </div>
          <!-- <div class="login-illustration">
            <div class="login-illustration-icon-1">
              <img
                src="~@/assets/img/login/icon-4.png"
                style="margin-left: 80px"
                class="icon1"
              />
              <img src="~@/assets/img/login/icon-5.png" class="icon3" />
              <img
                src="~@/assets/img/login/icon-3.png"
                style="margin-left: 80px"
                class="icon2"
              />
            </div>
            <div class="login-illustration-icon">
              <img src="~@/assets/img/login/figure.png" />
            </div>
            <div class="login-illustration-icon-2">
              <img
                src="~@/assets/img/login/icon.png"
                style="margin-left: 30px"
                class="icon2"
              />
              <img
                src="~@/assets/img/login/icon-1.png"
                style="margin-left: 110px"
                class="icon1"
              />
              <img
                src="~@/assets/img/login/icon-2.png"
                style="margin-left: 30px"
                class="icon3"
              />
            </div>
          </div> -->
        </div>
        <el-card shadow="never" class="login-card">
          <div class="login-div">
            <div class="login-type">
              <img
                v-if="accountLogin"
                @click="loginTypeChange(false)"
                class="login-png"
                :src="require('@/assets/img/login/qr_login3.png')"
              />
              <img
                v-else
                @click="loginTypeChange(true)"
                class="login-png"
                :src="require('@/assets/img/login/account_login3.png')"
              />
            </div>
            <div class="login-content1" v-show="accountLogin" key="form">
              <div class="sys-logo">
                <img src="../assets/img/login/logo.2.jpg" />
              </div>
              <div class="welcome-title">
                {{ companyName }}
              </div>
              <div class="login-type-content">
                <span
                  :class="[
                    'type-item',
                    {
                      active: accountType == 'account'
                    }
                  ]"
                  @click="changeAccountType('account')"
                  >账号登录</span
                >
                <span
                  :class="[
                    'type-item',
                    {
                      active: accountType == 'message'
                    }
                  ]"
                  @click="changeAccountType('message')"
                  >短信登录</span
                >
              </div>
              <el-form
                class="login-form"
                :model="principal"
                :rules="rules"
                ref="principal"
              >
                <template v-if="accountType == 'account'">
                  <el-form-item prop="account">
                    <el-input
                      size="medium"
                      clearable
                      prefix-icon="icon-account"
                      v-model="principal.account"
                      placeholder="请输入账号"
                    >
                      <img
                        slot="prefix"
                        class="prefix-img"
                        :src="require('@/assets/img/login/account.png')"
                      />
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      show-password
                      clearable
                      prefix-icon="icon-password"
                      @keyup.enter.native="submitForm('principal')"
                      @focus="inputGetFocus"
                      size="medium"
                      v-model="principal.password"
                      placeholder="请输入密码"
                    >
                      <img
                        slot="prefix"
                        class="prefix-img"
                        :src="require('@/assets/img/login/password.png')"
                      />
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="remberPwd" class="rember-pwd">
                    <el-checkbox
                      title="有效期为7天"
                      v-model="principal.remberPwd"
                      :true-label="1"
                      :false-label="0"
                      >记住密码</el-checkbox
                    >
                  </el-form-item>
                  <!-- <span class="message-tips hidden">X</span> -->
                </template>
                <template v-else>
                  <el-form-item prop="phone">
                    <el-input
                      size="medium"
                      clearable
                      prefix-icon="icon-account"
                      v-model="principal.phone"
                      placeholder="请输入手机号"
                    >
                      <img
                        slot="prefix"
                        class="prefix-img"
                        :src="require('@/assets/img/login/phone.png')"
                      />
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input
                      clearable
                      prefix-icon="icon-password"
                      size="medium"
                      v-model="principal.code"
                      placeholder="请输入验证码"
                    >
                      <img
                        slot="prefix"
                        class="prefix-img"
                        :src="require('@/assets/img/login/code.png')"
                      />
                      <el-button slot="append" @click="sendMessage">
                        {{ isSendMessage ? second + '秒后重发' : '获取验证码' }}
                      </el-button>
                    </el-input>
                  </el-form-item>
                  <span :class="['message-tips', {hidden: !isSendMessage}]">
                    <i class="el-icon-circle-check"></i>
                    短信验证码已发送，可能会有延后，请耐心等待！
                  </span>
                </template>

                <el-form-item
                  class="btns"
                  style="text-align: right; margin-top: 20px"
                >
                  <el-button
                    size="medium"
                    type="primary"
                    @focus="inputGetFocus"
                    @click="submitForm('principal')"
                    id="login-btn"
                    :loading="loading"
                    >登录</el-button
                  >
                </el-form-item>
                <!-- <div
                                    class="password-tips"
                                    v-if="accountType == 'account'"
                                >
                                    忘记密码请联系管理员
                                </div> -->
              </el-form>
            </div>
            <div class="login-content2" v-show="!accountLogin" key="qrlogin">
              <div class="transition-box">
                <transition name="el-zoom-in-center">
                  <div v-show="show_qr" id="qr_login"></div>
                </transition>
              </div>
              <div class="change-qr">
                <div
                  @click="changeQR(item.key)"
                  v-for="item in qrList"
                  :key="item.key"
                >
                  <img
                    :class="[
                      item.key,
                      {
                        active: item.key == activeQR
                      }
                    ]"
                    :src="item.url"
                    :alt="item.name"
                  />
                  <div>{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="corporate-name">重庆盛普物资有限公司</div>
    </el-main>
    <div
      class="mask"
      v-if="hasMask"
    >
      <i
        class="el-icon-loading"
        style="font-size: 80px;color: #FFF;"
      ></i>
      <div style="font-size: 17px;color: #FFF;">努力加载中...</div>
    </div>
  </el-container>
</template>

<script>
import portal from '@/api/portal.js'
import Cookie from 'js-cookie'
export default {
  name: 'login',
  data() {
    var checkAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入账号'))
      }
      if (/^[a-zA-Z0-9_-]{2,20}$/.test(value)) {
        return callback()
      } else {
        return callback(new Error('账号格式不符合规范'))
      }
    }
    var checkPhone = (rule, value, callback) => {
      const regExp = /^1[3|4|5|7|8|9][0-9]{9}$/
      if (!regExp.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      logoUrl: '', // logo图片地址
      name: 'EDP',
      companyName: '智采平台',
      principal: {
        account: '',
        password: '',
        remberPwd: 0
      },
      rules: {
        account: [{validator: checkAccount, trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        phone: [{validator: checkPhone, trigger: 'blur'}],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      responseError: '',
      loading: false,
      accountLogin: true,
      accountType: 'account',
      hasMask: true,
      isSendMessage: false,
      timer: null,
      second: 60,
      show_qr: true,
      activeQR: 'qywx',
      qrList: [
        {
          name: '企业微信',
          key: 'qywx',
          url: require('@/assets/img/login/qywx-logo.png')
        },
        {
          name: '微信',
          key: 'wx',
          url: require('@/assets/img/login/wx-logo.png')
        },
        {
          name: '钉钉',
          key: 'dd',
          url: require('@/assets/img/login/dd-logo.png')
        },
        {
          name: '支付宝',
          key: 'zfb',
          url: require('@/assets/img/login/zfb-logo.png')
        }
      ]
    }
  },
  mounted() {
    if(this.$route.query.tokenKey){
      this.hasMask = true
    }else{
      this.hasMask = false
    }
    window.webSocket && window.webSocket.close()
    this.clearUser()
    this.setDefaultValue()
    this.sysSetting()
  },
  methods: {
    changeQR(key) {
      this.activeQR = key
      this.show_qr = false
      setTimeout(() => {
        this.show_qr = true
      }, 1000)
    },
    clearUser() {
      this.$store.dispatch('menu/clearMenus')
      this.$store.dispatch('user/clearUser')
      this.$store.dispatch('menu/setCopyMenus', [])
      this.$store.dispatch('login/logoutAndCleanUp')
    },
    //如果记住密码则默认表单赋值
    setDefaultValue() {
      let account = Cookie.get('account'),
        remberPwd = Cookie.get('remberPwd'),
        password = Cookie.get('accountPwd')
      if (remberPwd) {
        // remberPwd Number(remberPwd)
        // 如果有记住密码 取密文解密放进输入框
        let Base64 = require('js-base64').Base64
        password = Base64.decode(password)
        this.principal = {
          account,
          password,
          remberPwd: Number(remberPwd)
        }
      }
    },
    loginTypeChange(type) {
      this.accountLogin = type
      this.accountLogin ? null : this.getQr()
    },
    getQr() {
      let page = '/fvue/auth'
      let host = window.location.protocol + '//' + window.location.hostname
      let port = window.location.port

      let url = host + ':' + port + page
      this.wwLogin = new WwLogin({
        id: 'qr_login',
        appid: window.context.corp_id,
        agentid: window.context.agent_id,
        redirect_uri: encodeURI(url),
        state: 'hellowecom',
        href:
          'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHtjb2xvcjogI2ZmZjt9Ci5pbXBvd2VyQm94IC5zdGF0dXMge2NvbG9yOiAjZmZmO30=', // data:text/css;base64,
        lang: 'zh'
      })
    },
    changeAccountType(type) {
      this.accountType = type
      this.$refs.principal.clearValidate()
    },
    sendMessage() {
      if (!this.isSendMessage) {
        this.validateField()
      }
    },
    validateField() {
      this.$refs.principal.validateField('phone', err => {
        if (!err) {
          this.isSendMessage = true
          this.countdown()
        }
      })
    },
    countdown() {
      this.timer = setInterval(() => {
        this.second--
        if (this.second == 0) {
          clearInterval(this.timer)
          this.isSendMessage = false
          this.second = 60
        }
      }, 1000)
    },
    //获取系统默认配置 系统Logo、名称
    sysSetting() {
      let url = '${uc}/uc/tenantManage/v1/getTenantByCode?code=platform'
      this.$http.get(url).then(resp => {
        if (resp.data) {
          let tenantManage = resp.data
          //   this.companyName = tenantManage.nameFront
          if (tenantManage.frontLogo) {
            let frontLogo = JSON.parse(tenantManage.frontLogo)
            if (frontLogo && frontLogo.length > 0) {
              this.$http
                .get(
                  window.context.portal +
                    '/file/onlinePreviewController/v1/getFileById_' +
                    frontLogo[0].id,
                  'arraybuffer'
                )
                .then(response => {
                  let type = response.headers['content-type']
                  if (type) {
                    this.logoUrl = window.URL.createObjectURL(
                      new Blob([response.data], {
                        type: type
                      })
                    )
                  } else {
                    this.logoUrl = window.URL.createObjectURL(
                      new Blob([response.data])
                    )
                  }
                })
            }
          }
        }
      })
    },
    setRouterPath() {
      this.$store.dispatch('login/actionLoginAccount', this.principal.account)
      localStorage.setItem(
        this.principal.account + 'loginRoutePath',
        this.$route.path
      )
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.inputGetFocus()
          this.setRouterPath()
          this.loading = true
          this.$store
            .dispatch('login/loginByPrincipal', this.principal)
            .then(loginStatus => {
              if (loginStatus && loginStatus == true) {
                this.$store.dispatch('menu/getCurrentUserMethodAuth')
                this.getAllDict()
                this.$store.dispatch('menu/actionFrontMenus').then(res => {
                  if (!res || !res.length) {
                    this.clearUser()
                    this.loading = false
                    this.$message.warning(
                      '抱歉！您尚无可访问页面，请联系管理员添加！'
                    )
                    return
                  } else {
                    this.$router.push({
                      path: `/platLayout/toDoTask`
                    })
                  }
                  return
                  let bigScreen =
                    res && res.filter(item => item.alias === 'bigScreen')
                  //   如果用户有大屏菜单进去大屏页面
                  if (bigScreen && bigScreen.length !== 0) {
                    this.$router.push({
                      path: `/${bigScreen[0].children[0].alias}`
                    })
                    return
                  }
                  let dataMenus =
                    res && res.filter(item => item.alias === 'normal')
                  if (dataMenus && dataMenus.length !== 0) {
                    if (
                      dataMenus[0].children.length !== 0 &&
                      dataMenus[0].children[0].children.length
                    ) {
                      this.$router.push({
                        path: `/platLayout/${dataMenus[0].children[0].children[0].alias}`
                      })
                    } else {
                      this.$router.push({
                        path: `/platLayout/${dataMenus[0].children[0].alias}`
                      })
                    }
                  }
                })
              } else if (loginStatus == false) {
                this.$router.push({
                  name: 'resetPwdView',
                  query: {type: 'login'}
                })
              }
            })
            .catch(msg => {
              this.loading = false
              console.log(msg, 'msg')
              if (msg.indexOf && msg.indexOf('timeout of') !== -1) {
                msg = '登录超时'
              }
              this.responseError = msg
            })
        } else {
          return false
        }
      })
    },
    getAllDict() {
      portal
        .getSysDict()
        .then(data => {
          // console.log(data, '字典')
          if (data) {
            sessionStorage.setItem('dict_data', JSON.stringify(data))
          }
        })
        .catch(err => {
          // console.log(err, '字典err')
        })
    },
    inputGetFocus() {
      this.responseError = ''
    },
    resetForm(formName) {
      this.responseError = ''
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
$text-color: #6699ff;

.mask {
  background-color: #c9c9c9;
  opacity: 1;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card__container {
  width: 100%;
  height: 97%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.login-card {
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: 0px 0px 20px 0px rgba(197, 243, 255, 0.4);
}
.login-div {
  width: 560px;
  max-width: 700px;
  height: 74vh;
  background: white;
  // background: rgba(0, 17, 51, 0.3);
  border-radius: 20px;
  opacity: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.login-type {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  top: 0;
  .login-png {
    width: 100px;
    height: 100px;
    cursor: pointer;
  }
  // ::after {
  //     position: absolute;
  //     content: "";
  //     left: 0;
  //     top: 0;
  //     border-bottom: 100px solid #fff;
  //     border-right: 100px solid transparent;
  // }
}
.login-content1 {
  height: 530px;
  width: 400px;
  padding: 50px 0;
}
.login-content2 {
  height: 530px;
  width: 400px;
  padding: 50px 0;
}
.sys-logo {
  width: 100%;
  height: 76px;
  text-align: center;
  margin-top: 40px;
  img {
    height: 100%;
    width: auto;
  }
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #6699ff;
}
.login-type-content {
  margin-bottom: 30px;
  .type-item {
    font-size: 18px;
    color: #99a1b1;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 4px 8px;
    cursor: pointer;
  }
  .type-item.active {
    color: #6699ff;
    border-bottom: 2px solid #6699ff;
  }
}
/**自动填充为透明背景色 */
/deep/ .el-input__inner {
  background-color: transparent !important;
  border-color: $text-color;
  color: $text-color;
}
/deep/ .el-input__inner:-internal-autofill-previewed,
/deep/ .el-input__inner:-internal-autofill-selected {
  -webkit-text-fill-color: #6699ff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
/deep/ .el-checkbox__input .el-checkbox__inner {
  background: rgba(#000000, 0) !important; /* 透明 */
  border: 1px solid #6699ff;
}
/deep/ .el-checkbox__label {
  color: #6699ff;
  font-size: 14px;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: $text-color;
  border-color: $text-color;
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: $text-color;
}
/deep/ .el-input-group__append {
  background-color: transparent !important;
  border: 1px solid #6699ff;
  border-left: 0;
  span {
    color: #c0c4cc;
  }
}
.rember-pwd {
  margin-bottom: 0 !important;
  /deep/ .el-form-item__content {
    height: 20px;
    line-height: 0 !important;
  }
}
.message-tips {
  display: inline-block;
  height: 20px;
  color: #fff;
  .el-icon-circle-check {
    font-size: 14px;
    color: #10ef10;
  }
}
.message-tips.hidden {
  opacity: 0;
}
.password-tips {
  text-align: center;
  color: #c0c4cc;
}
.welcome-title {
  min-height: 20px;
  margin-top: 20px;
  font-size: 30px;
  margin-bottom: 50px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 600;
  text-align: center;
  font-family: Roboto, Microsoft YaHei, Sans-serif;
}
.login-card /deep/ .el-alert__content {
  padding: 5px;
}
.btns >>> .el-form-item__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#login-btn {
  // width: 220PX;
  width: 100%;
  border: 1px solid #6699ff;
  background-color: #6699ff;
}
.transition-box {
  width: 100%;
  height: calc(100% - 120px);
  margin-top: 80px;
}
#qr_login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.change-qr {
  width: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  div {
    width: 60px;
    color: #fff;
    text-align: center;
  }
  img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-bottom: 4px;
  }
  img.active {
    border-radius: 20px;
    transform: scale(1.08);
  }
  img.qywx.active {
    background-color: #fff;
    box-shadow: 0 0 8px 2px #d1d1d1;
  }
  img.wx.active {
    background-color: #00c800;
    box-shadow: 0 0 8px 2px #00c800;
  }
  img.dd.active {
    background-color: #3296fa;
    box-shadow: 0 0 8px 2px #3296fa;
  }
  img.zfb.active {
    background-color: #06b4fd;
    box-shadow: 0 0 8px 2px #06b4fd;
  }
}
/deep/ .el-card__body {
  padding: 20px;
  padding: 0 !important;
}
.login-container {
  width: 100%;
  height: 100%;
  background: url('../assets/img/login/bgImg.png') center / 100% 100% no-repeat;
  position: relative;
}
.login-illustration_container {
  width: 1210px;
  height: 720px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  // background: url('~@/assets/img/login-illustration.png') no-repeat center / 100%;
  .title {
    color: white;
    font-weight: bold;
    div {
      font-size: 50px;
      // font-family: STZhongsong;
    }
    .platform {
      margin-left: 50px;
    }
  }
}
.login-illustration {
  width: 1025px;
  height: 420px;
  margin-top: 162px;
  margin-left: 100px;
  display: flex;
  // background: url('~@/assets/img/login-illustration.png') no-repeat center / 100%;
}
.login-illustration-icon-1 {
  width: 268px;
  height: 100%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  img {
    width: 140px;
    height: 140px;
  }
}
.login-illustration-icon {
  width: 420px;
  height: 100%;
  z-index: 99;
  img {
    width: 420px;
    height: 100%;
  }
}
.login-illustration-icon-2 {
  width: 337px;
  height: 100%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  img {
    width: 140px;
    height: 140px;
  }
}
/deep/ .el-input--medium .el-input__inner {
  height: 46px;
  line-height: 46px;
}
/deep/ .el-button {
  height: 46px;
}
.prefix-img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
/deep/ .el-input--prefix .el-input__inner {
  padding-left: 40px;
}
/deep/ .el-input__prefix {
  left: 12px;
}
.corporate-name {
  width: 250px;
  height: 19px;
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: 400;
  color: #6b747d;
  line-height: 19px;
  letter-spacing: 1px;
  margin-left: 810px;
}
.icon1 {
  animation: breath 3s linear infinite alternate;
}
.icon2 {
  animation: breath 2.8s ease-in-out infinite alternate;
}
.icon3 {
  animation: breath 3.2s ease-out infinite alternate;
}
@keyframes breath {
  from {
    transform: translateY(4%) scale(1);
  }
  to {
    transform: translateY(-4%) scale(1.1);
  }
}
</style>
<style lang="scss">
#login-btn span {
  font-weight: 700;
  font-size: 18px !important;
  letter-spacing: 4px;
}
</style>
