<template>
  <div class="login">
    <div class="logoTitle" style="margin-left: 50px;margin-top: 50px;">
      <img src="../../assets/loginImg/yxt-logo.png" style="width: 250px;height:50px; margin-right: 10px;" />
    </div>

    <div class="main">

      <img src="../../assets/loginImg/login_left.png" style="width:50%;height:100%; " />

      <div class="main-right">

        <span class="main-right-title">欢迎登录商享通WMS</span>


        <div class="main-right-table">

          <div :class="tableIndex == 1 ? 'main-right-table-text1' : 'main-right-table-text3'" @click="tableClick(1)">
            密码登录</div>
          <div :class="tableIndex == 2 ? 'main-right-table-text2' : 'main-right-table-text4'" @click="tableClick(2)">
            验证码登录</div>

        </div>

        <div class="main-right-table-password" v-show="tableIndex==1">

          <el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
          <el-input class="input" placeholder="请输入密码" type="password" show-password v-model="loginForm.password" />

        </div>

        <div class="main-right-table-code" v-show="tableIndex==2">
          <el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
          <div style="display: flex;flex-direction: row;align-items: center;width: 100%;">
            <el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
              v-model="loginForm.verifyCode" />
            <span :class="sendCodeType ? 'sendCode1' : 'sendCode2'" @click="sendCode">{{sendCodeText}}</span>
          </div>

        </div>


        <el-button type="primary" size="small" style="width: 65%;margin-top: 30px; font-size: 25px;line-height: 40px;"
          @click="login">登录</el-button>

        <div class="main-right-bom">

          <el-checkbox class="main-right-bom-left">7天内免登录</el-checkbox>

          <div class="main-right-bom-right">

            <span>忘记密码</span>
            <div style="margin-left: 8px;margin-right: 8px;width: 1px; height: 18px;background: #999;"></div>
            <span>去注册</span>

          </div>

        </div>

      </div>
    </div>


  </div>
</template>

<script>
  import {
    doLogin,
    getUserById,
    imgCode
  } from '@/api/user.js'
  import user from '@/api/User/login.js'
  import {
    setToken,
    getToken,
    setSession
  } from '@/utils/auth'
  import imgCodeRole from '@/components/imgCodeRole/index.vue'
  import qs from 'qs'
  export default {
    components: {
      imgCodeRole
    },
    data() {
      return {
        tableIndex: 1,
        sendCodeText: "发送验证码",
        sendCodeType: false,
        totalTime: 10, //一般是60
        timer: '', //定时器

        loginForm: {
          userName: '',
          password: '',
          verifyCode: "",
          type: "1"
        },
        imgCode: '',
        loading: false,
        loginCode: false,
        showMsg: false,
        forgetPwd: false,
        nopassword: {
          userPhone: '',
          userName: '',
        },
      }
    },
    methods: {
      tableClick(index) {
        this.tableIndex = index

        this.loginForm.type = index + ""

      },

      // 验证码倒计时
      sendCode() {
        if (this.sendCodeType) return
        // this.getCode() // 获取验证码的接口
        this.sendCodeType = true
        this.sendCodeText = this.totalTime + 's'
        this.timer = setInterval(() => {
          this.totalTime--
          this.sendCodeText = this.totalTime + 's'
          if (this.totalTime < 0) {
            clearInterval(this.timer)
            this.sendCodeText = '发送验证码'
            this.totalTime = 10
            this.sendCodeType = false
          }
        }, 1000)
      },

      login() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        doLogin(this.loginForm).then((response) => {
          if (response.code == 200) {
            this.$router.push({
              path: '/index'
            })
            loading.close()
            // this.getUserInfo(response.data.loginId)
            window.sessionStorage.setItem('token', response.data.token)
            window.sessionStorage.setItem('sid', response.data.sid)
            window.sessionStorage.setItem('staffSid', response.data.staffSid)
            window.sessionStorage.setItem('userName', response.data.userName)

            console.log(" token", sessionStorage.getItem('token'))
          } else {
            loading.close()
          }

        }).catch(() => {
          loading.close()
        })

      },
      getUserInfo(id) {
        getUserById(id).then((response) => {
          if (response.code == 200) {
            console.log(" response", response)
            let user = response.data
            // 结果存入缓存
            window.sessionStorage.setItem('staffSid', user.staffSid)
            window.sessionStorage.setItem('sid', user.sid)
            window.sessionStorage.setItem('userName', user.userName)
          }

        }).catch(() => {})

      },
      codeShow() {
        if (this.loginForm.password == '' || this.loginForm.userName == '') {
          this.loginCode = false
          this.showMsg = true
          return
        }
        this.$refs.imgCodeRole.getCodeImage()
      },
      reGetPwd() {
        user.reGetPwd(this.nopassword).then((res) => {})
      },
    },
  }
</script>


<style  lang="scss">

  // .el-input__inner {
  //   border: none;
  //   color: #000;
  //   font-size: 16px;
  // }

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #000;
  }


  .login {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-image: url(../../assets/home/bj.png);
    background-position: center;
    overflow: hidden;

    .logoTitle {
      margin: 30px;

    }

    .main {
      width: 60%;
      height: 500px;
      background: #ffffff;
      box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
      opacity: 0.8;
      border-radius: 5px;
      position: absolute;
      right: 20%;
      top: 25%;
      display: flex;
      flex-direction: row;

      .main-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        height: 100%;

        .main-right-title {
          margin-top: 40px;
          font-size: 24px;
          font-weight: 600;
        }

        .main-right-table {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 30px;
          width: 70%;

          .main-right-table-text1 {
            flex: 1;
            font-size: 22px;
            text-align: center;
            color: #3E77CD;
          }

          .main-right-table-text1:after {
            content: '';
            display: block;
            width: 60px;
            border-bottom: 2px solid #3E77CD;
            margin: 0 auto;
            padding-bottom: 8px;
          }


          .main-right-table-text3 {
            flex: 1;
            font-size: 22px;
            text-align: center;
            color: #333;
            border-bottom: none;
            padding-bottom: 8px;
          }

          .main-right-table-text2 {
            flex: 1;
            font-size: 22px;
            text-align: center;
            color: #3E77CD;
          }

          .main-right-table-text2:after {
            content: '';
            display: block;
            width: 80px;
            border-bottom: 2px solid #3E77CD;
            margin: 0 auto;
            padding-bottom: 8px;
          }

          .main-right-table-text4 {
            flex: 1;
            font-size: 22px;
            text-align: center;
            color: #333;
            border-bottom: none;
            padding-bottom: 8px;
          }
        }

        .main-right-table-password {
          display: flex;
          width: 65%;
          margin-top: 10px;
          flex-direction: column;
          align-items: center;

          .input {
            margin-top: 10px;
            width: 100%;
            height: 50px;
          }
        }

        .main-right-table-code {

          display: flex;
          width: 65%;
          margin-top: 10px;
          flex-direction: column;
          align-items: center;

          .input {
            margin-top: 10px;
            width: 100%;
            height: 50px;
          }

          .sendCode1 {
            font-size: 16px;
            color: #c9c9c9;
          }

          .sendCode2 {
            font-size: 16px;
            color: #3E77CD;
          }

        }

        .main-right-bom {
          padding-left: 10px;
          padding-right: 10px;
          display: flex;
          width: 65%;
          margin-top: 10px;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .main-right-bom-left {
            color: #000;
            align-items: center;
          }

          .main-right-bom-right {
            display: flex;
            flex-direction: row;
            align-items: center;

            span {
              color: #666;

            }
          }
        }

      }



    }
  }
</style>
