<template>
  <div class="login-container">
    <!-- <div class="company-name">
      {{ title }}
    </div>
    <div class="fill-container" v-show="isMydesk">
      <div class="left">
        <img src="./images/background3.png" />
      </div>
      <div class="right">
        <div class="top">
          <span>用户登录</span>
        </div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form middle"
          auto-complete="on"
          label-position="left"
          style="position: relative; left: calc((100% - 320px) / 2); top: 100px"
        >
          <el-input
            ref="username"
            v-model.trim="loginForm.username"
            prefix-icon="el-icon-user"
            placeholder="请输入账号"
            name="username"
            type="text"
            class="form-input"
            tabindex="1"
            auto-complete="on"
          />
          <el-input
            :key="passwordType"
            ref="password"
            v-model.trim="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            class="form-input"
            auto-complete="on"
            prefix-icon="el-icon-lock"
            @keyup.enter.native="handleLogin"
            show-password
          />
          <el-input
            ref="msg"
            tabindex="3"
            prefix-icon="el-icon-tickets"
            placeholder="请输入短信验证码"
            v-model.trim="loginForm.msg"
            type="text"
            class="form-input"
          >
            <el-button @click="sendMsg()" type="primary" slot="append" :disabled="btnDisabled">{{
              btnTitle
            }}</el-button>
          </el-input>
        </el-form>
        <el-button type="button" class="login-btn" :loading="loading" @click.native.prevent="handleLogin"
          >登录</el-button
        >
        <el-button type="text" class="forgetpsw-btn" style="left: 38%" @click="resetPsw()">忘记密码?</el-button>
        <el-button type="text" class="forgetpsw-btn" style="left: 60%" @click="modifyPsw()"
          >修改密码<i class="el-icon-edit"></i
        ></el-button>
      </div>
    </div>
    <el-dialog
      title="密码修改"
      :visible.sync="passwordDialog"
      append-to-body
      width="520px"
      top="25vh"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form ref="changePwdForm" :model="changePwd" :rules="pwdRules" label-width="100px" label-position="right">
        <el-form-item label="密码：" prop="pass" style="margin-bottom: 25px">
          <el-input
            v-model="changePwd.pass"
            autocomplete="off"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码：" prop="checkPass">
          <el-input
            v-model="changePwd.checkPass"
            autocomplete="off"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="handleDialogBtnClick('cancel')">取消</el-button>
        <el-button type="primary" @click="handleDialogBtnClick('confirm')">确定</el-button>
      </template>
    </el-dialog>
    <ResetPsw
      :title="isReset ? '重置密码' : '修改密码'"
      :visible="resetPswDialog"
      :username="loginForm.username"
      :isReset="isReset"
      @add="setContent"
      @cancel="resetPswDialog = false"
    /> -->
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
// import { userFirstLogin, getMsgCode } from '@/api/user'
import { changePassword } from '@/api/base'
import { regNewPassword } from '@/utils/reg'
import { ElForm } from 'element-ui/types/form'
import { sysTitle } from '@/settings'
import ResetPsw from './resetPsw.vue'
import { encryption } from '@/utils/encryption'
import  {Base64} from "js-base64"


const defaultPwd = '000000'

@Component({ components: { ResetPsw, } })

export default class Login extends Vue {
  name = 'Login'
  url = '@/assets/images/login/logo.png'
  title = sysTitle
  loginForm = {
    username: '',
    password: '',
    msg: ''
  }
  btnTitle = '发送验证码'
  btnDisabled = false
  time = 60
  loginRules = {
    username: [{ required: true, trigger: 'blur', message: '请输入账号' }],
    password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
    msg: [{ required: true, trigger: 'blur', message: '请输入短信验证码' }]
  }
  loading = false
  passwordType = 'password'
  redirect = undefined
  error = 1
  // warning: true,
  msg = ''
  passwordDialog = false // 重置密码用弹窗显隐控制
  changePwd = {
    pass: '', // 重置密码用新密码
    checkPass: '' // 重置密码用确认密码
  }
  pwdRules = {}
  userId = ''
  /**是否从mydesk跳转 */
  isMydesk = true
  mydeskUrl = 'https://uac.ctg.com.cn/sso/login'
  get sysTitle() {
    return this.$store.state.settings.sysTitle
  }
  //重置密码
  resetPswDialog = false // 重置密码用弹窗显隐控制
  isReset = true // 重置or修改
  /**登录token验证*/
  getTokenInfo(tempUrl){
    let tempData=tempUrl.replace(/%20/g, '+').replace(/%3D/g, '=').split('?');
    if(tempData&&tempData.length>1){
      var arrayList = tempData[1].split('&'); //获取url中"?"符后的字符串并正则匹配
      // let tempObj={tk:"",p:"",redirect:"",tgpms:""};
      let tempObj={tk:"",p:"",redirect:""};
      if(arrayList&&arrayList.length>0){
        arrayList.forEach(item=>{
          let tempAr=item.split("=");
          if(tempAr.length==2){
            tempObj[tempAr[0]]=tempAr[1];
          }else{
            tempObj[tempAr[0]]=tempAr.slice(1,tempAr.length).join("=")
          }
        })
        let tk=null;
        if(tempObj.tk){
          tk=Base64.decode(decodeURIComponent(Base64.atob(tempObj.tk)));
        }
        let p=null;
        if(tempObj.p){
          p=Base64.decode(decodeURIComponent(Base64.atob(tempObj.p)));
        }
        const listTemp=["ProjectPanoramic","StatisticalAnalysis","WisdomWarning","DecisionSupport"]
        if(tk){
          //tempObj.tgpms=(tempObj.tgpms?(tempObj.tgpms=="undefined"?"HB06":tempObj.tgpms):"HB06");
          let defaultSys={
            defaultCom:'groupPage',//'groupPage',
            sysCode:'',
            // sysCode:tempObj.tgpms||'',
            //目前支持：工程全景:ProjectPanoramic,统计分析：StatisticalAnalysis，智慧预警模块：WisdomWarning，决策支持模块：DecisionSupport
            currentActive:tempObj.redirect,
          }
          if(!listTemp.includes(tempObj.redirect)){
            defaultSys.defaultCom='dashboard'
          }
          if(!tempObj.redirect){
            defaultSys.defaultCom='groupPage'
          }
          console.log(tempObj.redirect)
          if(tempUrl.indexOf('pipeMainPage')!=-1){
            defaultSys.defaultCom='dashboard'
          }
          window['defaultSys']=defaultSys;
          this.loginWithTokenCheck2(tk);
        }else{
          document.getElementById('app').setAttribute('style',"");
        }
      }else{
        document.getElementById('app').setAttribute('style',"");
      }
    }else{
      document.getElementById('app').setAttribute('style',"");
    }

    // http://localhost:8031/#/login?tk=1233&p=4444&tgpms=55555
  }

 /**登录token验证*/
 getTokenInfo2(){
    let tempData=window.location.href.replace(/%20/g, '+').replace(/%3D/g, '=').split('?');
    if(tempData&&tempData.length>1){
      var arrayList = tempData[1].split('&'); //获取url中"?"符后的字符串并正则匹配
      let tempObj={token:""};
      if(arrayList&&arrayList.length>0){
        arrayList.forEach(item=>{
          let tempAr=item.split("=");
          if(tempAr.length==2){
            tempObj[tempAr[0]]=tempAr[1];
          }else{
            tempObj[tempAr[0]]=tempAr.slice(1,tempAr.length).join("=")
          }
        })
        if(tempObj.token){
          this.loginWithTokenCheck2({tk:tempObj.token});
        }else{
          document.getElementById('app').setAttribute('style',"");
        }
      }else{
        document.getElementById('app').setAttribute('style',"");
      }
    }else{
      document.getElementById('app').setAttribute('style',"");
    }

    // http://localhost:8031/#/login?tk=1233&p=4444&tgpms=55555
  }

  /**
   * 根据mydesk token登录
   * @param {*} token
   */
   loginWithTokenCheck2(tk) {
    this.$store
      .dispatch('user/mydygLogin', { token: tk })
      .then((result) => {
        if (result.code === 1) {
          if(result.result.code==-1){
            this.$message({
              message:result.result.message ,
              type: 'error'
            })
            setTimeout(() => {
              document.getElementById('app').setAttribute('style',"");
              location.assign(location.href.split('?')[0]);
            }, 2000)
          }else{
            setTimeout(() => {
              if(window['defaultSys'].defaultCom=="dashboard"){
                window.setTimeout(()=>{
                  this.$router.push({ path: ('/'+window['defaultSys'].defaultCom||'') })
                  window.setTimeout(()=>{
                    document.getElementById('app').setAttribute('style',"");
                  },2000)
                },100)
              }else{
                this.$router.push({ path: '/' })
              }
            }, 0)
          }
        }else{
          this.$message({
            message:result.result.message ,
            type: 'error'
          })
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  /**mydesk登录验证 */
  beforeMount() {
    const search = window.location.hash.split('?')[1]
    const SYS_ADDR = location.href.replace(/\#\/login.*$/, '')
    if (search) {
      const typeIndex = search.indexOf('type')
      const tokenIndex = search.indexOf('token')
      const rtype = this.getSearchString('type', search)
      if (typeIndex > -1 && rtype === 'mydesk') {
        this.isMydesk = false
      }
      if (typeIndex > -1 && tokenIndex === -1) {
        if (rtype === 'mydesk') {
          const url = SYS_ADDR + '#/login?type=mydesk'
          window.location.href = this.mydeskUrl + '?url=' + encodeURIComponent(url)
        }
      } else if (typeIndex > -1 && tokenIndex > -1) {
        const token = this.getSearchString('token', search)
        this.loginWithTokenCheck(token)
        return
      }
    }
  }
  mounted() {
    try{
      let tempUrl=window.location.href;
      if(tempUrl.indexOf('pipeMainPage=1')!=-1){
        tempUrl=unescape(tempUrl).replace('pipeMainPage=1?','pipeMainPage=1&');
      }
      if(tempUrl.indexOf('tgpms')!=-1&&tempUrl.indexOf('tk')!=-1){
        this.getTokenInfo(tempUrl);
      }else if(tempUrl.indexOf('token')!=-1){
        this.getTokenInfo2();
      }
      
    }catch{
      document.getElementById('app').setAttribute('style',"");
    }
    // let defaultSys={
    //   sysCode:"HB06",
    //   //目前支持：工程全景:ProjectPanoramic,统计分析：StatisticalAnalysis，智慧预警模块：WisdomWarning，决策支持模块：DecisionSupport
    //   currentActive:"DecisionSupport",
    // }
    // window['defaultSys']=defaultSys
    this.pwdRules = {
      pass: [{ required: true, validator: this.validatePwd1st, trigger: 'blur' }],
      checkPass: [{ required: true, validator: this.validatePwd2nd, trigger: 'blur' }]
    }
  }
  getSearchString(key, Url) {
    var str = Url
    //str = str.substring(1, str.length) // 获取URL中?之后的字符（去掉第一位的问号）
    // 以&分隔字符串，获得类似name=xiaoli这样的元素数组
    var arr = str.split('&')
    var obj = new Object()
    // 将每一个数组元素以=分隔并赋给obj对象
    for (var i = 0; i < arr.length; i++) {
      var tmp_arr = arr[i].split('=')
      obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1])
    }
    return obj[key]
  }
  /**
   * 根据mydesk token登录
   * @param {*} token
   */
  loginWithTokenCheck(token) {
    this.$store.dispatch('user/mydeskLogin', { token: token }).then((result) => {
      setTimeout(() => {
        //this.$router.push({ path: '/prjSelection' })
        this.$router.push({ path: '/' })
      }, 0)
    })
  }
  validatePwd1st(rule, value, callback) {
    if (value === '') {
      callback(new Error('请输入密码！'))
    } else {
      if (this.changePwd.pass !== '') {
        if (!regNewPassword().test(value)) {
          callback(new Error('密码位数至少12位，必须包含大小写字母和数字，不可包含非法字符！'))
          return
        }
      }
      callback()
    }
  }
  validatePwd2nd(rule, value, callback) {
    if (value === '') {
      callback(new Error('请再次输入密码'))
    } else if (value !== this.changePwd.pass && value !== '') {
      callback(new Error('两次输入密码不一致！'))
    } else {
      callback()
    }
  }
  @Watch('$route', { immediate: true })
  changeValue(route, oldvalue) {
    this.redirect = route.query && route.query.redirect
  }
  // 是否显示密码
  showPwd() {
    if (this.passwordType === 'password') {
      this.passwordType = 'text'
    } else {
      this.passwordType = 'password'
    }
    this.$nextTick(() => {
      ;(this.$refs.password as HTMLElement).focus()
    })
  }
  // 登录
  handleLogin() {
    ;(this.$refs.loginForm as ElForm).validate((valid) => {
      if (valid) {
        this.loading = true
        /**
         * 最短6位，最长16位 {6,16}
         * 必须包含1个数字
         * 必须包含2个小写字母
         * 必须包含2个大写字母
         * 必须包含1个特殊字符
         */
        // const pattern = /^.*(?=.{6,16})(?=.*\d)(?=.*[A-Z]{2,})(?=.*[a-z]{2,})(?=.*[!@#$%^&*?\(\)]).*$/
        /**
         * 最短6位，最长16位 {8,30}
         * 必须包含1个数字
         * 必须包含1个小写字母
         * 必须包含1个大写字母
         * 不必须包含1个特殊字符
         */
        // const pattern = /^.*(?=.{8,30})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?\(\)]?).*$/

        // this.$store
        //   .dispatch('user/login', this.loginForm)
        //   .then((res) => {
        //     const { id } = res.result
        //     // 判断是否首次登录或者重置过密码
        //     userFirstLogin(id)
        //       .then((res) => {
        //         // 先判断用户是否被禁用了 如果是申请的用户 还需要要判断是否同意申请了
        //         const { auditstatus, enableFlag } = res.result
        //         if (enableFlag === '0') {
        //           this.$message({
        //             message: '用户已被禁用，请先启用！',
        //             type: 'error'
        //           })
        //           this.loading = false
        //           sessionStorage.clear()
        //           return
        //         }
        //         if (auditstatus !== '2' && auditstatus !== null) {
        //           this.$message({
        //             message: auditstatus === 1 ? '账户还未审核通过！' : '账户审核未被通过！',
        //             type: 'error'
        //           })
        //           this.loading = false
        //           sessionStorage.clear()
        //           return
        //         }
        //         // 是首次登录 打开弹窗 修改密码
        //         if (res.result.firstlog === '1' && this.loginForm.password === defaultPwd) {
        //           this.userId = id
        //           this.passwordDialog = true
        //           // 清除掉用户id 防止用户没有修改密码刷新进入页面
        //           sessionStorage.removeItem('userId')
        //           this.$store.state.user.userId = undefined
        //         } else {
        //           this.loading = false
        //           setTimeout(() => {
        //             this.$router.push({ path: '/' })
        //           }, 0)
        //         }
        //       })
        //       .catch(() => {
        //         sessionStorage.clear()
        //         this.loading = false
        //       })
        //   })
        //   .catch((err) => {
        //     this.$message.error(err.message)
        //     this.loading = false
        //   })
      } else {
        console.log('error submit!!')
        return false
      }
      // this.$router.push('/dashboard')
    })
  }
  //发送验证码
  // sendMsg() {
  //   if (this.loginForm.username === '' && this.loginForm.password === '') {
  //     this.$message.error('请输入账号')
  //     return
  //   }
  //   let timer = setInterval(() => {
  //     this.time--
  //     this.btnDisabled = true
  //     this.btnTitle = `${this.time}s后重新发送`
  //     if (this.time === 0) {
  //       this.time = 60
  //       this.btnDisabled = false
  //       this.btnTitle = '发送验证码'
  //       clearInterval(timer)
  //     }
  //   }, 1000)
  //   getMsgCode({ username: this.loginForm.username })
  //     .then((result) => {
  //       this.$message.success(result.result)
  //     })
  //     .catch((error) => {
  //       console.log(error)
  //     })
  // }
  // 修改密码弹窗
  handleDialogBtnClick(type) {
    if (type === 'cancel') {
      this.$nextTick(() => {
        ;(this.$refs.changePwdForm as ElForm).resetFields()
      })
      this.passwordDialog = false
      this.changePwd.pass = ''
      this.changePwd.checkPass = ''
      sessionStorage.clear()
      this.loading = false
    } else {
      ;(this.$refs.changePwdForm as ElForm).validate((valid) => {
        if (valid) {
          const data = {
            originalPassword: encryption(defaultPwd),
            id: this.userId,
            firstlog: 0,
            password: encryption(this.changePwd.checkPass)
          }
          changePassword(data).then((res) => {
            if (res.code !== -1) {
              this.$message({
                message: '密码修改成功，请您重新登录！',
                type: 'success'
              })
              this.passwordDialog = false
              this.loading = false
              this.changePwd.pass = ''
              this.changePwd.checkPass = ''
              this.loginForm.password = ''
              sessionStorage.clear()
            } else {
              this.$nextTick(() => {
                ;(this.$refs.changePwdForm as ElForm).resetFields()
              })
              this.passwordDialog = false
              this.loading = false
              this.changePwd.pass = ''
              this.changePwd.checkPass = ''
              sessionStorage.clear()

              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        } else return false
      })
    }
  }

  //重置密码弹窗
  resetPsw() {
    this.resetPswDialog = true
    this.isReset = true
  }

  setContent(val) {
    const { password, code } = val
    this.loginForm.password = password
    this.loginForm.msg = code
  }

  //修改密码
  modifyPsw() {
    this.resetPswDialog = true
    this.isReset = false
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('./images/background.png') no-repeat fixed center/100%;
  background-size: cover;
  .company-name {
    position: absolute;
    font-size: 40px;
    color: white;
    font-weight: 500;
    letter-spacing: 4px;
    width: 100%;
    text-align: center;
    top: calc((100% - 534px) / 2);
    -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 50%, from(transparent), color-stop(0.2, transparent), to(rgba(3, 3, 3, 0.1)));
  }
  img {
    user-select: none;
    height: 100%;
  }
  .fill-container {
    position: relative;
    width: 926px;
    height: 434px;
    border-radius: 10px;
    background-color: rgb(228, 242, 255);
    left: calc((100% - 926px) / 2);
    top: calc((100% - 334px) / 2);
    .left {
      position: relative;
      float: left;
      width: 538px;
      overflow: hidden;
    }
    .right {
      width: 388px;
      height: 100%;
      position: relative;
      float: left;
      .top {
        font-size: 25px;
        font-weight: 700;
        color: rgb(45, 116, 231);
        text-align: center;
        width: 100%;
        top: 50px;
        position: relative;
        float: left;
        > span {
          line-height: 30px;
          &:nth-of-type(2) {
            margin-top: 16px;
          }
        }
      }
      /deep/ input.el-input__inner {
        padding-left: 40px !important;
      }
      /deep/ i.el-input__icon.el-icon-user,
      /deep/ i.el-input__icon.el-icon-lock,
      /deep/ i.el-input__icon.el-icon-tickets {
        font-size: 20px;
        color: #2d74e7;
        top: -2.25px;
        position: relative;
      }
      .middle {
        width: 320px;
        height: 106px;
        margin-bottom: 80px;
        > .form-input {
          height: 36px;
          line-height: 36px;
          /deep/ input {
            height: 36px;
          }
          &:nth-of-type(2) {
            margin-top: 15px;
          }
          &:nth-of-type(3) {
            margin-top: 15px;
          }
        }
      }
      .login-btn {
        width: 320px;
        height: 44px;
        border-radius: 22px;
        position: relative;
        float: left;
        left: calc((100% - 320px) / 2);
        top: 120px;
        overflow: hidden;
        font-size: 16px;
        background: #2d74e7;
        transition: background 0.3s linear;
        color: #ffffff;
        &:hover {
          background: #2467d3;
        }
      }
      .forgetpsw-btn {
        position: absolute;
        // bottom: 45px;
        bottom: 7px;
        left: 50%;
        margin-left: -28px;
      }
      .forgetpsw-btn:last-child::before {
        content: '';
        position: absolute;
        height: 12px;
        width: 1px;
        background: #01a2ff;
        margin: 0 auto;
        left: -10px;
        bottom: 12px;
      }
    }
  }
}
</style>
