<template>
  <div id="form-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.name" name="name" label="专利名称" placeholder="专利名称" :rules="[{ required: true, message: '请填写专利名称' }]" />
            <van-field v-model="form.apply_name" name="apply_name" label="申请人" placeholder="申请人" :rules="[{ required: true, message: '请填写申请人' }]" />
            <van-field name="type" label="专利类型" :rules="[{ required: true, message: '请填写专利类型' }]">
              <template #input>
                <van-radio-group v-model="form.type" direction="horizontal">
                  <van-radio name="发明申请">发明申请</van-radio>
                  <van-radio name="实用新型">实用新型</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-model="form.inventor" name="inventor" label="发明人" placeholder="发明人" :rules="[{ required: true, message: '请填写发明人' }]" />
            <van-field
              v-model="form.contact"
              name="contact"
              label="技术联系人"
              placeholder="技术联系人"
              :rules="[{ required: true, message: '请填写技术联系人' }]"
            />
            <van-field v-model="form.phone" name="phone" label="联系电话" placeholder="联系电话" :rules="[{ required: true, message: '请填写联系电话' }]" />
            <van-field v-model="form.email" name="email" label="电子邮箱" placeholder="电子邮箱" :rules="[{ required: true, message: '请填写电子邮箱' }]" />
            <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>
            <van-field v-model="form.questions.q1" type="textarea" autosize label="特殊情况说明" />
            <van-field v-model="form.questions.q2" type="textarea" autosize label="本发明的技术领域" />
            <van-field v-model="form.questions.q3" type="textarea" autosize label="与本发明相关的背景技术" />
            <van-field v-model="form.questions.q4" type="textarea" autosize label="现有技术的缺点及本发明所要解决的技术问题" />
            <van-field v-model="form.questions.q5" type="textarea" autosize label="本发明技术方案的详细阐述" />
            <van-field v-model="form.questions.q6" type="textarea" autosize label="本申请的关键点和欲保护点" />
            <van-field v-model="form.questions.q7" type="textarea" autosize label="与本发明最相似,相近的实现技术,方案相比,本发明有何优点" />
            <van-field v-model="form.questions.q8" type="textarea" autosize label="针对本发明技术方案,是否还有别的替代方案" />
            <van-col span="24" style="text-align: center; margin: 10px 0">
              <van-button type="info" size="small" native-type="submit">提交申请</van-button>
            </van-col>
          </van-form>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: adminLogin } = createNamespacedHelpers('adminLogin');
const { mapActions: personal } = createNamespacedHelpers('personal');
const { mapActions: upload } = createNamespacedHelpers('upload');
const { mapActions: patentapply } = createNamespacedHelpers('patentapply');
export default {
  name: 'form-1',
  props: {
    apply_id: { type: String },
  },
  components: {},
  data: function () {
    return {
      // 管理员信息
      adminInfo: {},
      form: { questions: {} },
    };
  },

  async created() {
    await this.searchOther();
  },
  methods: {
    ...adminLogin({ adminQuery: 'query', adminfetch: 'fetch' }),
    ...personal({ personalQuery: 'query' }),
    ...upload(['upload']),
    ...patentapply(['fetch', 'create', 'update']),
    async onSubmit(values) {
      if (values) {
        let data = this.form;
        if (data.id) {
          if (data.status == '-6') data.status = '5';
          let res = await this.update(data);
          if (this.$checkRes(res)) {
            this.$toast({ type: `success`, message: `操作完成` });
            this.searchOther();
          }
        } else {
          data.status = '5';
          console.log(data);
          let res = await this.create(data);
          if (this.$checkRes(res)) {
            this.$toast({ type: `success`, message: `操作完成` });
            this.searchOther();
          }
        }
      }
    },
    // 查询其他信息
    async searchOther() {
      // 查询管理员信息
      let res = await this.adminfetch(this.user.pid);
      if (this.$checkRes(res)) this.$set(this, `adminInfo`, res.data);
      // 查詢用戶
      let data = {
        user_id: this.user.id,
        user_name: this.user.phone,
        admin_id: this.adminInfo.id,
        admin_name: this.adminInfo.name,
        agentmech_id: this.user.id,
        agentmech_name: this.user.phone,
        apply_name: this.user.phone,
        phone: this.user.name,
        email: this.user.email,
        questions: {},
      };
      this.$set(this, `form`, data);
    },
    // 用户重申
    async searchInfo() {
      let res = await this.fetch(this.apply_id);
      if (this.$checkRes(res)) {
        if (res.data.questions == undefined) res.data.questions = {};
        this.$set(this, `form`, res.data);
      }
    },
    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: {
    apply_id: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) this.searchInfo();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .inventor {
      background-color: #ffffff;
      .txt {
        padding: 5px 0px 0 18px;
        font-size: 14px;
        color: #666;
      }
      .btn {
        text-align: center;
        .van-button {
          margin: 8px;
        }
      }
      .list {
        padding: 0px 18px;
        .list_1 {
          border: 1px dashed #409eff;
          margin: 0 0 8px 0;
          text-align: center;
          padding: 5px;
          p {
            font-size: 14px;
          }
        }
      }
    }
  }
}
.dialog {
  /deep/.van-dialog__content {
    max-height: 350px;
    overflow-y: auto;
  }
  .one {
    .one_2 {
      .list {
        border-bottom: 1px dashed #ccc;
        margin: 0 0 8px 0;
        padding: 0 8px 5px 8px;
        .name {
          font-size: 16px;
          margin: 0 0 5px 0;
        }
        .other {
          margin: 0 0 5px 0;
          .otherInfo {
            font-size: 14px;
            color: #666;
            span {
              color: #000;
            }
          }
        }
        .btn {
          text-align: center;
        }
      }
    }
  }
  .two {
    .btn {
      margin: 8px 0;
      text-align: center;
    }
  }
}
</style>
