<template>
  <section class="login_box">
    <h1 style="margin-bottom:30px;font-size:33px;font-weight:normal">登录</h1>
    <el-form v-show="loginByNormal" ref="form" :model="data" :rules="rules" @submit.native="submit">
      <el-form-item prop="Logincode">
        <el-input style="width:310px;" type="text" v-model="data.Logincode" name="Logincode" placeholder="请输入账号"
          :maxlength="11">
        </el-input>
      </el-form-item>
      <!--密码-->
      <el-form-item prop="Password">
        <el-input style="width:310px;" type="password" v-model="data.Password" name="Password" placeholder="请输入密码">
        </el-input>
      </el-form-item>
      <!--图片验证码-->
      <el-form-item prop="Code">
        <el-input style="width:310px;" type="text" v-model="data.Code" placeholder="请输入验证码">
          <img slot="append" :src="vaildimg" @click="getvaild" style="height:34px;">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit" style="display:block;width:100%;padding:12px 0;background:#409eff" :loading="disabled"
          type="primary">登录
        </el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>

export default {
  components: {

  },
  data: function () {
    return {
      loginByNormal: true,
      disabled: false,
      vaildimg: '',
      data: {
        Logincode: '',
        Password: '',
        Code: '',
        CodeKey: '',
        Appcpde: ''
      },
      rules: {
        Logincode: [this.$vaild.required('账号')],
        Password: [this.$vaild.required('密码')],
        Code: [this.$vaild.required('验证码')]
      },
      menus: []
    }
  },
  created: function () {
    this.getvaild()
  },
  beforeDestroy: function () {
    clearTimeout(this.timerId)
  },
  methods: {
    getMenus () {
      this.$api
        .get('manage/v1/ManagerToPermission/GetPermissions')
        .then(res => {
          var menus = res.Data
          this.$local.setMenus(menus)
          this.$store.commit('setMnus', menus)
          var defulat = this.getDefaultMenu(menus)
          this.$router.replace(defulat)
        })
    },
    getDefaultMenu (menus) {
      if (menus.length == 0) return '/login'
      var sumMenus
      for (var i = 0; i < menus.length; i++) {
        sumMenus = menus[i].Children
        if (sumMenus) break
      }
      if (sumMenus.length == 0) return '/login'
      return sumMenus[0].Permissionurl
    },
    getvaild () {
      this.$api.get('baseinfo/v1/manager/GetValidateCode').then(res => {
        var img = 'data:image/jpg;base64,' + res.Data.img
        this.vaildimg = img
        this.data.CodeKey = res.Data.key
        clearTimeout(this.timerId)
        this.timerId = setTimeout(() => {
          this.getvaild()
        }, 10 * 60 * 1000)
      })
    },
    submit: function (e) {
      e.preventDefault()
      this.$refs.form.validate(pass => {
        if (!pass) return
        this.login()
      })
    },
    loginSuccess: function (data) {
      this.userInfo = data
      window.localStorage.clear() // 防止有未清理的缓存
      this.$local.setUserCache(data)
      this.$store.commit('updateUserInfo', data)
      window.localStorage.setItem('loginType', 'property')
      this.getMenus()
      // this.$router.replace('/user/index');
    },
    isNewUser (id) {
      this.$api.get({
        url: 'Manager/Account',
        params: {
          params: {
            ID: id
          }
        },
        success: (res) => {
          if (res.Data.LoginCount <= 1) {
            return this.$router.push({
              name: 'initlogin'
            })
          }
          this.$router.push('/home')
        },
        failTip: '登录失败'
      })
    },
    login () {
      this.$api.post('baseinfo/v1/manager/Login', this.data).then(
        res => {
          if (res.Data) {
            this.loginSuccess(res.Data)
            return
          }
          return this.$message({
            type: 'error',
            message: '无此用户信息'
          })
        }, err => {
          this.getvaild()
        })
    }
  }
}
</script>

<style scoped>
  .login_box {
    position: absolute;
    box-sizing: border-box;
    height: 450px;
    width: 410px;
    padding: 50px 50px 30px 50px;
    z-index: 999999;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 4px;
  }
</style>
