<!-- 第二步：填写申请人信息 -->
<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">
            <!-- 1 -->
          </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">
          <div class="from-item-title"><span>*</span>上传材料：身份证明</div>
          <div class="upload-box">
            <img src="@/assets/imgs/sbzc/sfz.png" alt />
          </div>
          <div class="upload-box-next">
            <img src="@/assets/imgs/sbzc/sfz.png" alt />
            <div class="chakan" @click="lookImage(1)">查看大图</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">
            <!-- 2 -->
          </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">
            <!-- 3 -->
          </div>
          <div class="upload-box-next">
            <img src="@/assets/imgs/sbzc/yxq.png" alt />
            <div class="chakan" @click="lookImage(3)">查看大图</div>
          </div>
        </div>
      </div>
    </div>
  </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 { getCompanyInfoByLikeName } from "@/api/tmTools.js";
export default {
  data() {
    return {
      // 申请人信息表格 及 验证
      aruleForm: {
        name: "中",
        resource: 1,
        xinyongma: "",
        address: "",
        postal: "",
        username: "",
        idCard: "",
        zhuAddress: "",
        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: ""
    };
  },
  methods: {
    // 资料上传
    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;
      }
    },

    // 申请人模糊查询
    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;
    },
    addMessage() {
      console.log(this.ruleForm);
    }
  },
  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;
    });
  }
};
</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;
  }
  .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>
