<template>
  <view class="person-page">
    <image class="icon-return" :src="$baseUrl + 'person/icon_return.png'" mode="aspectFit" @click="handleReturn" />

    <image class="banner_upload" :src="$baseUrl + 'person/customer.png'" mode="aspectFit" :data-log="{
      xcxClick: '我的页面-信息修改页点击',
      pageName: '我的页面-信息修改页',
      buttonName: '上传背景',
    }" @click="handleUploadBackground" />

    <view class="person-header">
      <image class="banner_bg" :src="formData.backgroundImg || $baseUrl + 'person/banner.png'" mode="aspectFill" />
      <image class="banner_cover" :src="$baseUrl + 'person/cover_white.png'" mode="aspectFill" />
    </view>

    <!-- 头像 -->
    <view class="person-avatar">
      <view class="person-avatar-box">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="person-avatar-img" mode="aspectFill"
            :src="formData.babyAvatar || $baseUrl + 'common/default_avatar.png'"></image>
        </button>
      </view>

      <image class="avatar-edit" :src="$baseUrl + 'person/icon_modify.png'" mode="widthFix" lazy-load="false"
        binderror="" bindload="" />
    </view>

    <form @submit="onSubmit">
      <view class="person-info">
        <block v-for="(item, index) in formItems
          .filter(formItemFilter)
          .slice(
            0,
            formData.babyStage == 2 && pageStatus.formStatus == 2
              ? 6
              : formItems.length
          )" :key="item.name">
          <view class="form-row" :style="{
            'border-bottom':
              pageStatus.formStatus == 0 &&
                index == formItems.filter(formItemFilter).length - 1
                ? 'none'
                : '1rpx solid #f2f2f2',
          }">
            <text class="form-label">
              {{ getlabelFn(item) }}
              <!-- {{ item.label }} -->
              <text v-if="item.required" class="required">*</text>
            </text>
            <!-- 输入框类型 -->
            <input v-if="item.type === 'input'" class="form-input" :name="item.name" :placeholder="item.placeholder"
              v-model="formData[item.name]" :maxlength="item.maxLength" />
            <!-- 只读展示类型 -->
            <view v-else-if="item.type === 'display'" class="form-input-box">
              <view class="form-input" style="color: #222">{{
                formData[item.name] || item.placeholder
                }}</view>
            </view>
            <view v-else-if="item.type === 'display-obj'" class="form-input-box">
              <view class="form-input" style="color: #222">{{
                getLabelByValue(item, formData[item.name])
                }}</view>
            </view>
            <!-- 选择器类型 -->
            <picker-custom v-else-if="item.type === 'picker'" :mode="item.mode" :range="item.range" :value="item.mode === 'date'
                ? formData[item.name]
                : getPickerIndex(item)
              " :onPickerChange="(e) => onPickerChange(e, item.name)"
              :onLayerVisibleChange="(e) => (pageStatus.btnStatus = !e)" :onStatusChange="onDateStatusChange">
              <view class="form-input-box">
                <view class="form-input">{{
                  getLabelByValue(item, formData[item.name]) || item.placeholder
                  }}</view>
                <image class="form-input-icon" :src="$baseUrl + 'person/icon_arrow_yellow_right.png'" />
              </view>
            </picker-custom>
            <!-- 多选弹窗类型 -->
            <view v-else-if="item.type === 'multi-picker'" @click="handleMultiPickerOpen(item)">
              <view class="form-input-box">
                <view class="form-input">
                  {{
                    (formData[item.name] &&
                      (formData[item.name].split(",").join("、").length > 11
                        ? formData[item.name]
                          .split(",")
                          .join("、")
                          .slice(0, 11) + "..."
                        : formData[item.name].split(",").join("、"))) ||
                    item.placeholder
                  }}
                </view>
                <image class="form-input-icon" :src="$baseUrl + 'person/icon_arrow_yellow_right.png'" />
              </view>
            </view>
            <!-- 单选类型 -->
            <radio-group v-else-if="item.type === 'radio'" @change="(e) => onRadioChange(e, item.name)">
              <label v-for="opt in item.options" :key="opt.value" class="form-radio">
                <radio :value="opt.value" :checked="formData[item.name] === opt.value" />
                {{ opt.label }}
              </label>
            </radio-group>
          </view>
        </block>

        <view v-if="formData.babyStage == 2" class="form-bottom-btn" @click="handleFormBottomBtn">
          <text class="form-bottom-text">
            {{ pageStatus.formStatus == 1 ? "收起" : "展开" }}
          </text>
          <image v-if="pageStatus.formStatus == 1" class="form-bottom-icon"
            :src="$baseUrl + 'person/icon_arrow_yellow_up.png'" mode="aspectFit" />
          <image v-else class="form-bottom-icon" :src="$baseUrl + 'person/icon_arrow_yellow_down.png'"
            mode="aspectFit" />
        </view>
      </view>
      <view class="form-bottom"></view>

      <button v-if="pageStatus.btnStatus" form-type="submit" class="form-btn">
        保存
      </button>
    </form>

    <MultiSelectLayer v-if="multiPickerStatus && currentMultiPickerName" v-model="multiPickerStatus" :title="formItems.find((i) => i.name === currentMultiPickerName)?.label +
      '（多选）'
      " :options="formItems.find((i) => i.name === currentMultiPickerName)?.range"
      :modelSelected="multiPickerSelected[currentMultiPickerName]" @confirm="handleMultiPickerConfirm"
      @cancel="handleMultiPickerCancel" />
  </view>
</template>

<script setup>
import { ref, watch, onMounted, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "../../stores/user.js";
import PickerCustom from "../../components/PickerCustom.vue";
import MultiSelectLayer from "../../components/MultiSelectLayer.vue";
import { uploadImage } from "../../api/common.js";
import { showLoading, hideLoading } from "../../utils/index.js";
import { updateBabyInfo, getGestationalWeeks } from "../../api/user.js";
import { usePageCfgStore } from "../../stores/pageCfg";
import md from "../../md.js";
import { jump, JumpType } from "../../utils/index.js";
import { useIntegralStore } from "../../stores/integral.js";
import { useGlobalStore } from "../../stores/global.js";

const globalStore = useGlobalStore();

const userStore = useUserStore();
const pageType = ref("add");
const babyId = ref("");

const pageStatus = ref({
  formStatus: 0, // 0: 隐藏 1: 展开, 2: 收起
  btnStatus: true, // 是否显示提交按钮
});

// 0备孕 1孕中 2出生
const formData = ref({
  babyStage: 2,
  babyName: "",
  babyBirthday: "",
  babyGender: "",
  babyType: "",
  feedingType: "",
  contentPreference: "",
  productPreference: "",
  followInfo: "",
  purchaseChannel: "",
  babyAvatar: "",
  backgroundImg: "",
});

const babyTypeMap = [
  { label: "一胎", value: 1 },
  { label: "二胎", value: 2 },
  { label: "三胎", value: 3 },
];
const babyStageMap = [
  { label: "备孕", value: 0 },
  { label: "孕中", value: 1 },
  { label: "已出生", value: 2 },
];
const babyGenderMap = [
  { label: "男", value: "M" },
  { label: "女", value: "F" },
  { label: "其他", value: "O" },
];

const FormMap = {
  0: ["babyStage", "contentPreference", "followInfo"],
  1: [
    "babyStage",
    "babyBirthday",
    "gestationalWeeks",
    "babyType",
    "contentPreference",
    "followInfo",
  ],
  2: [
    "babyStage",
    "babyName",
    "babyBirthday",
    "babyType",
    "babyGender",
    "feedingType",
    "contentPreference",
    "productPreference",
    "followInfo",
    "purchaseChannel",
  ],
};

const formItemFilter = (item) => {
  return FormMap[formData.value.babyStage].includes(item.name);
};

const MAX_babyName_LENGTH = 10;

watch(
  () => formData.value.babyStage,
  (newVal) => {
    pageStatus.value.formStatus = newVal == 2 ? 2 : 0;
  }
);

const pageCfgStore = usePageCfgStore();
// 内容偏好选项
const contentLikeOptions = ref([]);
// 产品偏好选项
const productLikeOptions = ref([]);
// 特别关注选项
const specialAttentionOptions = ref([]);
// 购买渠道选项
const channelOptions = ref([]);

// 表单项配置
const formItems = ref([
  {
    label: "当前状态",
    name: "babyStage",
    required: true,
    placeholder: "请选择当前状态",
    type: "picker",
    range: babyStageMap.map((i) => i.label),
    mode: "custom",
  },
  {
    label: "宝宝昵称",
    name: "babyName",
    required: true,
    placeholder: "暂无昵称",
    type: "input",
    maxLength: MAX_babyName_LENGTH,
  },
  {
    label: "宝宝出生日期",
    name: "babyBirthday",
    required: true,
    placeholder: "请选择出生日期",
    type: "picker",
    mode: "date",
    defaultToday: true,
  },
  {
    label: "宝宝胎数",
    name: "babyType",
    required: true,
    placeholder: "未选择",
    type: "picker",
    range: babyTypeMap.map((i) => i.label),
    mode: "custom",
    disabled: false,
  },
  {
    label: "性别",
    name: "babyGender",
    required: true,
    placeholder: "未选择",
    type: "picker",
    range: babyGenderMap.map((i) => i.label),
    mode: "custom",
  },
  {
    label: "喂养方式",
    name: "feedingType",
    required: false,
    placeholder: "未选择",
    type: "picker",
    range: ["奶粉喂养", "母乳喂养", "母乳奶粉混合喂养"],
    mode: "custom",
  },
  {
    label: "孕周",
    name: "gestationalWeeks",
    required: false,
    placeholder: "",
    type: "display",
  },
  {
    label: "内容偏好",
    name: "contentPreference",
    required: false,
    placeholder: "未选择",
    type: "multi-picker",
    range: [],
    mode: "custom",
  },
  {
    label: "产品使用偏好",
    name: "productPreference",
    required: false,
    placeholder: "未选择",
    type: "multi-picker",
    range: [],
    mode: "custom",
  },
  {
    label: "特殊关注信息",
    name: "followInfo",
    required: false,
    placeholder: "未选择",
    type: "multi-picker",
    range: [],
    mode: "custom",
  },
  {
    label: "常购买渠道",
    name: "purchaseChannel",
    required: false,
    placeholder: "未选择",
    type: "picker",
    range: [],
    mode: "custom",
  },
]);

const clearFormFields = () => {
  formData.value.babyBirthday = "";
  if (!userStore.babyInfo.content?.babyType) {
    formData.value.babyType = "";
  }
  formData.value.babyGender = "";
  formData.value.feedingType = "";
  formData.value.contentPreference = "";
  formData.value.productPreference = "";
  formData.value.followInfo = "";
  formData.value.purchaseChannel = "";
  formData.value.gestationalWeeks = "";
};

const getPickerIndex = (item) => {
  const val = formData.value[item.name];
  if (item.name === "babyStage") {
    const idx = babyStageMap.findIndex((i) => i.value === val);
    return idx > -1 ? idx : 0;
  }
  if (item.name === "babyType") {
    const idx = babyTypeMap.findIndex((i) => i.value === val);
    return idx > -1 ? idx : 0;
  }
  if (item.name === "babyGender") {
    const idx = babyGenderMap.findIndex((i) => i.value === val);
    return idx > -1 ? idx : 0;
  }
  if (item.mode === "date") {
    if (typeof val === "string" && val.match(/^\d{4}-\d{2}-\d{2}$/)) {
      const [year, month, day] = val.split("-").map(Number);
      const yearIdx = year - 1970;
      const monthIdx = month - 1;
      const dayIdx = day - 1;
      return [yearIdx, monthIdx, dayIdx];
    }
    const currentYear = new Date().getFullYear();
    return [currentYear - 1970, 0, 0];
  } else if (Array.isArray(item.range?.[0])) {
    if (Array.isArray(val)) {
      return val.map((v, col) => item.range[col].indexOf(v));
    }
    return item.range.map(() => 0);
  } else {
    return val ? item.range.indexOf(val) : 0;
  }
};
const onPickerChange = (e, name) => {
  const item = formItems.value.find((i) => i.name === name);
  if (name === "babyStage") {
    if (
      pageType.value === "edit" &&
      babyStageMap[e].value < userStore.babyInfo.babyStage
    ) {
      uni.showToast({
        title: "不能选择更早的阶段",
        icon: "none",
      });
      return;
    }

    // 当阶段变化时清空相关表单项
    if (formData.value[name] !== babyStageMap[e].value) {
      clearFormFields();
    }

    formData.value[name] = babyStageMap[e].value;
    return;
  }
  if (name === "babyType") {
    formData.value[name] = babyTypeMap[e].value;
    return;
  }
  if (name === "babyGender") {
    formData.value[name] = babyGenderMap[e].value;
    return;
  }
  if (item.mode === "date") {
    formData.value[name] = e;
  } else if (Array.isArray(e)) {
    formData.value[name] = e.map((idx, col) => item.range[col][idx]).join(" ");
  } else {
    formData.value[name] = item.range[e];
  }
};

const onRadioChange = (e, name) => {
  formData.value[name] = e.detail.value;
};

const sleep = (delay) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), delay);
  });
};

const onSubmit = async (e) => {
  md.sensorLogTake({
    xcxClick: "我的页面-信息修改页点击",
    pageName: "我的页面-信息修改页",
    buttonName: "保存",
  });

  // 获取当前阶段需要校验的字段
  const fieldsToValidate = FormMap[formData.value.babyStage].filter(
    (field) => field !== "babyStage"
  );

  console.log("fieldsToValidate", formData.value);

  // 获取必填的表单项
  const requiredFields = formItems.value
    .filter((item) => fieldsToValidate.includes(item.name) && item.required)
    .map((item) => ({
      name: item.name,
      label: item.label,
    }));

  // 校验必填项
  for (const field of requiredFields) {
    if (!formData.value[field.name]) {
      uni.showToast({
        title: `请填写${field.label}`,
        icon: "none",
      });
      return;
    }
  }

  const data = {
    babyBirthday: formData.value.babyBirthday,
    babyType: formData.value.babyType,
    contentPreference: formData.value.contentPreference,
    followInfo: formData.value.followInfo,
    babyName: formData.value.babyName,
    feedingType: formData.value.feedingType,
    productPreference: formData.value.productPreference,
    purchaseChannel: formData.value.purchaseChannel,
    babyStage: formData.value.babyStage,
    babyAvatar: formData.value.babyAvatar,
    backgroundImg: formData.value.backgroundImg,
    babyGender: formData.value.babyGender,
  };

  if (babyId.value) {
    data.id = babyId.value;
  }

  // 移除空值属性
  Object.keys(data).forEach((key) => {
    if (data[key] === "") {
      delete data[key];
    }
  });

  console.log("提交数据", data);



  const pregnancyStatus = babyStageMap.find((i) => i.value === formData.value.babyStage)?.label || "";
  md.sensorUserLogTake({
    memberid: uni.getStorageSync('memberId'),
    pregnancyStatus: pregnancyStatus,
  })
  showLoading();

  const res = await updateBabyInfo(data);

  hideLoading();

  if (res.success) {
    data?.id && userStore.setBabyNickCache(data?.id, formData.value.babyName);

    // jump({
    // 	type: JumpType.INNER,
    // 	url: "/pages/index/index"
    // })
    showLoading();
    await sleep(3000);
    await userStore.loadUserInfo();
    await userStore.loadBabyInfo();
    await userStore.loadHomeInfo();
    hideLoading();

    uni.showToast({
      title: "提交成功",
      icon: "success",
    });

    //获取任务奖品
    await checkAndUpdateTaskResult();

    uni.navigateBack();
  } else {
    uni.showToast({
      title: res.message,
      icon: "none",
    });
  }
};



// 检查任务结果并更新全局状态
const checkAndUpdateTaskResult = async () => {
  const integralStore = useIntegralStore();
  await integralStore.queryTodoResultServer();
  console.log('queryTodoResult:', integralStore.queryTodoResult);

  if(integralStore.queryTodoResult?.success && integralStore.queryTodoResult?.data?.length > 0) {
    globalStore.isShowTaskComplete = true;
    globalStore.taskCompletePoints = integralStore.queryTodoResult.data[0]?.actualCredits;
    globalStore.taskCompleteTitle = integralStore.queryTodoResult.data[0]?.taskName;
  }
};

const handleReturn = () => {
  uni.navigateBack();
};

const handleFormBottomBtn = () => {
  md.sensorLogTake({
    xcxClick: "我的页面-信息修改页点击",
    pageName: "我的页面-信息修改页",
    buttonName: pageStatus.value.formStatus == 1 ? "收起" : "展开",
  });

  pageStatus.value.formStatus = pageStatus.value.formStatus == 1 ? 2 : 1;
};

const onChooseAvatar = async (e) => {
  const fs = uni.getFileSystemManager();
  const base64 =
    "data:image/jpeg;base64," + fs.readFileSync(e.detail.avatarUrl, "base64");
  const res = await uploadImage(base64);
  if (res.success) {
    formData.value.babyAvatar = res.data.url;
  } else {
    uni.showToast({
      title: res.message,
      icon: "none",
    });
  }
};

const handleUploadBackground = async (e) => {
  md.sensorLog(e);
  // 唤起图片选择器
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: async (res) => {
      showLoading();
      const tempFilePath = res.tempFilePaths[0];
      const fs = uni.getFileSystemManager();
      const base64 =
        "data:image/jpeg;base64," + fs.readFileSync(tempFilePath, "base64");

      const uploadRes = await uploadImage(base64);

      hideLoading();
      if (uploadRes.success) {
        formData.value.backgroundImg = uploadRes.data.url;
      } else {
        uni.showToast({
          title: uploadRes.message,
          icon: "none",
        });
      }
    },
  });
};
function onDateStatusChange(status) {
  if (pageType.value === "edit" && status < userStore.babyInfo.babyStage) {
    uni.showToast({
      title: "不能超过当前时间哦～",
      icon: "none",
    });
    return false;
  }
  formData.value.babyStage = status;
  if (status !== formData.value.babyStage) {
    clearFormFields();
  }
  return true;
}
const getlabelFn = (item) => {
  if (item.name === "babyBirthday") {
    item.label = formData.value.babyStage == 1 ? "预产日期" : "宝宝出生日期";
  }
  return item.label;
};
// getLabelByValue 支持所有映射字段
const getLabelByValue = (item, value) => {
  if (item.name === "babyStage") {
    return babyStageMap.find((i) => i.value === value)?.label || "";
  }
  if (item.name === "babyType") {
    return babyTypeMap.find((i) => i.value === value)?.label || "";
  }

  if (item.name === "babyGender") {
    return babyGenderMap.find((i) => i.value === value)?.label || "";
  }

  // // 添加根据切换状态修改文案
  if (item.name === "babyBirthday") {
    // console.log("🚀 ~ getLabelByValue ~ formData:", formData.value, item)
    item.placeholder = formData.value.babyBirthday
      ? formData.value.babyBirthday
      : formData.value.babyStage == 1
        ? "请选择预产日期"
        : "请选择出生日期";
    return item.placeholder;
  }
  return value;
};

const multiPickerStatus = ref(false); // 控制弹窗显示
const currentMultiPickerName = ref(""); // 当前弹窗对应的item.name
const multiPickerSelected = ref({}); // 存储每个multi-picker的选中项

function handleMultiPickerOpen(item) {
  currentMultiPickerName.value = item.name;
  multiPickerStatus.value = true;
  // 初始化选中项
  let val = formData.value[item.name];
  if (typeof val === "string") {
    val = val ? val.split(",") : [];
  }
  multiPickerSelected.value[item.name] = val || [];
}
function handleMultiPickerConfirm(selected) {
  if (!currentMultiPickerName.value) return;
  formData.value[currentMultiPickerName.value] = selected.join(",");
  multiPickerStatus.value = false;
  currentMultiPickerName.value = "";
}
function handleMultiPickerCancel() {
  multiPickerStatus.value = false;
  currentMultiPickerName.value = "";
}

const initData = () => {
  const contentCfg = JSON.parse(JSON.stringify(pageCfgStore.contentCfg));

  contentLikeOptions.value = contentCfg.contentLikeOptions;
  productLikeOptions.value = contentCfg.productLikeOptions;
  specialAttentionOptions.value = contentCfg.specialAttentionOptions;
  channelOptions.value = contentCfg.channelOptions;

  // 更新表单项的选项数据
  formItems.value.forEach((item) => {
    if (item.name === "contentPreference") {
      item.range = contentLikeOptions.value;
    } else if (item.name === "productPreference") {
      item.range = productLikeOptions.value;
    } else if (item.name === "followInfo") {
      item.range = specialAttentionOptions.value;
    } else if (item.name === "purchaseChannel") {
      item.range = channelOptions.value;
    } else if (
      pageType.value == "edit" &&
      item.name === "babyType" &&
      userStore.babyInfo.content?.babyType
    ) {
      item.type = "display-obj";
    } else if (item.name === "babyBirthday") {
      item.label = formData.value.babyStage == 2 ? "宝宝出生日期" : "预产日期";
      item.placeholder =
        formData.value.babyStage == 2 ? "请选择出生日期" : "请选择预产日期";
    }
  });
};

onMounted(() => {
  md.sensorLogTake({
    xcxPage: "宝宝信息页面浏览",
    pageName: "我的页面-信息修改页",
  });

  initData();
});

onLoad((options) => {
  console.log("🚀 ~ options-新增和修改:", options);
  // debugger;
  pageType.value = options.type || "add";
  babyId.value = options.id || "";
  if (pageType.value === "edit") {
    const baby = userStore.babyInfo;
    console.log("🚀 ~ baby:", baby);
    formData.value.babyStage = baby.babyStage ?? 2;
    formData.value.babyName = baby.babyName || "";
    formData.value.babyBirthday = baby.content?.babyBirthday || "";
    formData.value.babyType = baby.content?.babyType || "";
    formData.value.babyGender = baby.content?.babyGender || "";
    formData.value.feedingType = baby.content?.feedingType || "";
    formData.value.contentPreference = baby.content?.contentPreference || "";
    formData.value.productPreference = baby.content?.productPreference || "";
    formData.value.followInfo = baby.content?.followInfo || "";
    formData.value.purchaseChannel = baby.content?.purchaseChannel || "";
    formData.value.babyAvatar = baby.content?.babyAvatar || "";
    formData.value.backgroundImg = baby.content?.backgroundImg || "";
    formData.value.gestationalWeeks = baby.content?.gestationalWeeks || "";
  } else {
    Object.assign(formData.value, {
      babyStage: 2,
      babyName: "",
      babyBirthday: "",
      babyGender: "",
      babyType: "",
      feedingType: "",
      contentPreference: "",
      productPreference: "",
      followInfo: "",
      purchaseChannel: "",
      babyAvatar: "",
      backgroundImg: "",
      gestationalWeeks: "",
    });
  }

  if (formData.value.babyStage == 2) {
    pageStatus.value.formStatus = 2;
  }
});

// 监听 babyStage 和 dueDate
watch(
  () => [formData.value.babyStage, formData.value.babyBirthday],
  async ([stage, dueDate], [oldStage, oldDueDate]) => {
    if (stage === 1) {
      // 1. 没有孕周
      // 2. 预产期变化
      if (!formData.value.gestationalWeeks || dueDate !== oldDueDate) {
        if (dueDate) {
          const res = await getGestationalWeeks(dueDate);
          if (res.success) {
            formData.value.gestationalWeeks = res.data.gestationalWeeks;
          }
        }
      }
    }
  }
);
</script>

<style lang="less" scoped>
@import "@/common.less";

.person-page {
  background-color: #f6f8fa;
  min-height: 100vh;

  .icon-return {
    width: 20rpx;
    height: 32rpx;
    position: fixed;
    top: 115rpx;
    left: 48rpx;
    z-index: 100;
  }

  .banner_upload {
    width: 197rpx;
    height: 68rpx;
    position: absolute;
    top: 200rpx;
    right: 0;
    z-index: 2;
  }

  .person-header {
    position: relative;
    height: 463rpx;

    .banner_bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      display: block;
    }

    .banner_cover {
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      display: block;
    }
  }

  .person-avatar {
    position: absolute;
    top: 269rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    .person-avatar-box {
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      overflow: hidden;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;

      .avatar-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
      }

      .person-avatar-img {
        width: 135rpx;
        height: 135rpx;
        display: block;
      }
    }

    .avatar-edit {
      width: 78rpx;
      height: 75rpx;
      position: absolute;
      bottom: -18rpx;
      right: -16rpx;
      display: block;
    }
  }

  .person-info {
    background: #fff;
    border-radius: 32rpx;
    margin: -20rpx auto 0;
    padding: 10rpx 32rpx 10rpx 32rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
    width: 686rpx;
    position: relative;
    z-index: 2;
    box-sizing: border-box;

    .form-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #f2f2f2;
      height: 110rpx;
    }

    .form-line-hidden {
      border-bottom: none;
    }

    .form-label {
      width: 250rpx;
      color: #222;
      font-size: 28rpx;

      .required {
        color: #b88a3a;
        margin-left: -4rpx;
      }
    }

    .form-input {
      flex: 1;
      color: #6f6d67;
      font-size: 28rpx;
      background: none;
      border: none;
      outline: none;
      text-align: right;
    }

    .form-input-icon {
      width: 11rpx;
      height: 19rpx;
      margin-left: 16rpx;
      display: block;
    }

    .form-input-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .form-radio {
      margin-right: 32rpx;
      font-size: 28rpx;
    }
  }

  .form-bottom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;

    .form-bottom-text {
      font-size: 28rpx;
      color: #6f6d67;
    }

    .form-bottom-icon {
      width: 19rpx;
      height: 12rpx;
      margin-left: 13rpx;
      display: block;
    }
  }

  .form-bottom {
    height: 300rpx;
    width: 100%;
  }

  .form-btn {
    width: 686rpx;
    height: 94rpx;
    border-radius: 46rpx;
    background-color: #d3a358;
    color: #ffffff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    bottom: 60rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
}
</style>
