<template>
  <div class="wrapper"
       :style="{'background-image':'url('+imgUrl.login+')'}">
    <div class="box">
      <div class="box-o">
        <h3>歡 迎 登 錄</h3>
        <div class="input">
          <input type="text"
                 v-model="postData.account"
                 name="account"
                 placeholder="组织名称" />
          <img class="one"
               :src="imgUrl.yh"
               alt />
          <input type="password"
                 v-model="postData.password"
                 name="password"
                 placeholder="密码" />
          <img class="two"
               :src="imgUrl.mm"
               alt />
        </div>
        <div class="three">
          <span @click="$jump('registered')">注册</span>
          <span>忘记密码</span>
        </div>
        <div class="btn"
             @click="login()">
          <button type="submit">立即登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      imgUrl: {
        login: require('../../static/img/login.png'),
        yh: require('../../static/img/yh.png'),
        mm: require('../../static/img/mm.png')
      },
      postData: {
        account: '',
        password: ''
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    login () {
      this.postData = {
        account: this.postData.account,
        password: this.$md5(this.postData.password)
      }

      console.log(this.postData)

      this.$http
        .post('/login', this.postData)
        .then(res => {
          if (res.data.errno === 0) {
            this.$Message.success('登陆成功')
            this.$router.push('roomInfo')
            /** 全局存储token */
            // window.localStorage['token'] = JSON.stringify(res.data.data.token)
            window.localStorage['token'] = JSON.stringify('shenxuekundetoken')
          } else {
            this.$Message.error('登录失败')
            this.forgetPassword = true
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(err => {
          console.log('登录失败')
        })
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang='scss' scoped>
.wrapper {
  min-width: 1280px;
  height: 720px;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 736px;
    height: 489px;
    background-color: rgba($color: #fff, $alpha: 0.5);
    box-shadow: 0px 3px 29px 0px rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .box-o {
      width: 434px;
      height: 309px;

      .btn {
        width: 218px;
        height: 56px;
        margin: 0 auto;

        button {
          box-sizing: border-box;
          width: 218px;
          height: 56px;
          background-color: #e60012;
          border: 1px solid #e60012;
          box-shadow: 3px 5px 9px 0px rgba(252, 142, 142, 0.47);
          border-radius: 28px;
          text-align: center;
          line-height: 56px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;

          outline: none;
        }
      }

      .three {
        margin: 15px auto 31px;
        width: 96%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-family: "MicrosoftYaHei";
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #666666;
        }
      }

      .input {
        width: 100%;
        height: 135px;
        margin-top: 33px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .one {
          width: 15px;
          height: 17px;
          position: absolute;
          top: 14%;
          left: 5%;
        }

        .two {
          width: 18px;
          height: 19px;
          position: absolute;
          bottom: 14%;
          left: 5%;
        }

        input {
          width: 434px;
          height: 56px;
          border-radius: 28px;
          border: solid 1px #a5acbb;
          opacity: 0.8;
          padding: 0 54px;
          box-sizing: border-box;
          outline: none;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 88px;
          letter-spacing: 0px;
          color: #333333;
        }
      }

      h3 {
        font-family: "HanWangKaiBold-Gb5";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        text-align: center;
      }
    }
  }
}
</style>
