<template>
  <div class="infomation">
    <!-- 申请人信息 -->
    <div class="info-title">
      <i class="selftmreg_shuxian"></i>
      <h4>填写申请人信息</h4>
    </div>
    <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-input v-model="ruleForm.name" 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="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="请输入您的身份证号"></el-input>
          </el-form-item>
          <el-form-item label="注册地址：" prop="name">
            <el-input v-model="ruleForm.idCard" 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>
    <!-- 订单联系人 -->
    <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>
        <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>
        <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>

      <!-- 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>
  </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";
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" }]
      },
      // 订单联系人表格信息 及验证
      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) {
      console.log(123123);
      this.toViewImgType = true;
      switch (index) {
        case 1:
          this.toViewImgSrc = imgUrl1;
          break;
        case 2:
          this.toViewImgSrc = imgUrl2;
          break;
        case 3:
          this.toViewImgSrc = imgUrl3;
          break;
      }
    }
  }
};
</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%;
  .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%;
  .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%;
  }
}
.drawer-bottom {
  width: 100%;
  padding: 10px 20px 20px;
  position: absolute;
  bottom: 0px;
  left: 0;
  border-top: 1px solid #dee0eb;
  button {
    padding: 6px 28px;
    border-radius: 100px;
    border: none;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    margin-right: 10px;
  }
  .esc {
    background: #e7eaf3;
    color: #777777;
  }
  .enter {
    background: #3071fe;
    color: #ffffff;
  }
}
.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>
