<template>
  <view class="min-h-100vh bg-gray">
    <view class="box">
      <view class="u-flex">
        <view class="title">姓名</view>
        <view class="u-flex-1 input-box">
          <input
            type="text"
            v-model="form.realName"
            class="input"
            placeholder="请输入姓名"
          />
        </view>
      </view>
      <view class="u-flex u-m-t-32">
        <view class="title">身份证号</view>
        <view class="u-flex-1 input-box">
          <input
            type="text"
            v-model="form.idCard"
            class="input"
            placeholder="请输入身份证号"
          />
        </view>
      </view>
      <view class="tips">请输入和当前微信账号为同一实名，否则将会提现失败</view>
    </view>
    <view class="u-m-t-60 u-p-l-28 u-p-r-28">
      <view class="submit" @click="submit">提交</view>
      <view class="cancel" @click="cancel">取消</view>
    </view>
  </view>
</template>
<script setup>
import { realNameAuth } from "@/common/api/market/distribution";
import { ref, reactive } from "vue";
import {validateName,validateIdCard} from "@/utils/util.js"
const form = reactive({
  realName: "",
  idCard: "",
});
const userInfo = ref(uni.cache.get("userInfo") || {});
form.realName=userInfo.value.realName
form.idCard=userInfo.value.idCard

async function submit() {
  const validNameResult = validateName(form.realName)
  if(!validNameResult.valid){
    return uni.showToast({
      title: validNameResult.msg,
      icon: "none",
      duration: 1500,
    })
  }
  const validIdCardResult = validateIdCard(form.idCard)
  if(!validIdCardResult.valid){
    return uni.showToast({
      title: validIdCardResult.msg,
      icon: "none",
      duration: 1500,
    })
  }

  const res = await realNameAuth({ ...form, id: userInfo.value.id });
  if (res) {
    uni.showToast({
      title: "修改成功",
      icon: "none",
      duration: 1500,
    });
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1500);
  }
}
function cancel() {
  uni.navigateBack({
    delta: 1,
  });
}
</script>


<style scoped lang="scss">
.min-h-100vh {
  padding: 32rpx 28rpx;
}
.tips {
  font-size: 24rpx;
  line-height: 40rpx;
  color: #ff1c1c;
  margin-top: 32rpx;
}
.box {
  background-color: #fff;
  padding: 32rpx 28rpx;
  font-size: 28rpx;
  border-radius: 16rpx;
  color: #333;
  .title {
    min-width: 160rpx;
  }
  .input-box {
    border-bottom: 2rpx solid #ededed;
    .input {
    }
  }
}
.submit {
  background: #ffd158;
  border-radius: 100rpx;
  padding: 22rpx 288rpx;
  font-size: 32rpx;
  line-height: 46rpx;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}
.cancel {
  color: #999999;
  white-space: nowrap;

  border-radius: 100rpx;
  padding: 22rpx 288rpx;
  font-size: 32rpx;
  line-height: 46rpx;
  text-align: center;
}
</style>