<template>
  <div id="mech-1">
    <van-row>
      <van-col span="24" class="main">
        <van-col span="24" class="one">
          <van-form @submit="onSubmit" label-width="5em">
            <van-field v-model="form.id" name="id" label="数据id" readonly style="display: none" />
            <van-field name="status" label="机构类型" :rules="[{ required: true, message: '机构类型' }]">
              <template #input>
                <van-radio-group v-model="form.status" direction="horizontal" @change="changeStatus">
                  <van-radio name="2">系统机构</van-radio>
                  <van-radio name="3">代理机构</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-if="form.status == '2'" v-model="form.admin_id" name="admin_id" label="科企机构id" readonly style="display: none" />
            <van-field
              v-if="form.status == '2'"
              :value="form.admin_name"
              name="admin_name"
              label="科企机构"
              placeholder="点击选择"
              @click="oneShow = true"
              :rules="[{ required: true, message: '科企机构' }]"
            />
            <van-field v-if="form.status == '3'" v-model="form.agentmech_id" name="agentmech_id" label="代理机构id" readonly style="display: none" />
            <van-field
              v-if="form.status == '3'"
              :value="form.agentmech_name"
              name="agentmech_name"
              label="代理机构"
              placeholder="点击选择"
              @click="oneShow = true"
              :rules="[{ required: true, message: '代理机构' }]"
            />
            <van-popup v-model="oneShow" position="bottom">
              <van-picker show-toolbar :columns="agentmechList" value-key="name" @confirm="oneCom" @cancel="oneShow = false" />
            </van-popup>
            <van-field name="agent_url" label="申请文件" :rules="[{ required: true, message: '申请文件' }]">
              <template #input>
                <van-uploader
                  :fileList="form.agent_url"
                  :max-count="1"
                  :after-read="(file) => toUpload(file, 'agent_url')"
                  @delete="(file) => toDelete(file, 'agent_url')"
                  accept="file"
                />
              </template>
            </van-field>
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
          </van-form>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: adminLogin } = createNamespacedHelpers('adminLogin');
const { mapActions: agent_mech } = createNamespacedHelpers('agent_mech');
const { mapActions: upload } = createNamespacedHelpers('upload');
export default {
  name: 'mech-1',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function () {
    return {
      // 代理机构
      oneShow: false,
      agentmechList: [],
    };
  },
  created() {},
  methods: {
    ...adminLogin({ adminQuery: 'query' }),
    ...agent_mech({ agentmechQuery: 'query' }),
    ...upload(['upload']),
    onSubmit(value) {
      this.$emit('onSubmit', value);
    },
    // 查询机构
    async changeStatus(type) {
      if (type == '2') {
        let res = await this.adminQuery({ role: '1' });
        if (this.$checkRes(res)) this.$set(this, `agentmechList`, res.data);
      } else if (type == '3') {
        let res = await this.agentmechQuery();
        if (this.$checkRes(res)) this.$set(this, `agentmechList`, res.data);
      }
    },
    // 确认选择
    oneCom(values) {
      if (this.form.status == '2') {
        this.$set(this.form, `admin_id`, values.id);
        this.$set(this.form, `admin_name`, values.name);
      } else if (this.form.status == '3') {
        this.$set(this.form, `agentmech_id`, values.id);
        this.$set(this.form, `agentmech_name`, values.name);
      }
      this.oneShow = false;
    },
    async toUpload({ file }, model) {
      // 上传,赋值
      const res = await this.upload({ file, dir: 'file' });
      if (this.$checkRes(res)) {
        this.$set(this.form, model, [{ name: res.name, url: res.uri }]);
      }
    },
    toDelete(file, model) {
      const index = this.form[model].findIndex((f) => _.isEqual(f, file));
      this.form[model].splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

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