<template>
  <div id="login-1">
    <van-row>
      <van-col span="24" class="main">
        <van-form @submit="onSubmit" label-width="4em">
          <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: '密码' }]" />
          <van-field
            readonly
            clickable
            name="code"
            :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>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
        <van-col span="24" class="register">
          <!-- <span class="text">还没有账号?</span> -->
          <!-- <van-button type="info" size="mini" plain @click="regBtn">现在注册</van-button> -->
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: personal } = createNamespacedHelpers('personal');
const { mapActions: adminLogin } = createNamespacedHelpers('adminLogin');
export default {
  name: 'login-1',
  props: {},
  components: {},
  data: function () {
    return {
      form: {},
      // 机构列表
      adminList: [],
      oneShow: false,
    };
  },
  created() {
    this.searchOther();
  },
  methods: {
    ...personal(['perLogin']),
    ...adminLogin(['query']),
    async onSubmit(values) {
      let res = await this.perLogin({ user: values });
      if (this.$checkRes(res)) {
        if (this.path) this.$router.push({ path: this.path });
        else this.$router.push({ path: '/account/index' });
      } else {
        this.$toast({ type: 'fail', message: res.errmsg });
      }
    },
    // 注册
    regBtn() {
      this.$router.push({ path: '/register' });
    },
    // 确认选择
    oneFim(data) {
      this.$set(this.form, `code`, data.code);
      this.oneShow = 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, `adminList`, data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
    path() {
      return this.$route.query.path;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .register {
    text-align: center;
    .text {
      position: relative;
      top: 4px;
      padding: 0 10px;
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
