<template>
  <div id="activistAdd" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar title="添加积极分子" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="phone"
        type="tel"
        label="联系方式"
        placeholder="联系方式"
        :rules="[{ required: true, message: '请填联系方式' }]"
      />
      <van-field
        v-model="add"
        label="家庭住址"
        :rules="[{ required: true, message: '请填家庭住址' }]"
        placeholder="家庭住址"
      />
      <van-field
        v-model="basic"
        rows="2"
        autosize
        label="基本情况"
        type="textarea"
        placeholder="基本情况"
        :rules="[{ required: true, message: '请填基本情况' }]"
        show-word-limit
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {
  NavBar as vanNavBar,
  Button as vanButton,
  Sticky as vanSticky,
  Field as vanField,
  Form as vanForm
} from "vant";
import "vant/lib/nav-bar/style";
import "vant/lib/button/style";
import "vant/lib/form/style";
import "vant/lib/sticky/style";
import "vant/lib/field/style";
import { activistAdd } from "@/api/activist/activist.js";

export default {
  name: "app",
  data: function() {
    return {
      username: "",
      phone: "",
      add: "",
      basic: ""
    };
  },
  methods: {
    onSubmit() {
      activistAdd({
        name: this.username,
        address: this.add,
        phone: this.phone,
        basicInfo: this.basic
      }).then(res => {
        console.log(res);
        this.onClickLeft();
      });
    },
    onClickLeft() {
      history.go(-1);
    }
  },
  mounted() {},
  beforeDestroy: function() {},
  components: { vanSticky, vanNavBar, vanButton, vanForm, vanField }
};
</script>
<style lang="scss">
.app {
}
</style>
