<template>
  <div id="register-1">
    <van-row>
      <van-col span="24" class="main">
        <van-form @submit="onSubmit" label-width="4em">
          <van-field
            readonly
            clickable
            name="code"
            :value="form.code"
            label="邀请码"
            placeholder="点击选择"
            @click="codeShow = true"
            :rules="[{ required: true, message: '请选择邀请码' }]"
          />
          <van-popup v-model="codeShow" position="bottom">
            <van-picker show-toolbar :columns="codeList" @confirm="codeFirm" value-key="name" @cancel="codeShow = false" />
          </van-popup>
          <van-field v-model="form.phone" name="phone" label="账号" placeholder="请填写账号" :rules="[{ required: true, message: '账号' }]" />
          <van-col span="24" class="tip"> 账号作为登录平台唯一凭证，请谨慎填写！ </van-col>
          <van-field
            v-model="form.password"
            type="password"
            name="password"
            label="登录密码"
            placeholder="请填写登录密码"
            :rules="[{ required: true, message: '登录密码' }]"
          />
          <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="confirm" @cancel="showPicker = false" />
          </van-popup>
          <div class="btn">
            <van-button type="danger" size="small" @click="reseat">取消注册</van-button>
            <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: 'register-1',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function () {
    return {
      showPicker: false,
      jurisList: juris,
      // 邀请码
      codeList: [],
      codeShow: false,
    };
  },
  created() {
    this.searchOther();
  },
  methods: {
    ...adminLogin(['query']),
    // 取消注册
    reseat() {
      this.$router.push({ path: '/login' });
    },
    onSubmit(values) {
      this.$emit('onSubmit', values);
    },
    // 下一步
    next() {
      this.$emit('next');
    },
    // 选择辖区
    confirm(value) {
      this.$set(this.form, `juris`, value);
      this.showPicker = false;
    },
    // 选择邀请码
    codeFirm(value) {
      this.$set(this.form, `code`, value.code);
      this.codeShow = false;
    },
    // 查询其他信息
    async searchOther() {
      let p1 = await this.query({ role: '1' });
      if (this.$checkRes(p1)) {
        let data = [];
        for (const val of p1.data) {
          let p2 = await this.query({ role: '2', pid: val.id });
          if (this.$checkRes(p2)) {
            data.push(...p2.data);
          }
        }
        this.$set(this, `codeList`, data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .btn {
    margin: 10px;
    text-align: center;
    .van-button {
      margin: 0 10px;
    }
  }
  .tip {
    text-align: center;
    font-size: 14px;
    background-color: #ffffff;
    padding: 5 px 0;
    color: #ff0000;
  }
}
</style>
