<template>
  <!-- 筛查地图 -->
  <div class="index-wrap">
    <!-- <x-header :left-options="{ backText: '', showBack: false }">
      登录
    </x-header> -->
    <v-content
      :has-header="false"
      :has-footer="false"
    >

      <van-form @submit="onSubmit">
        <div class="title">登录</div>
        <van-field
          v-model="userName"
          name="userName"
          label=""
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label=""
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button
            round
            block
            :loading='loading'
            type="info"
            class="btn"
            native-type="submit"
          >提交</van-button>
        </div>
      </van-form>
    </v-content>
  </div>
</template>
<script>
import { encryption } from "../utils/encryption.js";
export default {
  name: 'login',
  data () {
    return {
      loading: false,
      userName: '',
      password: '',
    };
  },
  methods: {
    onSubmit (values) {
      // 成功的回调函数
      this.loading = true
      console.log('submit', values);
      let data = {
        userName: encryption.encrypt(this.userName),
        password: encryption.encrypt(this.password),
        validateText: '',
        validateKey: +new Date()
      };
      this.$API.login(data).then(res => {
        this.loading = false
        if (res.code == 1) {
          localStorage.setItem('vd_token', res.result)
          this.$toast.success({
            type: 'success',
            forbidClick: true,
            message: '登录成功',
            onClose: () => {
              this.$router.push('/peopleList')
            },
            duration: 1500
          })
        }
      })
    },
  },
  mounted () {
    if (localStorage.getItem('vd_token')) {
      this.$router.push('/peopleList')
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  padding: 0 5px;
}
.van-form {
  width: 100%;
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  .title {
    text-align: center;
    font-size: 20px;
    margin: 20px 0;
  }
  .van-field {
    // height: 44px;
  }
  .btn {
    height: 44px;
    border-radius: 22px !important;
  }
}
</style>
