<template>
  <div id="form-1">
    <van-row>
      <van-col span="24" class="main">
        <van-form @submit="onSubmit">
          <van-field v-model="form.pid" name="pid" label="管理员id" style="display: none" />
          <van-field readonly clickable name="pid_name" :value="form.pid_name" label="管理员" placeholder="点击选择" @click="showPicker = true" />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker show-toolbar :columns="pidList" value-key="name" @confirm="pidCon" @cancel="showPicker = false" />
          </van-popup>
          <van-field v-model="form.mech_name" name="mech_name" label="机构名称" :rules="[{ required: true, message: '机构名称' }]" />
          <van-field v-model="form.phone" name="phone" label="账号" :rules="[{ required: true, message: '账号' }]" />
          <van-field v-model="form.name" name="name" label="联系电话" :rules="[{ required: true, message: '联系电话' }]" />
          <van-field v-model="form.password" name="password" label="密码" type="password" :rules="[{ required: true, message: '密码' }]" v-if="!form.id" />
          <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 { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'form-1',
  props: {
    form: { type: Object },
    pidList: { type: Array },
  },
  components: {},
  data: function () {
    return {
      showPicker: false,
    };
  },
  created() {},
  methods: {
    onSubmit() {
      this.$emit('onSubmit', this.form);
    },
    pidCon(value) {
      this.$set(this.form, `pid`, value.id);
      this.$set(this.form, `pid_name`, value.name);
      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>
