<template>
  <div id="info-3">
    <van-row>
      <van-col span="24" class="main">
        <van-form @submit="onSubmit">
          <van-field v-model="form.id" name="id" label="数据id" style="display: none" />
          <van-field v-model="form.code" name="code" label="邀请码" placeholder="请填写邀请码" readonly />
          <van-field v-model="form.phone" name="phone" label="账号" placeholder="请填写账号" readonly />
          <van-field v-model="form.name" name="name" label="手机号" placeholder="请填写手机号" :rules="[{ required: true, message: '手机号' }]" />
          <van-field v-model="form.card" name="card" label="身份证号" placeholder="请填写身份证号" />
          <van-field v-model="form.email" name="email" label="电子邮箱" placeholder="请填写电子邮箱" />
          <van-field v-model="form.addr" name="addr" label="联系地址" placeholder="请填写联系地址" />
          <van-field v-model="form.zwzc" name="zwzc" label="职务职称" placeholder="请填写职务职称" />
          <van-field v-model="form.school" name="school" label="院校" placeholder="请填写院校" />
          <van-field v-model="form.major" name="major" label="专业" placeholder="请填写专业" />
          <van-field v-model="form.office_phone" name="office_phone" label="办公电话" placeholder="请填写办公电话" />
          <van-field readonly clickable name="juris" :value="form.juris" label="所属辖区" placeholder="点击选择" @click="showPicker = true" />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar :columns="jurisList" @confirm="onConfirm" @cancel="showPicker = false" />
          </van-popup>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { juris } from '@common/dict/index';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: personal } = createNamespacedHelpers('personal');
export default {
  name: 'info-3',
  props: {},
  components: {},
  data: function () {
    return {
      form: {},
      showPicker: false,
      jurisList: juris,
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...personal(['fetch', 'update']),
    async search() {
      if (this.user.id) {
        let res = await this.fetch(this.user.id);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      }
    },
    async onSubmit(values) {
      let res = await this.update(values);
      if (this.$checkRes(res)) {
        this.$toast({ type: `success`, message: `操作完成` });
        this.search();
      }
    },
    // 选择辖区
    onConfirm(value) {
      this.$set(this.form, `juris`, value);
      this.showPicker = false;
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped></style>
