<template>
  <div class="loginbg">
    <span class="logotitle">榆林榆川安检管理系统</span>
    <!-- <img src="../../../static/huangtengbiaozhi.png" alt="图片加载未完成" class="img-responsive logotitle" /> -->
    <div class="notice-board" style ="height:40%;">
      <h1 text-align="center">变更公告：</h1>
      <div style = "overflow:hidden;width:500px;margin:10px ">
        <div style="overflow-y:auto;width:520px;">
          <!-- <change-declare ></change-declare> -->
        </div>
      </div>
      <p>版本号：v1.0.8</p>
    </div>
    <!--输入框-->
    <div class="htmleaf-container">
      <!-- <img src="../../../static/login_title1.png" alt="图片加载未完成" class="img-responsive" style="margin: 0 auto; padding-top: 150px;" /> -->
      <div class="wrapper" :class="{'form-success': login}">
        <div class="container">
          <h3 style="color:white;">欢迎使用</h3>
          <!-- <h4 style="color:white;">Welcome to OA System</h4> -->
          <form class="form">
            <input type="text" placeholder="Username" v-model="model.ename" class="usericon">
            <input type="password" placeholder="Password" v-model="model.password" class="psicon" @keyup.enter="confirm()">
            <button type="button" id="login-button" @click.prevent="confirm()"><strong>登录</strong></button>
            <!-- <button type="button" id="login-button" @click.prevent="confirm()"><strong>注册</strong></button> -->
            <!-- <span @click="register()">还没有注册，现在注册>>></span> -->
          </form>
        </div>
      </div>
    </div>
    <!--输入框结束-->
    <!-- 注册模态框开始 -->
    <!-- <modal v-ref:modal :show.sync="registerShow" :backdrop="false" class="auto">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">注册</h4>
      </header>
      <article slot="modal-body" class="modal-body modifystyle">
        <validator name="v">

          <div class="has-feedback"
          :class="{'has-warning':$v.ename.required,'has-success': !$v.ename.required}">
            <label for="user" class="control-label">登录用户:&nbsp;&nbsp;</label>
            <input type="text" v-model="deliver.ename" class="form-control" id="user" v-validate:ename="{ required: true}">
            <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.ename.required"></span>
            <span v-if="$v.ename.required">不能为空</span>
          </div>

          <div class="has-feedback"
          :class="{'has-warning':$v.password.required, 'has-success': !$v.password.required}">
            <label for="newpassword" class="control-label">登录密码:&nbsp;&nbsp;</label>
            <input type="password" v-model="deliver.password" class="form-control" id="newpassword" v-validate:password='{ required: true }'>
            <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.password.required"></span>
            <span v-if="$v.password.required">不能为空</span>
          </div>

          <div class="has-feedback"
          :class="{'has-warning':$v.affirmpassword.required,'has-error':$v.affirmpassword.equalValid && !($v.affirmpassword.required),
          'has-success': !$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))}">
            <label for="affirmpassword" class="control-label">确认密码:&nbsp;&nbsp;</label>
            <input type="password" v-model="deliver.affirmpassword" class="form-control" id="affirmpassword" v-validate:affirmpassword="{ required: true, equalValid: deliver.password }">
            <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))"></span>
            <span v-if="$v.affirmpassword.required">不能为空</span>
            <span v-if="$v.affirmpassword.equalValid && !($v.affirmpassword.required)">两次密码不一致 !!</span>
          </div>

        </validator>
      </article>
      <footer slot="modal-footer" class="footerbtn">
        <button  type="button" class="btn btn-success" @click='registed()' :disabled="!$v.valid">提交注册</button>
      </footer>
    <modal> -->
    <!-- 注册模态框结束 -->
    <!-- <load-data></load-data> -->
  </div>
</template>

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

function findSubcompany (json) {
  let parent = json.parent
  do {
    if (parent.f_companylevel == '公司') {
      //tag
      return parent.name
    }
    parent = parent.parent
  } while (parent)
  //tag
  return ''
}

function company(json){
  let parent = json.parent
  // let jsonstr = json.id.toString()
  let jsonstr=''
  //tag
  do {
    if (parent.f_companylevel == '公司') {
      jsonstr += ('.' + parent.id.toString())
    }
    parent = parent.parent
  } while (parent)
  let  str = jsonstr.split(".").reverse().join(".")
  //tag)
  return str.substring(0, str.length-1)
}

let saveGen = function * (self) {
  // 调用远程登录服务，获取所有有权访问的功能
  let path = `/rs/user/${self.model.ename}/${self.model.password}/安检系统`
  yield self.$http({url: path, method: 'GET'}).then((ret)=>{
  Vue.f_subcompany = findSubcompany(ret.data)
  // 处理返回数据中的functions部分，加上size，以满足树的结构要求
  Vue.f_OrgStr = company(ret.data)
  self.functions = ret.data
  self.$goto('home-page', {functions: ret.data})
  }).catch((ret) => {
    let msg = '用户名或密码错误，请核对后重新登录'
    if (ret.status === 0) {
      msg = '服务连接错误，请确认服务状态'
    }
    self.$showMessage(msg).then(() => {
      self.model.ename = ''
      self.model.password = ''
      self.login = false
    })
  })
}

export default {
  title: '登录',
  data () {
    return {
      model: {},
      functions: {}
    }
  },
  methods: {
    confirm () {
      let gen = saveGen(this)
      return co(gen)
    }
  }
}
</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: 10%;-->
    <!--width: 40%;-->
    <!--height: 350px;-->
    <!--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: 350px;-->
    <!--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>-->
