<template>
  <div class="syslogin">
    <div class="login-title" >
      <div class="login-title-chi" style="white-space: nowrap">
        <img src="../../../static/newStyle/login-info.png"/>
        <span>关于我们</span>
        <img src="../../../static/newStyle/login-con.png"/>
        <span>联系我们</span>
      </div>
    </div>
    <!--输入框-->
    <div class="loginmain">
      <!-- <img src="../../../static/login_title1.png" alt="图片加载未完成" class="img-responsive" style="margin: 0 auto; padding-top: 150px;" /> -->
      <div class="loginmain-left">
        <img  class="loginmain-left-img" src="../../../static/newStyle/login-left.png">
      </div>
      <div class="loginmain-right">

        <p @click="theme()" style="white-space: nowrap">燃气客服系统</p>

        <form v-show="!login">
          <!--                    <input type="text" placeholder="用户名" v-model="model.ename" class="usericon">-->
          <div class="login-input">
            <img src="../../../static/newStyle/login-user.png"/>
            <input type="text" style="display: inline;background-color: white!important;" placeholder="用户名" v-model="model.ename"/>
          </div>
          <div class="login-input">
            <img src="../../../static/newStyle/login-pwd.png"/>
            <input type="password" placeholder="密码" style="display: inline;background-color: darkgray;" v-model="model.password"
                   @keyup.enter="confirm('key')"/>
          </div>
          <div class="login-input-1">
            <img src="../../../static/newStyle/login-check.png"/>
            <input v-if="$login.Verification" class="login-check"  type="text" placeholder="请输入验证码"
                   v-model="picLyanzhengma" @keyup.enter="confirm('key')"/>
          </div>
          <div class="login-input-2" >
            <input v-if="$login.Verification" class="login-check-1" style="display: inline;background-color:#eeeeee !important;"
                   type="button" @click="createCode" v-model="checkCode"/>
          </div>
          <div class="login-bt">
            <button type="button" id="login-button" class="login-button" @click.prevent="confirm('click')">登录</button>
          </div>
          <!--                    <input type="password" placeholder="密码" v-model="model.password" class="psicon"-->
          <!--                           @keyup.enter="confirm('key')">-->
          <!--                    <input v-if="$login.Verification" styljiaoyane="width: 40%; display: inline" type="text" placeholder="请输入验证码"-->
          <!--                           v-model="picLyanzhengma" @keyup.enter="confirm('key')">-->
          <!--                    <input v-if="$login.Verification" style="width: 30%; display: inline;background-color: darkgray;"-->
          <!--                           type="button" @click="createCode" v-model="checkCode"/><br>-->

          <!-- <button type="button" id="login-button" @click.prevent="confirm()"><strong>注册</strong></button> -->
          <!-- <span @click="register()">还没有注册，现在注册>>></span> -->
        </form>
        <div v-show="login" class="login_load">
          <img src="../../../static/newStyle/login-do.gif">
        </div>
      </div>
    </div>
    <div class="login-foot" v-show="false">
      技术支持：西安奥枫软件有限公司
    </div>

    <modal v-if="depPromptShow" :show.sync="depPromptShow" :backdrop="false" v-ref:modal >
      <header slot="modal-header" class="modal-header">
        <h4 class="modal-title">登录信息</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <form class="form-horizontal">
          <div class="row">
          <div class="col-sm-12 form-group">
            <label class="col-sm-5 control-label">当前登录人</label>
            <div class="col-sm-7">
              <p class="form-control-static">{{$login.f.name}}</p>
            </div>
          </div>
          <div class="col-sm-12 form-group">
            <label class="col-sm-5 control-label">所在销售点</label>
            <div class="col-sm-7">
              <p class="form-control-static">{{$login.f.deps}}</p>
            </div>
          </div>
          </div>
        </form>
      </article>
      <footer  slot="modal-footer" class="modal-footer">
        <button class="button_search" @click="depPromptConfirm">确认</button>
        <button class="button_clear" @click="depPromptCancel">取消</button>
      </footer>
    </modal>

    <!-- 修改密码组件 -->
    <modify-pw :show.sync="modifyPwShow" v-if="modifyPwShow" :ename="model.ename"></modify-pw>
  </div>

</template>

<script>
  import co from 'co'
  import $ from 'jquery'
  import Vue from 'vue'

  let saveGen = function *(self) {
    try {
      yield self.$login.login(self.model.ename, self.model.password)
      yield self.$appdata.load()

      if (Vue.$heatCompatibility) {
        try {
          yield self.$loginHeat.login(self.model.ename, self.model.password)
          yield self.$appdataHeat.load()
        } catch (e) {
          console.log('热力系统登陆失败!')
        }
      }

      yield self.$getConfig(self, 'Login')
      console.log('登录配置', self.config)
      if (self.config.isMac) {
        // 获取该登录人分公司下的mac配置
        let getMacs = yield self.$resetpost('rs/sql/equipmentQuery', {data: {condition: `f_filialeids like '%${self.$login.f.f_orgids}%'`}}, {
          resolveMsg: null,
          rejectMsg: null
        }).catch(() => {
          throw new Error('获取mac配置失败')
        })
        console.log('MAC地址信息', getMacs)
        // 获取本地mac地址
        let getLocalMac = yield self.$resetget('http://127.0.0.1:8003/loadmac', {
          resolveMsg: null,
          rejectMsg: null
        }).catch(() => {
          throw new Error('获取本地mac配置失败')
        })
        console.log('本地MAC地址信息', getLocalMac)
        // 对Mac地址进行匹配
        let macValidate = false
        for (let i = 0; i < getLocalMac.data.mac.length; i++) {
          for (let j = 0; j < getMacs.data.length; j++) {
            if (getMacs.data[j].f_mac_number.toLocaleUpperCase() === getLocalMac.data.mac[i]) {
              macValidate = true
            }
          }
        }
        if (!macValidate) {
          throw new Error('Mac地址验证失败, 请联系管理员！！')
        }
      }
      if (self.config.weakPassword && !(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*(123|321|abc|cba))[a-zA-Z\d!@#$%^&*()_+-=<>?]{8,16}$/.test(self.model.password))) {
        self.$showMessage('登录系统: 此账户的密码过于简单，请修改密码后重新登陆！！！', ['confirm']).then((res) => {
          self.modifyPwShow = true
        })
      } else if (self.config.depPrompt) {
        self.depPromptShow = true
      } else {
        self.$goto('home-page', {functions: self.$login.f})
        if (self.$login) {
          console.log('登录信息', self.$login.f)
          global.login=self.$login.f
          console.log('登录信息', global.login)
        }
      }

    } catch (ret) {
      console.error('登录失败', ret)
      let msg
      if (ret instanceof Error) {
        msg = ret
      }
      if (ret.status === 0) {
        msg = '服务连接错误，请确认服务状态'
      } else if (ret.status === 401) {
        msg = ret.data
      } else if (ret.status === 710) {
        msg = ret.data
      }
      self.createCode()
      self.picLyanzhengma = ''
      yield self.$showMessage(msg)
      self.model.ename = ''
      self.model.password = ''
      self.login = false
      $('form').fadeIn(500)
    }
  }
  export default {
    title: '登录',
    ready () {
      if (this.$login && this.$login.getUrlCompileParames('name') && this.$login.getUrlCompileParames('password')) {
        this.model.ename = this.$login.getUrlCompileParames('name')
        this.model.password = this.$login.getUrlCompileParames('password')
        this.confirm()
      }
      $('#login-button').click(function (event) {
        event.preventDefault()
        $('form').fadeOut(500)
      }),
        this.createCode()
    },
    data () {
      return {
        image:{
          img1: '/images/newStyle/login-info.png',
          img2: '/images/newStyle/login-con.png',
          img3: '/images/newStyle/login-left.png',
          img4: '/images/newStyle/login-user.png',
          img5: '/images/newStyle/login-pwd.png',
          img6: '/images/newStyle/login-check.png',
          img7: '/images/newStyle/login-do.png',
        },
        config: {
          isMac: false,
          depPrompt: false,
        },
        modifyPwShow:false,
        login: false,
        depPromptShow: false,
        model: {},
        show: false,
        checkCode: '',
        login_do:true,
        picLyanzhengma: ''
      }
    },
    methods: {
      theme(){
        // var  elementList = document.querySelectorAll('body');
        //   console.log(elementList)
        //   document.querySelectorAll('body')[0].className='themeTwo'
        //   var  elementList = document.querySelectorAll('body');
        //   console.log(elementList)
      },
      onReady () {
        this.$emit('ready')
      },
      confirm (key) {
        this.login_do=!this.login_do
        // return
        if (key == 'key') {
          $('form').fadeOut(500)
        }
        this.login = true
        // let gen = saveGen(this)
        // return co(gen)
        if(this.$login.Verification){
          if(this.picLyanzhengma == '') {
            this.$showMessage("请输入验证码！").then(()=>{
              this.login = false
              $('form').fadeIn(500)
              this.createCode()
            })
          }else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) {
            //若输入的验证码与产生的验证码不一致时
            this.$showMessage("验证码不正确").then(()=>{
              this.login = false
              $('form').fadeIn(500)
              this.createCode();//刷新验证码
              this.picLyanzhengma = '';
            })
          }else {
            this.login = true
            let gen = saveGen(this)
            return co(gen)
          }
        }else {
          this.login = true
          let gen = saveGen(this)
          return co(gen)
        }
      },
      createCode(){
        let code = "";
        let codeLength = 4;//验证码的长度
        let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
          'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//随机数
        for (let i = 0; i < codeLength; i++) {
          //循环操作
          let index = Math.floor(Math.random() * 36);//取得随机数的索引（0~35）
          code += random[index];//根据索引取得随机数加到code上
        }
        this.checkCode = code;//把code值赋给验证码
      },

      async depPromptConfirm () {
        this.depPromptShow = false
        return this.$goto('home-page', {functions: this.$login.f})
      },

      depPromptCancel () {
        this.depPromptShow = false
        this.createCode()
        this.picLyanzhengma = ''
        this.model.ename = ''
        this.model.password = ''
        this.login = false
        $('form').fadeIn(500)
      }
    }
  }
</script>

<style>
  /*输入框样式*/
  /*@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300);*/
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-weight: 300;
  }

  body {
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: 300;
  }

  body ::-webkit-input-placeholder {
    /* WebKit browsers */
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: 300;
  }

  body :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    opacity: 1;
    font-weight: 300;
  }

  body ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    opacity: 1;
    font-weight: 300;
  }

  body :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    font-weight: 300;
  }

  .wrapper {
    /*background: #2D83BA;
    background: -webkit-linear-gradient(top left, #2D83BA 0%, #2D83BA 100%);
    background: linear-gradient(to bottom right, #2D83BA 0%, #2D83BA 100%);
    opacity: 0.8;*/
    position: absolute;
    top: 50%;
    right: -60px;
    width: 40%;
    height: 400px;
    margin-top: -150px;
    overflow: hidden;

  }

  .wrapper.form-success .container h3 {
    -webkit-transform: translateY(85px);
    -ms-transform: translateY(85px);
    transform: translateY(85px);
  }

  .container {
    max-width: 350px;
    margin: 0 auto;
    padding: 30px 100px 50px 100px;
    height: 400px;
    text-align: center;
    /*以下增加*/
    background: #2D83BA;
    background: -webkit-linear-gradient(top left, #2D83BA 0%, #2D83BA 100%);
    background: linear-gradient(to bottom right, #2D83BA 0%, #2D83BA 100%);
    opacity: 0.8;
  }

  .container h3 {
    font-size: 40px;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-put;
    transition-timing-function: ease-in-put;
    font-weight: 200;
  }

  .form {
    padding: 20px 0;
    position: relative;
    z-index: 2;
  }

  .form input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    border: 1px solid #50ABE6;
    background-color: #50ABE6;
    width: 250px;
    border-radius: 3px;
    padding: 10px 15px;
    margin: 0 auto 10px auto;
    display: block;
    text-align: center;
    font-size: 18px;
    color: white;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    font-weight: 300;
  }

  .form input:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }

  .form input:focus {
    background-color: white;
    width: 300px;
    color: #53e3a6;
  }

  .usericon {
    background-image: url(../../../static/usericon.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position-x: 8px;
    background-position-y: 8px;
  }

  .psicon {
    background-image: url(../../../static/psicon.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position-x: 8px;
    background-position-y: 8px;
  }

  .form button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    background-color: white;
    border: 0;
    padding: 10px 15px;
    color: #253830;
    border-radius: 3px;
    width: 250px;
    cursor: pointer;
    font-size: 18px;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
  }

  .form button:hover {
    background-color: #f5f7f9;
  }

  /*注册字体样式*/
  .form span {
    color: #fff;
    display: table-footer-group;
    position: absolute;
    right: 10px;
    margin-top: 10px;
    cursor: pointer;
  }

  .logotitle {
    color: #fff;
    position: absolute;
    top: 50px;
    left: 50px;
    font-size: 50px;
  }

  /*注册模态框界面样式*/
  .modifystyle {
    background: #FCFEEE;
  }

  .modifystyle div {
    height: auto;
    margin-bottom: 15px;
    /*text-align: center;*/
    /*margin-left: 20%;*/
  }

  /*bootstrap字体图标要手动调整，所以使用字体图标的span必须紧跟在input后面，负责会错位*/
  .modifystyle div input + span {
    top: 0 !important;
    right: 32%;
  }

  .modifystyle span {
    color: red;
  }

  /* 通告区内容 */
  .notice-board {
    height: auto;
    position: absolute;
    top: 50%;
    margin-top: -150px;
    margin-left: 100px;
    color: #fff;
  }

  /*修改密码底部按钮部分样式*/
  .footerbtn {
    text-align: center;
    padding: 15px;
  }

  .footerbtn button {
    width: 100px;
    margin-left: 20px;
  }

  .bg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.15);
    bottom: -160px;
    -webkit-animation: square 25s infinite;
    animation: square 25s infinite;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
  }

  .bg-bubbles li:nth-child(1) {
    left: 10%;
  }

  .bg-bubbles li:nth-child(2) {
    left: 20%;
    width: 80px;
    height: 80px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 17s;
    animation-duration: 17s;
  }

  .bg-bubbles li:nth-child(3) {
    left: 25%;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }

  .bg-bubbles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    -webkit-animation-duration: 22s;
    animation-duration: 22s;
    background-color: rgba(255, 255, 255, 0.25);
  }

  .bg-bubbles li:nth-child(5) {
    left: 70%;
  }

  .bg-bubbles li:nth-child(6) {
    left: 80%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .bg-bubbles li:nth-child(7) {
    left: 32%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
  }

  .bg-bubbles li:nth-child(8) {
    left: 55%;
    width: 20px;
    height: 20px;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
  }

  .bg-bubbles li:nth-child(9) {
    left: 25%;
    width: 10px;
    height: 10px;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 40s;
    animation-duration: 40s;
    background-color: rgba(255, 255, 255, 0.3);
  }

  .bg-bubbles li:nth-child(10) {
    left: 90%;
    width: 160px;
    height: 160px;
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
  }

  @-webkit-keyframes square {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-700px) rotate(600deg);
      transform: translateY(-700px) rotate(600deg);
    }
  }

  @keyframes square {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-700px) rotate(600deg);
      transform: translateY(-700px) rotate(600deg);
    }
  }
</style>
