<template>
  <div id="form-1">
    <van-row>
      <van-col span="24" class="main">
        <van-form @submit="onSubmit" label-width="4em">
          <van-field
            readonly
            clickable
            name="picker"
            :value="form.code"
            label="邀请码"
            placeholder="点击选择"
            @click="oneShow = true"
            :rules="[{ required: true, message: '请选择邀请码' }]"
          />
          <van-popup v-model="oneShow" position="bottom">
            <van-picker show-toolbar :columns="adminList" value-key="name" @confirm="oneFim" @cancel="oneShow = false" />
          </van-popup>
          <van-field v-model="form.phone" name="phone" label="账号" placeholder="请填写账号" :rules="[{ required: true, message: '账号' }]" />
          <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="登录密码"
            placeholder="请填写登录密码"
            :rules="[{ required: true, message: '登录密码' }]"
            v-if="!form.id"
          />
          <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 readonly clickable name="juris" :value="form.juris" label="所属辖区" placeholder="点击选择" @click="twoShow = true" />
          <van-popup v-model="twoShow" position="bottom">
            <van-picker show-toolbar :columns="jurisList" @confirm="twoFim" @cancel="twoShow = false" />
          </van-popup>
          <van-field name="status" label="审核状态" :rules="[{ required: true, message: '审核状态' }]">
            <template #input>
              <van-radio-group v-model="form.status" direction="horizontal">
                <van-radio name="0">待审</van-radio>
                <van-radio name="1">通过</van-radio>
                <van-radio name="2">拒绝</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="btn">
            <van-button type="primary" size="small" 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: adminLogin } = createNamespacedHelpers('adminLogin');
export default {
  name: 'form-1',
  props: {
    form: {},
  },
  components: {},
  data: function () {
    return {
      // 管理用户
      oneShow: false,
      adminList: [],
      // 所属辖区
      twoShow: false,
      jurisList: juris,
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...adminLogin(['query']),
    async search() {
      let p1 = await this.query({ code: this.user.code });
      let p2 = await this.query({ pid: this.user.id });
      if (p1.errcode == '0' || p1.errcode == '0') {
        let data = p1.data.concat(p2.data);
        if (data) this.$set(this, `adminList`, data);
      }
    },
    onSubmit(value) {
      if (value) this.$emit('onSubmit', { data: this.form });
    },
    // 确认选择
    oneFim(value) {
      this.$set(this.form, `code`, value.code);
      this.oneShow = false;
    },
    // 确认选择辖区
    twoFim(value) {
      this.$set(this.form, `juris`, value);
      this.twoShow = false;
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  text-align: center;
  margin: 10px 0;
}
</style>
