<!-- 第二步：填写申请人信息 -->
<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"
            @change="handleUsersChooseClick"
          >
            <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">
            <!-- @blur.native="handleInputCompanyNameBlur" -->
            <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">
            <!--  @blur="handleInputCreditCodeBlur" -->
            <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">
            <!--   @blur="handleInputLicenseAddressBlur" -->
            <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"
              @blur="handleInputPostalCodeBlur"
            ></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="请输入您的姓名"
              @blur="handleInputUserNameBlur"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号：" prop="uid">
            <el-input
              v-model="aruleForm.uid"
              placeholder="请输入您的身份证号"
              :maxlength="18"
              @blur="handleInputIdCardBlur"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证住址：" prop="uaddress">
            <el-input
              v-model="aruleForm.uaddress"
              placeholder="请输入身份证住址"
              @blur="handleInputIdAddressBlur"
            ></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码：" prop="xinyongma">
            <el-input
              v-model="aruleForm.xinyongma"
              placeholder="请输入统一社会信用代码"
              @blur="handleInputUCreditCodeBlur"
            ></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"
              @blur="handleInputUPostalCodeBlur"
            ></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="请输入联系人"
            @blur="handleInputCustomerBlur"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="phone">
          <el-input
            v-model="ruleForm.phone"
            placeholder="请输入联系电话"
            @blur="handleInputTelnumBlur"
          ></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱：" prop="email">
          <el-input
            v-model="ruleForm.email"
            placeholder="请输入电子邮箱"
            @blur="handleInputEmailBlur"
          ></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);
    },

    //申请人类型 参数传递
    handleUsersChooseClick() {
      this.$bus.emit("on-userschoose-click", this.aruleForm.resource);
    },
    // 企业申请人 参数传递
    handleInputCompanyNameBlur() {
      this.$bus.emit("on-input-companyname-blur", this.aruleForm.name);
    },
    handleInputCreditCodeBlur() {
      this.$bus.emit("on-input-creditcode-blur", this.aruleForm.xinyongma);
    },
    handleInputLicenseAddressBlur() {
      this.$bus.emit("on-input-licenseaddress-blur", this.aruleForm.address);
    },
    handleInputPostalCodeBlur() {
      this.$bus.emit("on-input-postalcode-blur", this.aruleForm.postal);
    },
    // 个体户申请人 参数传递
    handleInputUserNameBlur() {
      this.$bus.emit("on-input-username-blur", this.aruleForm.uname);
    },
    handleInputIdCardBlur() {
      this.$bus.emit("on-input-idcard-blur", this.aruleForm.uid);
    },
    handleInputIdAddressBlur() {
      this.$bus.emit("on-input-idaddress-blur", this.aruleForm.uaddress);
    },
    handleInputUCreditCodeBlur() {
      this.$bus.emit("on-input-ucreditcode-blur", this.aruleForm.xinyongma);
    },
    handleInputUPostalCodeBlur() {
      this.$bus.emit("on-input-upostalcode-blur", this.aruleForm.postal);
    },

    // 客户联系人 参数传递
    handleInputCustomerBlur() {
      this.$bus.emit("on-input-customer-blur", this.ruleForm.contanct);
    },

    // 联系电话 参数传递
    handleInputTelnumBlur() {
      this.$bus.emit("on-input-telnum-blur", this.ruleForm.phone);
    },

    // 电子邮箱 参数传递
    handleInputEmailBlur() {
      this.$bus.emit("on-input-email-blur", this.ruleForm.email);
    }
  },
  updated() {
    this.$nextTick(() => {
      //
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype = this.aruleForm.resource;
      console.log(
        this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype
      );
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.companyName = this.aruleForm.name;
      console.log(
        this.$parent.$parent.confirmStepsParams.stepTwoNineParams.companyName
      );
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.creditCode = this.aruleForm.xinyongma;
      console.log(
        this.$parent.$parent.confirmStepsParams.stepTwoNineParams.creditCode
      );
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.licenseAddress = this.aruleForm.address;
      console.log(
        this.$parent.$parent.confirmStepsParams.stepTwoNineParams.licenseAddress
      );
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.postalCode = this.aruleForm.postal;
      console.log(
        this.$parent.$parent.confirmStepsParams.stepTwoNineParams.postalCode
      );
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.username = this.aruleForm.uname;
      console.log(
        this.$parent.$parent.confirmStepsParams.stepTwoNineParams.username
      );
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.idCard = this.aruleForm.uid;
      console.log(
        this.$parent.$parent.confirmStepsParams.stepTwoNineParams.idCard
      );
      this.$parent.$parent.confirmStepsParams.stepTwoNineParams.idAddress = this.aruleForm.uaddress;
      console.log(
        this.$parent.$parent.confirmStepsParams.stepTwoNineParams.idAddress
      );
      //    this.$parent.$parent.confirmStepsParams.stepTwoNineParams.ucreditCode = this.aruleForm.xinyongma;
      // console.log(
      //   this.$parent.$parent.confirmStepsParams.stepTwoNineParams.ucreditCode
      // );
      //   this.$parent.$parent.confirmStepsParams.stepTwoNineParams.upostalCode = this.aruleForm.postal;
      // console.log(
      //   this.$parent.$parent.confirmStepsParams.stepTwoNineParams.upostalCode
      // );
    });
  }
};
</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>
