<template>
  <div class="login-wrap">
    <div class="login-logo">
      <img src="../../assets/image/login-logo.png" height="40" alt="">
    </div>
    <div class="login-box">
      <div class="login-content flex-column-center">
        <div class="logo-wrap flex-row-center align-items-center">
          <div class="f32 color-text-regular">欢迎登录</div>
        </div>

        <div class="flex-column-center width100">
          <el-tabs class="zd-el-tabs-custom p-v-24"
                   v-model="loginWay" @tab-click="handleChangeLoginWay">
            <el-tab-pane label="短信登录" name="phone"></el-tab-pane>
            <el-tab-pane label="账号登录" name="account"></el-tab-pane>
          </el-tabs>
          <!--通过手机验证码登录-->
          <el-form v-if="loginWay === 'phone'"
                   :model="ruleForm" :rules="rules"
                   ref="ruleForm" label-width="0"
                   class="width100">
            <el-form-item label="" prop="telephone">
              <el-input v-model.trim="ruleForm.telephone" placeholder="请输入手机号" maxLength="11"></el-input>
            </el-form-item>
            <el-form-item label="" prop="smsCode">
              <div class="position-r">
                <el-input v-model.trim="ruleForm.smsCode" maxLength="6"
                          placeholder="请输入验证码" class="login-sms-code"></el-input>

                <div class="login-sms-code-btn position-a flex-row-center align-items-center">
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="text" @click="handleGetMsgCode"
                             :disabled="codeBtnDisabled">
                    <div style="width: 110px">{{codeBtnText}}</div>
                  </el-button>
                </div>

              </div>
            </el-form-item>


            <div class="flex mt-24">
              <el-button class="flex-fill" type="primary" @click="handleLoginByPhone">登录</el-button>
            </div>
          </el-form>

          <!--通过账号密码登录-->
          <el-form v-if="loginWay === 'account'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0"
                   class="width100 mt-30 pt-5">
            <el-form-item label="" prop="account">
              <el-input v-model.trim="ruleForm.account" placeholder="请输入手机号/账号" maxLength="18"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxLength="18"
                        type="password"></el-input>
            </el-form-item>

            <div class="flex mt-24">
              <el-button class="flex-fill" type="primary" @click="handleLoginByAccount">登录</el-button>
            </div>
          </el-form>
        </div>

      </div>
    </div>

    <div class="login_footer_ad flex-column-center align-items-center">
      <div class="f12 color-86909C pt-8">
        <span class="pl-8">Copyright © {{$util.getToyear()}} 法智数科 版权所有</span>
      </div>
    </div>
  </div>
</template>
<script>
import socketClass from "../../utils/stompSocket";

export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入11位手机号码'));
      }
      //使用正则表达式进行验证手机号码
      else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号不正确！'));
      } else {
        callback()
      }
    };
    return {
      loginWay: 'phone',
      qrCodeSrc: '',
      qrCodeInfo: {},
      qrFail: false,  // true-二维码失效
      strKey: 'trydotec',
      codeBtnText: '获取验证码',
      codeBtnDisabled: false,
      ruleForm: {
        telephone: '',
        account: '18381082759',
        password: 'trydo@123456',
        smsCode: '',
      },
      rules: {
        telephone: [
          {validator: validatePhone, trigger: 'blur'}
        ],
        smsCode: [
          {required: true, message: '请输入短信验证码', trigger: 'blur'}
        ],
        account: [
          {required: true, message: '请输入手机号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
      },
      timer: null,
      outTime: 60
    };
  },
  methods: {
    handleLoginByPhone() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {

          let telephone = this.$util.encryptByDES(this.strKey, this.ruleForm.telephone)
          let smsCode = this.$util.encryptByDES(this.strKey, this.ruleForm.smsCode)
          let formData = {
            'phone': telephone,
            'code': smsCode,
            'type': 2,
            'platform': 2
          }
          this.$fetchApi.login(formData).then(res => {
            sessionStorage.setItem('token', res.token)
            this.$store.commit('setToken', res.token)
            sessionStorage.setItem('userInfo', JSON.stringify(res.user))
            this.$store.commit('setUserInfo', res.user)
            if (res.user.resources.length > 0) {
              let url = "/workbench";
              // let data= res.user.resources[0].children[0]
              // if(data.children.length>0){
              //     url = data.children[0].url
              // }else{
              //     url = data.url
              // }
              this.$store.commit('setRoutes', url)
              this.$router.push(url)
            } else {
              this.$message.warning('未赋予数据权限！')
            }
          })

        }
      });
    },
    handleLoginByAccount() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {

          this.$store.commit('setPassword', this.rules.password)
          let username = this.$util.encryptByDES(this.strKey, this.ruleForm.account)
          let password = this.$util.encryptByDES(this.strKey, this.ruleForm.password)
          let formData = {
            'username': username,
            'password': password,
            'type': 1,
            'platform': 2
          }
          this.$fetchApi.login(formData).then(res => {

            sessionStorage.setItem('token', res.token)
            this.$store.commit('setToken', res.token)
            sessionStorage.setItem('userInfo', JSON.stringify(res.user))
            this.$store.commit('setUserInfo', res.user)

            sessionStorage.setItem('brokerEndpoint', res.brokerEndpoint)
            this.$store.commit('setBrokerEndpoint', res.brokerEndpoint)
            let socketUrl = res.brokerEndpoint ? res.brokerEndpoint : `wss://mediate.dev.trydotec.com/mediate/ws/websocket`;
            this.$stompSocket.initStomp(socketUrl,a => this.socketSucc(a), b => this.socketErr(b));
            if (res.user.resources.length > 0) {
              let url = "/workbench";
              // let data= res.user.resources[0].children[0]
              // if(data.children.length>0){
              //     url = data.children[0].url
              // }else{
              //     url = data.url
              // }
              this.$store.commit('setRoutes', url)
              this.$router.push(url)
            } else {
              this.$message.warning('未赋予数据权限！')
            }
          })


        }
      });
    },
    // 获取短信验证码
    handleGetMsgCode() {
      // form为表单名字并ref="form"; prop 换成你想监听的prop字段
      this.$refs.ruleForm.validateField('telephone', (errMsg) => {
        if (!errMsg) {
          // 验证成功，获取短信验证码
          // 防止重复点击
          if (!this.$clickThrottle()) {
            return
          }
          this.$fetchApi.sendVerifyCode(this.ruleForm.telephone).then(res => {

            this.codeBtnDisabled = true
            if (!this.timer) {
              this.timer = setInterval(() => {
                this.codeBtnText = this.outTime + 's 再次获取'
                this.outTime = this.outTime - 1
                if (this.outTime <= 0) {
                  // 倒计时结束，重置时间器clearInterval(this.timer)
                  clearInterval(this.timer)
                  this.codeBtnText = '获取短信验证码'
                  this.outTime = 60
                  this.timer = null
                  this.codeBtnDisabled = false
                }
              }, 1000)
              // 每秒执行一次
            }

          })

        }
      })
    },
    handleChangeLoginWay(tab, event) {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate();
      }
      if (tab && typeof tab === 'string') {
        this.loginWay = type
        return
      }

      // if('phone,account'.indexOf(this.loginWay) !== -1) {
      //     this.loginWay = 'qrCode'
      // }else{
      //     this.loginWay = 'phone'
      // }

      // if(this.loginWay === 'qrCode') {
      //     // 生成二维码
      //     this.getQRCode()
      // }
    },


    getQRCode() {
      this.qrFail = false
      this.$fetchApi.getLoginQRCode().then(res => {
        this.qrCodeInfo = res
        this.qrCodeSrc = res.qrCode
        this.loginByScanCode()
      })
    },
    loginByScanCode() {
      let timeNum = 0
      let scanCodeTimer = setInterval(() => {

        if (timeNum > 200) {
          clearInterval(scanCodeTimer);
          this.qrFail = true
        } else {

          this.$fetchApi.loginByQRCode(this.qrCodeInfo.verify).then(res => {

            if (res.status == 'INVALID') {
              this.qrFail = true
              clearInterval(scanCodeTimer);
            }
            if (res.status == 'SUCCESS') {
              // 登录成功
              this.$store.commit('setToken', res.token)
              this.$store.commit('setRoutes', JSON.parse(res.perms))
              this.$router.push('/')
              clearInterval(scanCodeTimer);
            }
          }).catch(err => {
            this.qrFail = true
            clearInterval(scanCodeTimer);
          })

        }
        timeNum++;
      }, 1500);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    socketSucc(frame) {
      console.log(frame, '---初始化成功login')
    },
    socketErr(frame) {
      console.log(frame, '---初始化失败login')
    }
  }
}
</script>
<style lang="scss" scoped>
.login-logo {
  padding: 20px 0 0 40px;
}

.login-wrap {
  width: 100%;
  height: 100%;
  background: url('~@/assets/image/login-bg1.png') no-repeat;
  background-size: cover;
  position: relative;
}

.login-box {
  width: 384px;
  height: 370px;
  position: absolute;
  right: 15%;
  top: 50%;
  margin-top: -185px;
}

.login-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 2px;
  background: $color-white;
  padding: $size32;
  padding-bottom: 0;
  border-radius: 5px;
  // box-shadow: 0px 33px 114px rgba(25, 96, 244, 0.26), 0px 9.94853px 34.3677px rgba(25, 96, 244, 0.169413), 0px 4.13211px 14.2746px rgba(25, 96, 244, 0.13), 0px 1.4945px 5.16283px rgba(25, 96, 244, 0.0905869);
  box-shadow: 0px 4px 4px 0px #00000014;

}

.login-tab {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn {
  color: #fff;
  background-color: #5d78ff;
  border-color: #5d78ff;

  &:hover {
    background-color: #3758ff;
    border-color: #2a4eff;
  }
}

.login-qr-code-box {
  width: 260px;
  height: 260px;
  position: relative;
}

.login-qr-fail {
  width: 260px;
  height: 260px;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
}

.login_footer_ad {
  position: fixed;
  bottom: 30px;
  left: 50%;
  margin-left: -129px;
  opacity: 0.6;
}

.logo-wrap {
  height: 29px;
}

.logo-img {
  width: 58%;
  height: 24px;
}

</style>
<style lang="scss">
.login-wrap {
  .el-tabs__nav-wrap {
    &::after {
      background-color: $color-white !important;
    }
  }

  .el-input__inner {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    color: $color-text-primary;
  }

  .login-sms-code .el-input__inner {
    padding-right: 150px;
  }

  .login-sms-code-btn {
    top: 3px;
    right: 0;
  }
}
</style>