<template>
  <!-- 提交信息 -->
  <HeaderNav headerText="提交信息"></HeaderNav>
  <div class="commit-message">
    <div class="message-name">
      <div class="name-left">
        <div class="left-text pf500 fs14 fc333333">法定名</div>
        <div class="left-input">
          <input type="text" class="input pf400 fs14 fc333333" placeholder="名" />
        </div>
      </div>
      <div class="name-right">
        <div class="left-text pf500 fs14 fc333333">法定姓</div>
        <div class="left-input">
          <input type="text" class="input pf400 fs14 fc333333" placeholder="姓" />
        </div>
      </div>
    </div>
    <div class="card-type">
      <div class="card-text pf500 fs14 fc333333">证件类型</div>
      <div class="type-select pf400 fs14 fc333333">
        身份证
        <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
      </div>
    </div>
    <div class="card-number">
      <div class="card-text pf500 fs14 fc333333">证件号码</div>
      <div class="number-input">
        <input
          type="text"
          class="input pf400 fs14 fc333333"
          placeholder="请输入证件号码" />
      </div>
    </div>
    <div class="card-type">
      <div class="card-text pf500 fs14 fc333333">所在地区</div>
      <div class="type-select pf400 fs14 fc333333">
        请选择
        <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
      </div>
    </div>
    <div class="address">
      <div class="pf500 fs14 fc333333">详细地址</div>
      <textarea
        name=""
        id=""
        class="address-textarea pf400 fs14 fc333333"
        placeholder="请输入"></textarea>
    </div>
    <div class="upload-card">
      <div class="upload-title pf600 fs18 fc121212">上传证件照</div>
      <div class="upload-desc pf400 fs14 fc999999">确保证件照清晰可见</div>
      <div class="card-front">
        <div class="desc1 pf400 fs12 fc999999">确保证件照清晰可见</div>
        <div class="desc2 pf500 fs20 fc333333">身份证人像面</div>
        <div class="btn pf600 fs14 fcFFFFFF">
          上传
          <img src="../../../assets/icon/index/upload.svg" alt="" />
        </div>
      </div>
      <div class="card-back">
        <div class="desc1 pf400 fs12 fc999999">确保证件照清晰可见</div>
        <div class="desc2 pf500 fs20 fc333333">身份证国徽面</div>
        <div class="btn pf600 fs14 fcFFFFFF">
          上传
          <img src="../../../assets/icon/index/upload.svg" alt="" />
        </div>
      </div>
    </div>
    <div class="upload-remarks pf500 fs12 fc999999">
      支持小于8M的JPG、JPGE或PNG格式的图片 <br />
      上传您身份证件的完整照片，<br />
      请确保上传图片中的所有细节都清晰可见 <br />
      请确保证件为原件并在有效期内 <br />
      请将证件置于纯色背景下 <br />
    </div>
    <div class="submit pf600 fs14 fcFFFFFF" @click="submit">提交</div>
  </div>
</template>
<script setup>
  import HeaderNav from "../components/HeaderNav.vue";
  import { useRoute, useRouter } from "vue-router";

  const router = useRouter();

  const submit = () => {
    router.push("/contractTerms");
  };
</script>
<style lang="less" scoped>
  .commit-message {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
    width: 100%;

    .message-name {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 10px;
      width: 345px;

      .name-left,
      .name-right {
        width: 165px;

        .left-text {
          height: 18px;
          line-height: 18px;
        }

        .left-input {
          margin-top: 5px;
          width: 165px;
          height: 45px;

          .input {
            padding-left: 11px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-radius: 6px;
            border: none;
            outline: none;
            background: #f5f5f5;
          }
        }
      }
    }

    .card-type {
      margin-top: 20px;
      width: 345px;

      .type-select {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
        padding: 0 11px;
        width: 345px;
        height: 45px;
        border-radius: 6px;
        background: #f5f5f5;
        box-sizing: border-box;

        img {
          width: 12px;
          height: 8px;
        }
      }
    }

    .card-number {
      margin-top: 10px;
      width: 345px;

      .number-input {
        margin-top: -10px;
        width: 345px;
        height: 45px;

        .input {
          padding-left: 11px;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border-radius: 6px;
          border: none;
          outline: none;
          background: #f5f5f5;
        }
      }
    }

    .address {
      margin-top: 10px;
      width: 345px;

      .address-textarea {
        padding-top: 13px;
        padding-left: 11px;
        margin-top: 5px;
        width: 345px;
        height: 90px;
        background: #f5f5f5;
        border-radius: 6px;
        border: none;
        outline: none;
        box-sizing: border-box;
      }
    }

    .upload-card {
      margin-top: 18px;
      width: 345px;

      .upload-title {
        height: 24px;
        line-height: 24px;
      }

      .upload-desc {
        margin-top: 6px;
        height: 18px;
        line-height: 18px;
      }

      .card-front,
      .card-back {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 17px;
        width: 345px;
        height: 175px;
        border-radius: 8px;
        border: 1px solid #ebebeb;
        background: #f5f5f5;

        .desc1 {
          margin-top: 34px;
          height: 18px;
          line-height: 18px;
        }

        .desc2 {
          margin-top: 9px;
          height: 20px;
          line-height: 20px;
        }

        .btn {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-top: 25px;
          padding-left: 16px;
          width: 88px;
          height: 40px;
          border-radius: 64px;
          background: #df384c;
          box-sizing: border-box;

          img {
            margin-left: 10px;
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    .upload-remarks {
      margin-top: 15px;
      width: 345px;
      height: 100px;
      line-height: 20px;
      letter-spacing: 0.2px;
    }

    .submit {
      margin-top: 21px;
      margin-bottom: 50px;
      width: 311px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 100px;
      background: #df384c;
      letter-spacing: 0.2px;
    }
  }
</style>
