<template>
  <div class="login">
    <div class="body">
      <div class="middle">
        <div class="right">
          <div class="tab">
            <h2 class="active" @click="currIndex = 0">登录</h2>
          </div>
          <el-form :model="form" label-position="top" ref="form" label-width="100px" class="form">
            <el-form-item
              prop="mobile"
              :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: phoneReg, trigger: 'blur' }]">
              <el-input maxlength="11" placeholder="请输入手机号" v-model="form.mobile" @keyup.enter.native="login"></el-input>
            </el-form-item>
            <el-form-item
              prop="password"
              :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
              <el-input placeholder="请输入密码" v-model="form.password" type="password" @keyup.enter.native="login"></el-input>
            </el-form-item>
            <el-button type="primary" style="width: 100%" @click="login" :loading="btnLoading">立即登录</el-button>
          </el-form>
          <div class="login-footer">
            <div class="left">
              <span>没有账号？</span>
              <i class="hover" @click="$router.push('/register')">立即注册</i>
            </div>
            <div class="left" style="margin-left: 10px;">
              <span>忘记密码？</span>
              <i class="hover" @click="$router.push('/forget')">找回密码</i>
            </div>
          </div>
        </div>
      </div>
      <div id="kefu" @click="gotoKefu">
        <label slot="reference" class="topBtn" title="联系客服"></label>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          mobile: '',
          password: ''
        },
        phoneReg: (rule, value, callback) => {
          if (/^1[0-9]{10,10}$/.test(value)) {
            return callback()
          }

          callback(new Error('手机号格式错误'))
        },
        timer: null,
        time: 60,
        isSend: false,
        isStart: false,
        isLoading: false,
        currIndex: 0,
        btnLoading: false,
        loginType: '0'
      }
    },

    mounted () {
    },

    methods: {
      login () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.btnLoading = true
            const devVersion = require('../../manifest.development.json').version
            const prodVersion = require('../../manifest.production.json').version
            const version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
            this.$http.post(`/api/mobile/token`, this.form, {
              params: {
                ...this.form,
                version
              },
              headers: {
                Authorization: 'Basic YXBwOmFwcA=='
              }
            }).then(res => {
              if (res.access_token) {
                this.$store.commit('setToken', `${res.token_type} ${res.access_token}`)
                this.$message.success('登录成功')
                this.$store.dispatch('getUserInfo')

                setTimeout(() => {
                  this.$router.push('/')
                }, 800)
              }

              this.btnLoading = false
            }).catch(() => {
              this.btnLoading = false
            })
          } else {
            console.log('error submit!!')
            return false;
          }
        })
      },

      getCode () {
        if (this.isSend) {
          return this.$message.error('验证码已发送')
        }

        this.$refs.form.validateField('loginname', e => {
          if (!e) {
            this.isSend = true
            this.btnLoading = true
            this.$http.post(`/api/sms/getRegSmsCode?phone=${this.form.phone}`, {}, {
              withoutToken: true
            }).then(res => {
              if (res.code === 0) {
                this.$message.success('验证码发送成功')
                this.isStart = true
                this.timer = setInterval(() => {
                  if (this.time === 0) {
                    this.isSend = false
                    this.isStart = false
                    this.time = 60
                    clearInterval(this.timer)

                    return false
                  }

                  this.time = this.time - 1
                }, 1000)
              }

              this.btnLoading = false
              this.isSend = false
            }).catch(() => {
              this.isSend = false
              this.btnLoading = false
            })
          }
        })
      },

      onChange (e) {
        this.$emit('change', e)
      },
      gotoKefu() {
        window.open('https://work.weixin.qq.com/kfid/kfcaa4208f661131eba', '_blank')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    display: flex;
    flex-direction: column;
    height: 100vh;

    .body {
      position: relative;
      flex: 1;
      width: 100%;
      background-color: #cdc8c8;
      // background: url(../../assets/images/login/login.png) no-repeat;
      background-size: 100% 100%;

      .middle {
        position: absolute;
        display: flex;
        justify-content: flex-end;
        top: 50%;
        left: 50%;
        z-index: 11;
        width: 1280px;
        transform: translate(-50%, -50%);

        & > .left {
          padding-top: 42px;
          font-family: MicrosoftYaHei;

          p {
            line-height: 24px;
            margin-top: 12px;
            margin-bottom: 13px;
            font-size: 18px;
            color: #fff;
          }

          span {
            color: #fff;
          }
        }

        & > .right {
          width: 500px;
          padding: 63px 40px 42px;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
          background: #fff;
          border-radius: 16px;
          backdrop-filter: blur(6px);
          overflow: hidden;

          .tab {
            display: flex;
            position: relative;
            align-items: center;
            margin-bottom: 36px;
            padding-bottom: 17px;
            border-bottom: 1px solid #DCDFE6;

            &::after {
              position: absolute;
              bottom: -1px;
              left: 0;
              z-index: 1;
              width: 81px;
              height: 2px;
              background: #1FBAD6;
              content: ' ';
              transition: all ease-in-out 0.3s;
            }

            &.tab-active:after {
              transform: translateX(138px);
            }

            h2 {
              width: 81px;
              line-height: 24px;
              font-size: 20px;
              text-align: center;
              font-family: SJsuqian;
              color: #000000;
              cursor: pointer;
              user-select: none;
              transition: all ease 0.4s;

              &.active, &:hover {
                color: #1FBAD6;
              }

              &:first-child {
                margin-right: 58px;
              }
            }
          }

          .login-type {
            font-size: 14px;
            font-family: SJsuqian;
            text-align: center;
            color: #54657D;
            cursor: pointer;
            transition: all ease-in-out 0.4s;

            &:hover {
              color: #1FBAD6;
            }
          }

          .login-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 21px;
            margin-bottom: 38px;

            div {
              display: flex;
              align-items: center;

              span {
                font-family: SJsuqian;
                color: #54657D;
              }

              i {
                font-family: SJsuqian;
                color: #1FBAD6;
              }
            }
          }
        }
      }

      ::v-deep .el-form {
        .el-input__inner {
          height: 48px;
          border-color: #DCDFE6;
          background-color: transparent;

          &:focus, &:hover {
            border-color: #1FBAD6;
          }

          &::placeholder {
            color: #666666;
          }
        }

        .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus {
          border-color: #F56C6C;
        }

        .el-form-item {
          margin-bottom: 20px;
        }

        .el-button {
          height: 48px;
          margin-top: 28px;
          font-size: 16px;
        }

        .code-item {
          display: flex;
          align-items: center;
          justify-content: space-between;


          span {
            width: 110px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            user-select: none;
            border-radius: 4px;
            transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
            border: 1px solid #DCDFE6;

            &:hover {
              border-color: #1FBAD6;
            }
          }

          .el-form-item {
            width: 300px;
          }
        }
      }

      .copyright {
        position: fixed;
        bottom: 24px;
        left: 50%;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        letter-spacing: 1px;
        transform: translateX(-50%);
      }
    }
  }

#kefu {
  position: fixed;
  right: 20px;
  bottom: 40px;
  z-index: 999;
  width: 60px;
  height: 60px;
}

#kefu .topBtn {
  width: 60px;
  height: 60px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  -webkit-animation: wobble 250ms infinite;
  animation: wobble 250ms infinite;
  background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20t%3D%221575450105478%22%20class%3D%22icon%22%20viewBox%3D%220%200%201220%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222883%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M609.524%20103.522c-222.89%200-403.712%20178.472-403.712%20398.78%200%20220.31%20180.823%20398.782%20403.712%20398.782%20222.889%200%20403.712-178.473%20403.712-398.781%200-220.309-180.823-398.781-403.712-398.781v48.762c196.1%200%20354.95%20156.785%20354.95%20350.019s-158.85%20350.019-354.95%20350.019-354.95-156.785-354.95-350.02c0-193.233%20158.85-350.018%20354.95-350.018v-48.762z%22%20fill%3D%22%231296db%22%20p-id%3D%222884%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M786.578%20916.34c166.45-69.217%20278.408-231.055%20278.408-414.035%200-248.026-203.847-449.219-455.457-449.219-251.619%200-455.457%20201.188-455.457%20449.22%200%2055.397%2010.152%20109.367%2029.718%20159.975%204.855%2012.56-1.39%2026.677-13.949%2031.533-12.56%204.855-26.677-1.39-31.532-13.949a490.396%20490.396%200%200%201-3.042-8.078c-1.85%200.077-3.711%200.116-5.581%200.116C58.06%20671.903%200%20614.597%200%20543.903c0-65.005%2049.09-118.69%20112.68-126.91C153.65%20182.56%20360.56%204.324%20609.528%204.324c248.962%200%20455.877%20178.24%20496.85%20412.67%2063.583%208.225%20112.669%2061.907%20112.669%20126.909%200%2070.694-58.06%20128-129.686%20128-1.89%200-3.771-0.04-5.642-0.119-47.536%20129.702-148.34%20235.841-279.493%20290.027-1.161%2033.464-29.012%2060.24-63.2%2060.24-34.925%200-63.237-27.944-63.237-62.416%200-34.471%2028.312-62.415%2063.237-62.415%2017.892%200%2034.048%207.333%2045.551%2019.12z%22%20fill%3D%22%231296db%22%20p-id%3D%222885%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M609.528%20611.405c-58.933%200-112.056-10.644-158.472-28.342-16.123-6.147-30.211-12.702-42.138-19.208-6.926-3.777-11.447-6.59-13.437-7.972-19.24-13.373-44.428%205.446-37.059%2027.688%2035.296%20106.527%20136.054%20179.913%20251.106%20179.913%20115.05%200%20215.796-73.384%20251.092-179.913%207.37-22.243-17.82-41.062-37.06-27.687-1.99%201.383-6.51%204.195-13.434%207.972-11.926%206.505-26.012%2013.06-42.133%2019.207-46.413%2017.698-99.533%2028.342-158.465%2028.342z%22%20fill%3D%22%231296db%22%20p-id%3D%222886%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}
</style>
