<template>
  <div id="registered">
    <van-row>
      <van-col class="title" span="24">请填写以下注册信息</van-col>
      <van-form @submit="onSubmit" v-model="form" :show-error-message="false">
        <van-field
          required
          v-model="form.name"
          left-icon="manager-o"
          name="name"
          label="用户名"
          placeholder="请填写用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field required left-icon="eye-o" v-model="form.age" name="age" label="年龄" type="digit" placeholder="请填写年龄" />
        <van-field name="gender" left-icon="friends-o" label="性别">
          <template #input>
            <van-radio-group v-model="form.gender" direction="horizontal">
              <van-radio name="男">男</van-radio>
              <van-radio name="女">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          required
          v-model="form.idnumber"
          name="idnumber"
          label="身份证号"
          left-icon="vip-card-o"
          placeholder="请填写身份证号"
          :rules="[{ required: true, message: '请填写身份证号' }]"
        />
        <van-field
          required
          v-model="form.phone"
          name="phone"
          label="手机号"
          left-icon="phone-o"
          placeholder="请填写手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field v-model="form.hosname" left-icon="wap-home-o" name="hosname" label="单位" placeholder="请填写单位名称" />
        <van-field v-model="form.deptname" left-icon="apps-o" name="deptname" label="科室" placeholder="请填写科室名称" />
        <van-field v-model="form.level" left-icon="gem-o" name="level" label="职称" placeholder="请填写职称" />
        <van-field v-model="form.major" left-icon="user-o" name="major" label="专业" placeholder="请填写专业" />
        <van-field v-model="form.isxf" name="isxf" left-icon="star-o" label="学分" placeholder="请填写需要授予学分" />
        <van-field name="isjc" left-icon="points" label="是否来自基层">
          <template #input>
            <van-switch v-model="form.isjc" size="20" />
          </template>
        </van-field>
        <van-field
          left-icon="location-o"
          readonly
          clickable
          name="address"
          :value="form.address"
          label="地址"
          placeholder="点击选择单位所在地"
          @click="showPicker = true"
        />
        <van-popup round v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="addresslist" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
        <van-field
          v-model="form.title"
          name="title"
          label="简介"
          left-icon="like-o"
          placeholder="请填写个人简介"
          type="textarea"
          rows="2"
          autosize
          maxlength="500"
          show-word-limit
        />
        <van-field
          v-model="form.remark"
          name="remark"
          left-icon="description"
          label="备注"
          placeholder="请填写备注"
          type="textarea"
          rows="2"
          autosize
          maxlength="500"
          show-word-limit
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </van-row>
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
const { mapActions: user } = createNamespacedHelpers('onliveUser');
export default {
  name: 'registered',
  props: {},
  components: {},
  data: () => ({
    form: {},
    addresslist: ['省直', '黄石', '鄂州', '孝感', '黄冈', '咸宁'],
    showPicker: false,
  }),
  created() {},
  computed: {},
  methods: {
    ...user(['register']),
    onConfirm(value) {
      this.form.address = value;
      this.showPicker = false;
    },
    async onSubmit(form) {
      form.role = '4';
      form.openid = this.$route.query.openid;
      console.log(form);
      const res = await this.register(form);
      console.log(res);
      if (res.errcode === 0) {
        this.$toast('注册成功');
      } else {
        this.$toast('注册失败');
      }
      console.log(form);
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 25px;
  padding: 60px 0 0 20px;
}
/deep/.van-field__control {
  margin: 5px 10px;
}
</style>
