<template>
    <div class="login">
      <van-nav-bar
        left-arrow
        right-text="注册"
        @click-right="$router.push('/register')"
        @click-left="onClickLeft"
      />
      <van-form class="login-form" @submit="onSubmit">
        <van-field
          v-model="username"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
      <p class="text-center text1-2">登录即表示您同意<span class="notice-3">《用户协议》</span>和<span class="notice-3">《隐私政策》</span></p>
      <van-divider :style="{ borderColor: '#DCDEE3', padding: '0 16px', marginTop: '50px' }">更多登录方式</van-divider>
      <div class="login-list">
        <div class="login-list__item">
          <img src="@/assets/images/wechat.png" alt="wechat">
          <p class="login-list__label text1-2">微信</p>
        </div>
        <div class="login-list__item">
          <img src="@/assets/images/weibo.png" alt="weibo">
          <p class="login-list__label text1-2">微博</p>
        </div>
        <div class="login-list__item">
          <img src="@/assets/images/qq.png" alt="qq">
          <p class="login-list__label text1-2">QQ</p>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
    },
    onSubmit () {
      const formData = {
        username: this.username,
        password: this.password
      }
      this.$http.user.login(formData).then(({ code, data, msg }) => {
        if (code === 200) {
          this.$toast.success(msg)
          this.$store.commit('setToken', data.token)
          this.$store.dispatch('getUser')
          this.$router.push('/')
        } else {
          this.$toast.fail(msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .login {
    &-form {
      margin-top: 20px;
    }
    &-list {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      padding: 0 50px;
      &__item {
        text-align: center;
        img {
          margin-bottom: 10px;
        }
      }
    }
  }
</style>
