<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="7em">
            <van-field
              v-model="form.create_number"
              name="create_number"
              label="申请号"
              placeholder="请输入申请号"
              :rules="[{ required: true, message: '申请号' }]"
            />
            <van-field
              :value="form.create_date"
              name="create_date"
              label="申请日"
              placeholder="点击选择"
              @click="selectDate('create_date')"
              :rules="[{ required: false, message: '申请日' }]"
            />
            <van-field
              v-model="form.success_number"
              name="success_number"
              label="公开(公告)号"
              placeholder="请输入公开(公告)号"
              :rules="[{ required: false, message: '公开(公告)号' }]"
            />
            <van-field
              :value="form.success_date"
              name="success_date"
              label="公开(公告)日"
              placeholder="点击选择"
              @click="selectDate('success_date')"
              :rules="[{ required: false, message: '公开(公告)日' }]"
            />
            <van-field
              v-model="form.inventor"
              name="inventor"
              label="发明人"
              placeholder="请输入发明人"
              type="textarea"
              autosize
              rows="1"
              :rules="[{ required: true, message: '请输入发明人' }]"
            />
            <van-field
              v-model="form.agent"
              name="agent"
              label="代理机构"
              placeholder="请输入代理机构"
              :rules="[{ required: false, message: '请输入代理机构' }]"
            />
            <van-field
              v-model="form.agent_personal"
              name="agent_personal"
              label="代理人"
              placeholder="请输入代理人"
              :rules="[{ required: false, message: '请输入代理人' }]"
            />
            <van-field
              v-model="form.abstract"
              name="abstract"
              label="摘要"
              placeholder="请输入摘要"
              type="textarea"
              autosize
              maxlength="300"
              show-word-limit
              :rules="[{ required: false, message: '请输入摘要' }]"
            />
            <van-field
              v-model="form.address"
              name="address"
              label="发明人地址"
              placeholder="请输入发明人地址"
              :rules="[{ required: false, message: '请输入发明人地址' }]"
            />
            <van-field v-model="form.name" name="name" label="专利名称" placeholder="请输入专利名称" :rules="[{ required: true, message: '请输入专利名称' }]" />
            <van-field
              v-model="form.apply_personal"
              name="apply_personal"
              label="申请人"
              placeholder="请输入申请人"
              :rules="[{ required: true, message: '请输入申请人' }]"
            />
            <van-field name="term" label="专利有效性" :rules="[{ required: false, message: '请选择专利有效性' }]">
              <template #input>
                <van-radio-group v-model="form.term" direction="horizontal">
                  <van-radio name="有效">有效</van-radio>
                  <van-radio name="审中">审中</van-radio>
                  <van-radio name="失效">失效</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field name="type" label="专利类型" :rules="[{ required: false, message: '请选择专利类型' }]">
              <template #input>
                <van-radio-group v-model="form.type" direction="horizontal">
                  <van-radio name="发明申请">发明申请</van-radio>
                  <van-radio name="实用新型">实用新型</van-radio>
                  <van-radio name="外观设计">外观设计</van-radio>
                  <van-radio name="PCT国际申请号">PCT国际申请号</van-radio>
                  <van-radio name="PCT国际公布号">PCT国际公布号</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field name="img_url" label="首页附图" :rules="[{ required: false, message: '首页附图' }]">
              <template #input>
                <van-uploader
                  :fileList="form.img_url"
                  :max-count="1"
                  :after-read="(file) => toUpload(file, 'img_url')"
                  @delete="(file) => toDelete(file, 'img_url')"
                />
              </template>
            </van-field>
            <van-field
              v-model="form.nationality"
              name="nationality"
              label="公开国别"
              placeholder="请输入公开国别"
              :rules="[{ required: false, message: '请输入公开国别' }]"
            />
            <van-field
              v-model="form.ipc_type"
              name="ipc_type"
              label="IPC主分类"
              placeholder="请输入IPC主分类"
              :rules="[{ required: false, message: '请输入IPC主分类' }]"
            />
            <van-field
              v-model="form.onlegal_status"
              name="onlegal_status"
              label="当前法律状态"
              placeholder="请输入当前法律状态"
              :rules="[{ required: false, message: '请输入当前法律状态' }]"
            />
            <van-field
              v-model="form.legal_status"
              name="legal_status"
              label="法律状态"
              placeholder="请输入法律状态"
              :rules="[{ required: false, message: '请输入法律状态' }]"
            />
            <van-field
              :value="form.law_date"
              name="law_date"
              label="法律文书日期"
              placeholder="点击选择"
              @click="selectDate('law_date')"
              :rules="[{ required: false, message: '法律文书日期' }]"
            />
            <van-field
              v-model="form.on_obligee"
              name="on_obligee"
              label="变更前权利人"
              placeholder="请输入变更前权利人"
              :rules="[{ required: false, message: '请输入变更前权利人' }]"
            />
            <van-field
              v-model="form.apply_address"
              name="apply_address"
              label="申请人地址(其他)"
              placeholder="请输入申请人地址(其他)"
              :rules="[{ required: false, message: '请输入申请人地址(其他)' }]"
            />
            <van-field
              v-model="form.apply_other"
              name="apply_other"
              label="申请人(其他)"
              placeholder="请输入申请人(其他)"
              :rules="[{ required: false, message: '请输入申请人(其他)' }]"
            />
            <van-field
              v-model="form.law_num"
              name="law_num"
              label="法律文书编号"
              placeholder="请输入法律文书编号"
              :rules="[{ required: false, message: '请输入法律文书编号' }]"
            />
            <van-field
              :value="form.first_opendate"
              name="first_opendate"
              label="首次公开日"
              placeholder="点击选择"
              @click="selectDate('first_opendate')"
              :rules="[{ required: false, message: '首次公开日' }]"
            />
            <van-field
              :value="form.empower_date"
              name="empower_date"
              label="授权公告日"
              placeholder="点击选择"
              @click="selectDate('empower_date')"
              :rules="[{ required: false, message: '授权公告日' }]"
            />
            <van-field
              :value="form.lose_date"
              name="lose_date"
              label="失效日"
              placeholder="点击选择"
              @click="selectDate('lose_date')"
              :rules="[{ required: false, message: '失效日' }]"
            />
            <van-field
              :value="form.examine_date"
              name="examine_date"
              label="实质审查生效日"
              placeholder="点击选择"
              @click="selectDate('examine_date')"
              :rules="[{ required: false, message: '实质审查生效日' }]"
            />
            <van-field
              v-model="form.invention_design"
              name="invention_design"
              label="发明(设计)人(其他)"
              placeholder="请输入发明(设计)人(其他)"
              :rules="[{ required: false, message: '请输入发明(设计)人(其他)' }]"
            />
            <van-field
              v-model="form.incopat_link"
              name="incopat_link"
              label="链接到incoPat"
              placeholder="请输入链接到incoPat"
              :rules="[{ required: false, message: '请输入链接到incoPat' }]"
            />
            <van-field
              v-model="form.first_ask"
              name="first_ask"
              label="首项权利要求"
              placeholder="请输入首项权利要求"
              type="textarea"
              autosize
              :rules="[{ required: false, message: '请输入首项权利要求' }]"
            />
            <van-field
              v-model="form.first_apply"
              name="first_apply"
              label="第一申请人"
              placeholder="请输入第一申请人"
              :rules="[{ required: false, message: '请输入第一申请人' }]"
            />
            <van-field
              v-model="form.apply_city"
              name="apply_city"
              label="中国申请人地市"
              placeholder="请输入中国申请人地市"
              :rules="[{ required: false, message: '请输入中国申请人地市' }]"
            />
            <van-field
              v-model="form.business_code"
              name="business_code"
              label="工商统一社会信用代码"
              placeholder="请输入工商统一社会信用代码"
              :rules="[{ required: false, message: '请输入工商统一社会信用代码' }]"
            />
            <van-field
              v-model="form.business_address"
              name="business_address"
              label="工商注册地址"
              placeholder="请输入工商注册地址"
              type="textarea"
              autosize
              :rules="[{ required: false, message: '请输入工商注册地址' }]"
            />
            <van-field
              v-model="form.first_inventor"
              name="first_inventor"
              label="第一发明人"
              placeholder="请输入第一发明人"
              :rules="[{ required: false, message: '请输入第一发明人' }]"
            />
            <van-field
              v-model="form.shared_value"
              name="shared_value"
              label="合享价值度"
              placeholder="请输入合享价值度"
              type="textarea"
              autosize
              :rules="[{ required: false, message: '请输入合享价值度' }]"
            />
            <van-field
              v-model="form.techol_stable"
              name="techol_stable"
              label="技术稳定性"
              placeholder="请输入技术稳定性"
              type="textarea"
              autosize
              :rules="[{ required: false, message: '请输入技术稳定性' }]"
            />
            <van-field
              v-model="form.techol_advanced"
              name="techol_advanced"
              label="技术先进性"
              placeholder="请输入技术先进性"
              type="textarea"
              autosize
              :rules="[{ required: false, message: '请输入技术先进性' }]"
            />
            <van-field
              v-model="form.pct_apply"
              name="pct_apply"
              label="PCT国际申请号"
              placeholder="请输入PCT国际申请号"
              :rules="[{ required: false, message: '请输入PCT国际申请号' }]"
            />
            <van-field
              v-model="form.pct_publish"
              name="pct_publish"
              label="PCT国际公布号"
              placeholder="请输入PCT国际公布号"
              :rules="[{ required: false, message: '请输入PCT国际公布号' }]"
            />
            <!-- 选择日期公用弹框 -->
            <van-calendar v-model="calendarShow" @confirm="calendarCon" :min-date="minDate" :max-date="maxDate" />
            <van-col span="24" class="inventor">
              <van-col span="24" class="txt">专利关联用户</van-col>
              <van-col span="24" class="btn">
                <van-button type="info" size="small" @click.prevent="toSelect('user_id')">选择用户</van-button>
              </van-col>
              <van-col span="24" class="list">
                <van-col span="12" class="list_1" v-for="(item, index) in form.user_id" :key="index">
                  <p class="textOver">{{ index + 1 }}-{{ item.name }}</p>
                  <van-button type="danger" size="mini" @click.prevent="delInv(item, 'user_id')">删除</van-button>
                </van-col>
              </van-col>
            </van-col>
            <van-col span="24" class="btn">
              <van-button type="info" size="small" native-type="submit">提交信息</van-button>
            </van-col>
          </van-form>
        </van-col>
      </van-col>
    </van-row>
    <van-dialog class="dialog" v-model="dialog.show" :title="dialog.title" :show-confirm-button="false" show-cancel-button cancel-button-text="返回">
      <van-col span="24" class="one">
        <van-col span="24" class="one_1">
          <van-search v-model="searchName" show-action placeholder="请输入联系电话" @search="searchUser">
            <template #action>
              <div @click="searchUser">搜索</div>
            </template>
          </van-search>
        </van-col>
        <van-col span="24" class="one_2">
          <van-col span="24" class="list" v-for="(item, index) in list" :key="index">
            <van-col span="24" class="name"> {{ item.name }} </van-col>
            <van-col span="24" class="other">
              <van-col span="24" class="otherInfo">
                联系电话:<span>{{ item.phone }}</span>
              </van-col>
            </van-col>
            <van-col span="24" class="btn">
              <van-button type="info" size="mini" @click.prevent="conFirm(item)">确认选择</van-button>
            </van-col>
          </van-col>
          <van-col span="24" class="page">
            <page @search="searchUser" :limit="limit" :total="total"></page>
          </van-col>
        </van-col>
      </van-col>
    </van-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: upload } = createNamespacedHelpers('upload');
const { mapActions: personal } = createNamespacedHelpers('personal');
var moment = require('moment');
export default {
  name: 'form-1',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function () {
    return {
      minDate: new Date(2000, 10, 1),
      maxDate: new Date(2050, 10, 1),
      calendarShow: false,
      calendar_type: '',
      // 关联用户
      type: '',
      searchName: '',
      list: [],
      limit: 3,
      total: 0,
      dialog: { show: false, titla: '查询用户' },
    };
  },
  async created() {
    await this.searchUser();
  },
  methods: {
    ...personal({ personalQuery: 'query' }),
    ...upload(['upload']),
    onSubmit(value) {
      if (value) this.$emit('onSubmit', { data: this.form });
    },
    // 打开选择日期弹框
    selectDate(type) {
      this.$set(this, `calendar_type`, type);
      this.calendarShow = true;
    },
    // 选中日期
    calendarCon(date) {
      this.$set(this.form, this.calendar_type, moment(date).format('YYYY-MM-DD'));
      this.calendarShow = 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);
    },
    // 关联用户
    toSelect(type) {
      this.$set(this, `type`, type);
      this.dialog = { show: true, titla: '查询用户' };
    },
    // 确认选择用户
    conFirm(data) {
      let user = { user_id: data.id, name: data.name };
      if (this.type == 'user_id') this.form[this.type].push(user);
      this.dialog = { show: false, title: '查询用户' };
    },
    // 删除关联用户
    delInv(data, type) {
      this.form[type].splice(this.form[type].indexOf(data), 1);
    },
    // 查询用户
    async searchUser({ skip = 0, limit = this.limit, ...info } = {}) {
      if (this.searchName) info.phone = this.searchName;
      let res = await this.personalQuery({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .btn {
      text-align: center;
      margin: 10px 0;
    }
    .inventor {
      background-color: #ffffff;
      .txt {
        padding: 5px 0px 0 15px;
        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>
