<template>
  <div class="applicantInfo">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
      label-position="left"
    >
      <el-form-item label="申请人类型：" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio :label="1" border>企业</el-radio>
          <el-radio :label="2" border>个体户</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="ruleForm.resource == 1">
        <el-form-item label="公司名称：" prop="name">
          <el-autocomplete
            v-model="ruleForm.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="ruleForm.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="ruleForm.address"
            placeholder="请输入执照详细地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮政编码：" prop="postal">
          <el-input
            v-model="ruleForm.postal"
            placeholder="请输入邮政编码"
            :maxlength="6"
          ></el-input>
        </el-form-item>
      </div>
      <div v-if="ruleForm.resource == 2">
        <el-form-item label="姓名：" prop="name">
          <el-input
            v-model="ruleForm.username"
            placeholder="请输入您的姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号：" prop="name">
          <el-input
            v-model="ruleForm.idCard"
            placeholder="请输入您的身份证号"
            :maxlength="18"
          ></el-input>
        </el-form-item>
        <el-form-item label="注册地址：" prop="name">
          <el-input
            v-model="ruleForm.zhuAddress"
            placeholder="请输入注册地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码：" prop="xinyongma">
          <el-input
            v-model="ruleForm.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="ruleForm.postal"
            placeholder="请输入邮政编码"
            :maxlength="6"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
    <!-- 底部按钮 -->
    <div class="drawer-bottom">
      <button class="esc">取消</button>
      <button class="enter" @click="addMessage">保存</button>
    </div>
  </div>
</template>
<script>
import { getCompanyInfoByLikeName } from "@/api/tmTools.js";
export default {
  data() {
    return {
      ruleForm: {
        name: "中",
        resource: 1,
        xinyongma: "",
        address: "",
        postal: "",
        username: "",
        idCard: "",
        zhuAddress: ""
      },
      rules: {
        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" }]
      }
    };
  },
  mounted() {},
  methods: {
    querySearchAsync(queryString, cb) {
      //企业近似查询
      getCompanyInfoByLikeName(this.ruleForm.name).then(res => {
        res.data.map(item => {
          item.value = item.domainEntName;
        });
        cb(res.data);
      });
    },
    handleSelect(item) {
      this.ruleForm.xinyongma = item.creditCode;
      this.ruleForm.address = item.regLocation;
    },
    addMessage() {
      console.log(this.ruleForm);
    }
  }
};
</script>
<style lang="scss">
//
.applicantInfo {
  width: 100%;
  .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;
    }
  }
}
</style>
