<template>
  <div class="bg-[#F5F5F5] flex flex-col">
    <nut-uploader url="https://xxxx" class="self-center">
      <div class="flex items-end mt-[64rpx]">
        <img src="/images/mine/avatar.png" alt="avatar" class="w-[256tpx] h-[256rpx]" />
        <div class="w-[92rpx] h-[92rpx] bg-black border-white border-[4rpx] border-solid rounded-full p-[10rpx] ml-[-60rpx]">
          <Camera fill="#fff" :stroke-width="2" class="w-full h-full" />
        </div>
      </div>
    </nut-uploader>

    <div class="text-[32rpx] font-500 mb-[20rpx] mt-[60rpx] mx-[48rpx]">性别</div>
    <nut-radio-group v-model="gender" class="gender-radio mx-[30rpx]" direction="horizontal">
      <nut-radio label="male" shape="button">
        <Mars class="mr-[12rpx]" />
        男
      </nut-radio>
      <nut-radio label="female" shape="button">
        <Venus class="mr-[12rpx]" />
        女
      </nut-radio>
    </nut-radio-group>

    <ul class="text-[32rpx] identify-wrapper mx-[30rpx] mt-[40rpx]">
      <li class="px-[30rpx] py-[38rpx] flex items-center rounded-[24rpx] bg-white mb-[40rpx]">
        <span class="text-black font-500">姓名</span>
        <nut-input v-model="formData.name" placeholder="请输入" class="flex-1 ml-[94rpx]" />
      </li>
      <li class="px-[30rpx] py-[38rpx] flex items-center rounded-[24rpx] bg-white">
        <span class="text-black font-500">身份证号</span>
        <nut-input v-model="formData.identify" placeholder="请输入身份证号" class="flex-1 ml-[30rpx]" />
      </li>
    </ul>

    <div class="button-group px-[30rpx] grid gap-[40rpx] mt-[40rpx]">
      <nut-button class="w-full! submit-btn rounded-[20rpx]!" shape="square" @click="handleCancel">提交</nut-button>
      <nut-button class="w-full! cancel-btn rounded-[20rpx]!" shape="square" @click="handleCancel">返回</nut-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Camera, Mars, Venus } from "lucide-vue-next";
  import { useRouter } from "vue-router";

  const gender = ref("male");
  const router = useRouter();

  const formData = ref({
    name: "",
    identify: "",
  });

  const handleCancel = () => {
    router.go(-1);
  };
</script>

<style lang="scss" scoped>
  .gender-radio {
    --nut-radio-label-button-background: #000;
    --nut-radio-button-border-radius: 12px;
    --nut-radio-label-font-active-color: #000;
    --nut-radio-label-button-border-color: #000;
    --nut-radio-button-padding: 13px 28px;
    --nut-radio-button-font-size: 16px;

    :deep(.nut-radio__button) {
      background-color: #fff;
      border: 2px solid #000;
      color: #000;
    }

    :deep(.nut-radio__button--active) {
      color: #fff;
      background-color: #000;
    }
  }

  .identify-wrapper {
    --nut-input-border-bottom: transparent;
    --nut-input-font-size: 16px;

    :deep(.nut-input) {
      padding: 0;
    }
  }

  .button-group {
    --nut-button-default-font-size: 22px;
    --nut-button-default-padding: 13px 0;
    --nut-button-default-height: auto;
  }

  .submit-btn {
    --nut-button-default-bg-color: #28bebb;
    --nut-button-default-color: #fff;
  }
  .cancel-btn {
    --nut-button-default-bg-color: #fff;
    --nut-button-default-color: #28bebb;
    --nut-button-default-border-color: #28bebb;
    --nut-button-border-width: 2px;
  }
</style>
