<template>
  <div class="realname-container">
    <div class="contenttitle">
      <span>实名认证</span>
    </div>
    <div class="contentbody" v-if="userinfo.IDAuth === 0">
      <div class="warningmsg">智能加密，保障您的信息安全</div>
      <div class="idcardbox">
        <div class="realname">
          <div>真实姓名</div>
          <input
            type="text"
            placeholder="请输入真实姓名"
            v-model.trim="userinfoobj.realName"
          />
        </div>
        <div class="idcard">
          <div>身份证号</div>
          <input
            type="text"
            placeholder="请输入本人真实身份证号"
            v-model.trim="userinfoobj.idCard"
          />
        </div>
        <button @click="submit">确定</button>
      </div>
    </div>
    <div class="contentbody" v-else>
      <div class="warningmsg">智能加密，保障您的信息安全</div>
      <div>真实姓名：{{ userinfo.hidename }}</div>
      <div>身份证号：{{ userinfo.hideId }}</div>
    </div>
  </div>
</template>

<script>
import { setUserRealNameApi } from "@/api/userinfo.js";
export default {
  inject: ["reload"],
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    userinfo: {
      require: true,
    },
  },
  // 组件状态值
  data() {
    return {
      userinfoobj: {
        realName: "",
        idCard: "",
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    async submit() {
      try {
        if (
          this.userinfoobj.realName.length !== 0 &&
          this.userinfoobj.idCard.length !== 0
        ) {
          const { data } = await setUserRealNameApi(this.userinfoobj);
          console.log(data);
          if (data.status === 200) {
            this.$message.success("实名认证成功");
            this.reload();
          }
        } else {
          this.$message.warning("信息不完整");
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped lang="less">
.realname-container {
  .contentbody {
    > div {
      font-size: 16px;
      margin-bottom: 16px;
    }
  }
  .warningmsg {
    font-size: 14px;
    color: #4d575e;
    margin: 24px 0;
  }
  .idcardbox {
    > div {
      > div {
        font-size: 16px;
        margin-bottom: 8px;
        line-height: 16px;
      }
      input {
        outline: none;
        width: 430px;
        height: 40px;
        text-indent: 10px;
        margin-bottom: 16px;
        font-size: 16px;
        background: #fff;
        border: 1px solid #dddddd;
        border-radius: 4px;
        &::placeholder {
          color: #c2c5c8;
          font-size: 16px;
        }
      }
    }

    button {
      width: 64px;
      height: 32px;
      background: #ff6a00;
      border-radius: 4px;
      border: none;
      font-size: 14px;
      color: #fff;
      &:hover {
        background-color: #fe8034;
      }
    }
  }
}
</style>
