<!-- 第二步：填写申请人信息 -->
<template>
  <div class="infomation">
    <!-- 标题： 申请人信息 -->
    <div class="info-title">
      <i class="selftmreg_shuxian"></i>
      <h4>填写申请人信息</h4>
    </div>

    <!-- 申请人信息 -->
    <div class="applicantInfo">
      <el-form
        :model="aruleForm"
        :rules="arules"
        ref="aruleForm"
        label-width="150px"
        class="application-ruleForm"
        label-position="left"
      >
        <el-form-item label="申请人类型：" prop="resource">
          <el-radio-group v-model="aruleForm.resource">
            <el-radio :label="1" border>企业</el-radio>
            <el-radio :label="2" border>个体户</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="aruleForm.resource == 1">
          <el-form-item label="公司名称：" prop="name">
            <el-autocomplete
              v-model="aruleForm.name"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入公司名称"
              @select="handleSelect"
              :trigger-on-focus="false"
              clearable
              :debounce="700"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="统一社会信用代码：" prop="xinyongma">
            <el-input
              v-model="aruleForm.xinyongma"
              placeholder="请输入统一社会信用代码"
            ></el-input>
            <el-popover
              placement="right-end"
              width="170"
              trigger="hover"
              content="由于官方商标注册增加“统一社会信用代码”的填写，企业申请必填，个体工商户申请可不填此项，请仔细核对营业执照填写。"
            >
              <el-button class="el-icon-question" slot="reference"></el-button>
            </el-popover>
          </el-form-item>
          <el-form-item label="执照详细地址：" prop="address">
            <el-input
              v-model="aruleForm.address"
              placeholder="请输入执照详细地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮政编码：" prop="postal">
            <el-input
              v-model="aruleForm.postal"
              placeholder="请输入邮政编码"
              :maxlength="6"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="aruleForm.resource == 2">
          <el-form-item label="姓名：" prop="uname">
            <el-input
              v-model="aruleForm.uname"
              placeholder="请输入您的姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="uid">
            <el-input
              v-model="aruleForm.uid"
              placeholder="请输入您的身份证号"
              :maxlength="18"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证住址：" prop="uaddress">
            <el-input
              v-model="aruleForm.uaddress"
              placeholder="请输入身份证住址"
            ></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码：" prop="xinyongma">
            <el-input
              v-model="aruleForm.xinyongma"
              placeholder="请输入统一社会信用代码"
            ></el-input>
            <el-popover
              placement="right-end"
              width="170"
              trigger="hover"
              content="由于官方商标注册增加“统一社会信用代码”的填写，企业申请必填，个体工商户申请可不填此项，请仔细核对营业执照填写。"
            >
              <el-button class="el-icon-question" slot="reference"></el-button>
            </el-popover>
          </el-form-item>
          <el-form-item label="邮政编码：" prop="postal">
            <el-input
              v-model="aruleForm.postal"
              placeholder="请输入邮政编码"
              :maxlength="6"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 订单联系人 -->
    <div class="info-title">
      <i class="selftmreg_shuxian"></i>
      <h4>订单联系人</h4>
    </div>
    <div class="orderContact">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="110px"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item label="客户联系人：" prop="contanct">
          <el-input
            v-model="ruleForm.contanct"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="phone">
          <el-input
            v-model="ruleForm.phone"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱：" prop="email">
          <el-input
            v-model="ruleForm.email"
            placeholder="请输入电子邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="座机：">
          <el-input
            v-model="ruleForm.tel"
            placeholder="区号座机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="传真：">
          <el-input
            v-model="ruleForm.faxNumber"
            placeholder="请输入传真号"
            :maxlength="6"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 资料上传 -->
    <div class="info-title">
      <i class="selftmreg_shuxian"></i>
      <h4>
        资料上传
        <span>（可跳过进行下一步，支付完成后，在订单中上传即可）</span>
      </h4>
    </div>
    <div class="jdindentlist-drawerDetail">
      <div class="from-main">
        <!-- 上传营业执照 -->
        <div class="from-items">
          <div class="from-item-title"><span>*</span>上传材料：营业执照</div>
          <div class="upload-box" v-loading="loading1">
            <img v-if="imgUrl1" :src="imgUrl1" alt="" />
            <div v-else class="imgs">
              <i class="el-icon-plus"></i>
              <span>(需盖公章)</span>
            </div>
            <!-- 1 上传营业执照 -->
            <UploadImg
              :action="action"
              :data="dataone"
              ref="upImg"
              flag="picUrl"
              :num="1"
              @getsuccess="getImgUrl"
            />
          </div>
          <div class="upload-box-next">
            <img src="@/assets/imgs/sbzc/yyzz1.png" alt />
            <div class="chakan" @click="lookImage(1)">查看大图</div>
          </div>

          <div class="text">
            <i class="el-icon-warning"></i>
            材料要求盖章/签字清晰完整，建议盖章/签字在文件中间空白处不压字<br />格式为<span>PDF</span>或<span>JPG</span>，大小不能超过<span
              >10M</span
            ><br /><span
              >商标局声明：自2018年1月1日起，国内申请人办理商标注册、异议、变更、转让、续展等商标事宜，应当使用标注统一社会信用代码身份证明文件，未使用则不予受理</span
            >。
          </div>
        </div>
        <!-- 如果是个体户，上传身份证明 -->
        <div
          class="from-items"
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 2
          "
        >
          <div class="from-item-title"><span>*</span>上传材料：身份证明</div>
          <div class="upload-box" v-loading="loading4">
            <img v-if="imgUrl4" :src="imgUrl4" alt="" />
            <div v-else class="imgs">
              <i class="el-icon-plus"></i>
              <span>(需盖公章)</span>
            </div>
            <!-- 2 身份证 -->
            <UploadImg
              :action="action"
              :data="datatwo"
              ref="upImg"
              flag="picUrl"
              :num="4"
              @getsuccess="getImgUrl"
            />
          </div>
          <div class="upload-box-next">
            <img src="@/assets/imgs/sbzc/sfz.png" alt />
            <div class="chakan" @click="lookImage(4)">查看大图</div>
          </div>

          <div class="text">
            <i class="el-icon-warning"></i>
            格式为<span>PDF</span>或<span>JPG</span>，大小不能超过<span
              >10M</span
            >
          </div>
        </div>
        <!-- 上传代理委托书 -->
        <div class="from-items">
          <div class="from-item-title">
            <p><span>*</span>上传材料：代理委托书</p>
            <a
              href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/igirl_channel_tmwtsdemo001.doc"
              >下载委托书模板</a
            >
          </div>
          <div class="upload-box" v-loading="loading2">
            <img v-if="imgUrl2" :src="imgUrl2" alt="" />
            <div v-else class="imgs">
              <i class="el-icon-plus"></i>
              <span>(需盖公章)</span>
            </div>
            <!-- 2 -->
            <UploadImg
              :action="action"
              :data="datatwo"
              ref="upImg"
              flag="picUrl"
              :num="2"
              @getsuccess="getImgUrl"
            />
          </div>
          <div class="upload-box-next">
            <img src="@/assets/imgs/sbzc/wts1.png" alt />
            <div class="chakan" @click="lookImage(2)">查看大图</div>
          </div>

          <div class="text">
            <i class="el-icon-warning"></i>
            材料要求盖章/签字清晰完整，建议盖章/签字在文件中间空白处不压字<br />请上传由申请人盖章或签字的中文代理委托书彩色扫描件，格式为<span>JPG</span>宽高的大小为<br /><span
              >4000px~600px</span
            >，<span>300dpi</span>分辨率，大小不能超过<span>10M</span>。
          </div>
        </div>
        <!-- 上传优先权证明 -->
        <div class="from-items">
          <div class="from-item-title">
            <p>上传材料：优先权证明</p>
            <a
              href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/yzq_201908281849646526xujnsedjnqwdoni.doc"
              >下载优先权证明</a
            >
          </div>
          <div class="upload-box" v-loading="loading3">
            <img v-if="imgUrl3" :src="imgUrl3" alt="" />
            <div v-else class="imgs">
              <i class="el-icon-plus"></i>
              <span>(需盖公章)</span>
            </div>
            <!-- 3 -->
            <UploadImg
              :action="action"
              :data="datathree"
              ref="upImg"
              flag="picUrl"
              :num="3"
              @getsuccess="getImgUrl"
            />
          </div>
          <div class="upload-box-next">
            <img src="@/assets/imgs/sbzc/yxq.png" alt />
            <div class="chakan" @click="lookImage(3)">查看大图</div>
          </div>
          <div class="text">
            <i class="el-icon-warning"></i>
            （非必填）如果申请人在提交申请前6个月内在政府主办的国内或国际的展会进行使用的，<br />请上传由申请人盖章或签字的中文代理委托书彩色扫描件，格式为宽高的大小为<br />
            可以提交使用证明，则商标局实质审查时，按使用日开始审查。
          </div>
        </div>
      </div>
    </div>
    <!-- dialog -->
    <el-dialog
      style="z-index:99999;background:rgba(0,0,0,.3)"
      title=""
      :visible.sync="toViewImgType"
      center
      width="72%"
      append-to-body
    >
      <img
        :src="toViewImgSrc"
        style="max-width:100%;display:block;margin: 0 auto;"
        alt=""
      />
    </el-dialog>
  </div>
</template>
<script>
// 导入资料上传的查看大图的图片
import imgUrl1 from "@/assets/imgs/sbzc/yyzzD.png";
import imgUrl2 from "@/assets/imgs/sbzc/wtsD.png";
import imgUrl3 from "@/assets/imgs/sbzc/yxqD.png";
import imgUrl4 from "@/assets/imgs/sbzc/sfzD.png";
// 导入公司模糊查询 和 上传材料部分的的上传
import {
  getCompanyInfoByLikeName,
  getOss,
  uploadStandardTm,
  pic2pdf
} from "@/api/tmTools.js";
//
import UploadImg from "@/components/uploadImg";
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      // 申请人信息表格 及 验证
      aruleForm: {
        // 申请人类型：企业 个体户
        resource: 1,

        // 企业
        // 公司名称
        name: "中",
        // 执照详细地址
        address: "",

        // 邮政编码（企业和个体户）
        postal: "",
        //  统一社会信用代码（企业和个体户）
        xinyongma: "",

        // 个体户
        // 姓名
        uname: "",
        // 身份证号
        uid: "",
        // 身份证住址
        uaddress: ""
      },
      arules: {
        resource: [
          { required: true, message: "请选择申请人类型", trigger: "change" }
        ],
        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        xinyongma: [
          { required: true, message: "请输入统一社会信用代码", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入执照详细地址", trigger: "blur" }
        ],
        postal: [
          { required: true, message: "请输入邮政编码", trigger: "blur" }
        ],
        uname: [
          { required: true, message: "请输入身份证姓名", trigger: "blur" }
        ],
        uid: [{ required: true, message: "请输入身份证号码", trigger: "blur" }],
        uaddress: [
          { required: true, message: "请输入身份证住址", trigger: "blur" }
        ]
      },
      // 订单联系人表格信息 及验证
      ruleForm: {
        contanct: "",
        phone: "",
        email: "",
        tel: "",
        faxNumber: ""
      },
      rules: {
        contanct: [
          { required: true, message: "请输入联系人", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入统一社会信用代码", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      },

      // 资料上传
      chakanKey: null,
      toViewImgType: false,
      toViewImgSrc: "",
      action: "",
      dataone: {},
      datatwo: {},
      datathree: {},
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      imgUrl: "",
      imgUrl1: "",
      imgUrl2: "",
      imgUrl3: "",
      imgUrl4: ""
    };
  },
  mounted() {
    //
    this.getOss();
  },
  methods: {
    // 资料上传
    getImgUrl(msg, num) {
      this.imgUrl = msg;
      if (num == 1) {
        this.loading1 = true;
        this.imgUrl1 = msg;
      }
      if (num == 2) {
        this.loading2 = true;
        this.imgUrl2 = msg;
      }
      if (num == 3) {
        this.loading3 = true;
        this.imgUrl3 = msg;
      }
      // 身份证
      if (num == 4) {
        this.loading4 = true;
        this.imgUrl4 = msg;
      }
      uploadStandardTm(this.imgUrl).then(res => {
        if (res.status == 0) {
          //图片转pdf
          pic2pdf(res.data.url).then(re => {
            this.loading1 = false;
            this.loading2 = false;
            this.loading3 = false;
            this.loading4 = false;
            if (re.status == 0) {
              this.$message({
                type: "success",
                message: "上传成功"
              });
            } else {
              this.$message.error("上传失败，请重新上传！");
            }
          });
        } else {
          this.$message.error("上传失败，请重新上传！");
        }
        //上传后重新获取偶oss
        this.getOss();
      });
    },
    getOss() {
      getOss().then(re => {
        this.dataone = re.data;
        this.datatwo = re.data;
        this.datathree = re.data;
        this.dataone.key = this.setKey();
        this.datatwo.key = this.setKey();
        this.datathree.key = this.setKey();
        this.action = re.data.url;
      });
    },
    setKey(name, flag) {
      var myDate = new Date();
      var key =
        "zc_" +
        flag +
        Math.round(Math.random() * 10000) +
        myDate.getTime() +
        myDate.getFullYear() +
        myDate.getMonth() +
        myDate.getDate() +
        ".jpg";
      return key;
    },
    //
    enter(index) {
      this.chakanKey = index;
    },
    lookImage(index) {
      this.toViewImgType = true;
      switch (index) {
        case 1:
          this.toViewImgSrc = imgUrl1;
          break;
        case 2:
          this.toViewImgSrc = imgUrl2;
          break;
        case 3:
          this.toViewImgSrc = imgUrl3;
          break;
        case 4:
          this.toViewImgSrc = imgUrl4;
          break;
      }
    },

    // 申请人模糊查询
    querySearchAsync(queryString, cb) {
      //企业近似查询
      getCompanyInfoByLikeName(this.aruleForm.name).then(res => {
        res.data.map(item => {
          item.value = item.domainEntName;
        });
        cb(res.data);
      });
    },
    // 统一社会信用代码  和 执照详细地址 的自动装填
    handleSelect(item) {
      this.aruleForm.xinyongma = item.creditCode;
      this.aruleForm.address = item.regLocation;
    }
  },

  // 获取并修改父组件里面的第二步填写申请人信息的参数，以供在第三步确认订单里面进行使用和更新
  updated() {
    this.$nextTick(() => {
      // 申请人类别
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype = this.aruleForm.resource;
      // 企业
      //  公司名称
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.companyName = this.aruleForm.name;
      //  统一社会信用代码
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.creditCode = this.aruleForm.xinyongma;
      //  执照详细地址
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.licenseAddress = this.aruleForm.address;
      //  邮政编码
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.postalCode = this.aruleForm.postal;
      // 个体户
      // 姓名
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.username = this.aruleForm.uname;
      // 身份证号
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.idCard = this.aruleForm.uid;
      // 身份证住址
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.idAddress = this.aruleForm.uaddress;
      // 统一社会信用代码
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.ucreditCode = this.aruleForm.xinyongma;
      // 邮政编码
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.upostalCode = this.aruleForm.postal;

      // 联系人
      // 客户联系人
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.customer = this.ruleForm.contanct;
      // 联系电话
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.telNum = this.ruleForm.phone;
      // 电子邮箱
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.email = this.ruleForm.email;

      // 资料上传
      // 企业： 营业执照 代理委托书 优先权证明
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.company[0].Icon = this.imgUrl1;
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.company[1].Icon = this.imgUrl2;
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.company[2].Icon = this.imgUrl3;
      // 个体户： 营业执照 代理委托书 优先权证明 身份证明
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.user[0].Icon = this.imgUrl1;
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.user[1].Icon = this.imgUrl4;
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.user[2].Icon = this.imgUrl2;
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.user[3].Icon = this.imgUrl3;
    });
  }
};
</script>
<style lang="scss">
.info-title {
  .selftmreg_shuxian {
    width: 3px;
    height: 15px;
    background-color: #0989c5;
    display: inherit;
    float: left;
    margin-top: 4px;
    margin-right: 10px;
  }
  h4 {
    font-size: 16px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
    margin-bottom: 15px;
    span {
      margin-left: 35px;
      font-size: 14px;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(99, 101, 105, 1);
    }
  }
}
/* 申请人信息 */
.applicantInfo {
  width: 100%;

  .application-ruleForm {
    padding-left: 30px;
  }

  .el-radio {
    height: auto;
    padding: 7px 28px;
    border-radius: 0px;
    border: 1px solid #dee0eb;
    .el-radio__label {
      padding: 0;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #333333;
    }
  }
  .el-radio__input {
    display: none;
  }
  .el-form-item {
    .el-button {
      border: none;
      width: 12px;
      height: 12px;
      border-radius: 100%;
      font-size: 12px;
      padding: 0;
      color: #3071fe;
      line-height: 10px;
      text-align: left;
      margin-left: 10px;
    }
  }
  .el-input {
    width: 350px;
    height: 40px;
    input {
      width: 350px;
      height: 40px;
      border-radius: 0px;
    }
  }
}

/* 订单联系人 */
.orderContact {
  width: 100%;

  .demo-ruleForm {
    padding-left: 30px;
  }

  .el-radio {
    height: auto;
    padding: 7px 28px;
    border-radius: 0px;
    border: 1px solid #dee0eb;
    .el-radio__label {
      padding: 0;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #333333;
    }
  }
  .el-radio__input {
    display: none;
  }
  .el-form-item {
    .el-button {
      border: none;
      width: 12px;
      height: 12px;
      border-radius: 100%;
      font-size: 12px;
      padding: 0;
      color: #3071fe;
      line-height: 10px;
      text-align: left;
      margin-left: 10px;
    }
  }
  .el-input {
    width: 350px;
    height: 40px;
    input {
      width: 350px;
      height: 40px;
      border-radius: 0px;
    }
  }
}

/* 资料上传 */
.jdindentlist-drawerDetail {
  .from-main {
    width: 100%;
    margin-left: 30px;

    // 资料上传的文本说明
    .text {
      margin-top: 25px;
      padding-left: 60px;
      text-align: left;
      width: 542px;
      line-height: 24px;
      font-size: 12px;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      position: relative;
      i.el-icon-warning {
        position: absolute;
        left: 35px;
        top: 5px;
      }
      span {
        color: #0f8ee9;
      }
    }
  }
}

.from-items {
  width: 100%;
  height: 120px;
  display: flex;
  margin-top: 20px;
  .from-item-title {
    width: 160px;
    font-size: 14px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(99, 101, 105, 1);
    span {
      color: #f00;
    }
    a {
      color: #0f8ee9;
      font-size: 13px;
      cursor: pointer;
      line-height: 0px;
      border-bottom: 1px solid #0f8ee9;
      height: 5px;
      margin-left: 50px;
    }
  }
  .upload-box {
    width: 98px;
    height: 100%;
    cursor: pointer;
    position: relative;
    border: 3px dashed #ccc;
    margin-left: 20px;
    img {
      width: 100%;
      height: 100%;
    }
    .imgs {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i {
        font-size: 30px;
        color: #b8b8b8;
      }
      span {
        color: #0f8ee9;
        font-size: 12px;
        margin-top: 20px;
      }
    }
  }
  .upload-box-next {
    width: 98px;
    height: 100%;
    cursor: pointer;
    position: relative;
    border: 3px dashed #ccc;
    margin-left: 20px;
    img {
      width: 100%;
      height: 100%;
    }
    .chakan {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      color: #fff;
    }
  }
  .upload-box-next:hover > .chakan {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
