<template>
  <div id="hairmess_manualCreate">
    <admin-frame topType="2" @back="back" :rightArrow="false" :usePage="false" :useNav="false">
      <template v-slot:info>
        <van-form label-width="5em" @submit="onSubmit">
          <van-field v-model="userName" center clearable label="查询用户" placeholder="请输入账号">
            <template #button>
              <van-button size="small" type="primary" @click="searchUser()" native-type="button">提交查询</van-button>
            </template>
          </van-field>
          <van-field readonly clickable name="to_name" :value="form.to_name" label="选择接收人" placeholder="点击选择用户" @click="oneShow = true" />
          <van-popup v-model="oneShow" position="bottom">
            <van-picker show-toolbar :columns="userList" value-key="codePhone" @confirm="oneFirm" @cancel="oneShow = false" />
          </van-popup>
          <van-field v-model="form.to_id" name="to_id" label="接收人id" readonly style="display: none" />
          <van-field
            v-model="form.to_name"
            name="to_name"
            label="接收人姓名"
            readonly
            placeholder="请输入接收人姓名"
            :rules="[{ required: true, message: '接收人姓名' }]"
          />
          <van-field v-model="patnetName" center clearable label="查询专利" placeholder="请输入专利名称">
            <template #button>
              <van-button size="small" type="primary" @click="searchPatent()" native-type="button">提交查询</van-button>
            </template>
          </van-field>
          <van-field readonly clickable name="patent_name" :value="form.patent_name" label="选择专利" placeholder="点击选择专利" @click="twoShow = true" />
          <van-popup v-model="twoShow" position="bottom">
            <van-picker show-toolbar :columns="patentList" value-key="typeName" @confirm="twoFirm" @cancel="twoShow = false" />
          </van-popup>
          <van-field v-model="form.patent_id" name="patent_id" label="专利id" placeholder="请输入专利id" readonly style="display: none" />
          <van-field v-model="form.create_number" name="create_number" label="专利号" placeholder="请输入专利号" />
          <van-field
            v-model="form.patent_name"
            name="patent_name"
            label="专利名称"
            type="textarea"
            autosize
            placeholder="请输入专利名称"
            :rules="[{ required: true, message: '请输入专利名称' }]"
          />
          <van-field name="file_url" label="反馈文件">
            <template #input>
              <van-uploader
                :fileList="form.file_url"
                :max-count="6"
                :after-read="(file) => toUpload(file, 'file_url')"
                @delete="(file) => toDelete(file, 'file_url')"
                accept="file"
              />
            </template>
          </van-field>
          <van-col span="24" class="btn">
            <van-button type="danger" size="small" @click="back">取消发送</van-button>
            <van-button type="info" size="small" native-type="submit">确认发送</van-button>
          </van-col>
        </van-form>
      </template>
    </admin-frame>
  </div>
</template>

<script>
import adminFrame from '@frame/src/components/mobile-frame/mobile-main.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
import { Toast } from 'vant';
const { mapActions: upload } = createNamespacedHelpers('upload');
const { mapActions: patentwarning } = createNamespacedHelpers('patentwarning');
const { mapActions: personal } = createNamespacedHelpers('personal');
const { mapActions: patentinfo } = createNamespacedHelpers('patentinfo');
const { mapActions: patentapply } = createNamespacedHelpers('patentapply');

export default {
  name: 'hairmess_manualCreate',
  props: {},
  components: {
    adminFrame,
  },
  data: function () {
    return {
      form: { file_url: [] },
      // 账号
      userName: '',
      // 接收人
      oneShow: false,
      userList: [],
      // 专利
      patnetName: '',
      twoShow: false,
      patentList: [],
    };
  },
  async created() {},
  methods: {
    ...upload(['upload']),
    ...patentwarning(['create']),
    ...personal({ personalQuery: 'query' }),
    ...patentinfo({ infoQuery: 'query' }),
    ...patentapply({ applyQuery: 'query' }),
    // 确认选择用户
    oneFirm(value) {
      this.$set(this.form, `to_id`, value._id);
      this.$set(this.form, `to_name`, value.phone);
      this.$set(this, `oneShow`, false);
    },
    // 确认选择专利
    twoFirm(value) {
      this.$set(this.form, `patent_id`, value.patent_id);
      this.$set(this.form, `create_number`, value.create_number);
      this.$set(this.form, `patent_name`, value.patent_name);
      this.$set(this, `twoShow`, false);
    },
    // 提交
    async onSubmit(value) {
      let res = await this.create(value);
      if (this.$checkRes(res, '发送成功', `${res.errmsg}`)) {
        this.back();
      }
    },
    // 查询用户
    async searchUser() {
      if (this.userName) {
        let res = await this.personalQuery({ phone: this.userName });
        if (res.errcode == '0' && res.total > 0) {
          this.$notify({ message: `符合条件用户共用${res.total}人，请选择用户。`, type: 'success' });
          for (const val of res.data) {
            val.codePhone = val.code + '--' + val.phone;
          }
          this.$set(this, `userList`, res.data);
        } else this.$notify({ message: `暂无符合条件用户`, type: 'warning' });
      }
    },
    // 查询该用户下的专利信息，专利申请
    async searchPatent() {
      let form = this.form;
      if (this.patnetName) {
        const toast = this.$toast.loading({ message: '加载中...', forbidClick: true, loadingType: 'spinner' });
        let list = [];
        // 专利申请
        let res = await this.applyQuery({ skip: 0, limit: '10000', name: this.patnetName, user_id: form.to_id });
        if (res.errcode == '0' && res.total > 0) {
          let apply = res.data.map((i) => ({ patent_id: i._id, create_number: i.create_number, patent_name: i.name, typeName: `(专利申请)-${i.name}` }));
          list.push(...apply);
        }
        // 专利信息
        res = await this.infoQuery({ skip: 0, limit: '10000', key_word: this.patnetName, user_id: form.to_id });
        if (res.errcode == '0' && res.total > 0) {
          let info = res.data.map((i) => ({ patent_id: i._id, create_number: i.create_number, patent_name: i.name, typeName: `(专利信息)-${i.name}` }));
          list.push(...info);
        }
        if (list && list.length > 0) {
          this.$notify({ message: `符合条件专利共用${list.length}个，请选择专利。`, type: 'success' });
          this.$set(this, `patentList`, list);
        } else this.$notify({ message: `暂无符合条件专利`, type: 'warning' });
        toast.clear();
      }
    },
    async toUpload({ file }, model) {
      // 上传,赋值
      const res = await this.upload({ file, dir: 'warning' });
      if (this.$checkRes(res)) {
        let list = this.form[model];
        this.$set(this.form, model, [...list, { 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);
    },
    // 返回
    back() {
      this.$router.push({ path: '/patent/admin/examine/hairmess' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  text-align: center;
  .van-button {
    margin: 10px;
  }
}
.one {
  .list {
    background-color: #fff;
    margin: 0 0 8px 0;
    padding: 8px;
    border-radius: 5px;
    .title {
      font-size: 16px;
      font-weight: bold;
      margin: 0 0 5px 0;
    }
    .other {
      margin: 0 0 5px 0;
      .otherInfo {
        font-size: 14px;
        color: #666;
        margin: 0 0 5px 0;
        span {
          color: #000;
        }
      }
    }
  }
}
</style>
