<template>
    <div class="essential-information">
        <NavBar backgroundBox="#ffffff" :showIcon="true" :showTitle="true" title="基本信息"></NavBar>
        <view
            class="real-name-authentication flex-between"
            v-if="verified == 0"
            @tap="toIdcard"
            data-url="/subPackages/resume/pages/real-name-authentication/real-name-authentication"
        >
            <view class="flex-align-center">
                <img src="@/static/image/user/realNameAuthentication.png" mode="" />
                <view>
                    <view class="text1">实名认证</view>
                    <view class="text2">完成实名认证找工作更容易~</view>
                </view>
            </view>
            <view class="btn">去认证</view>
        </view>
        <!-- 个人资料 -->
        <view class="my-info">
            <view class="my-info-list flex-row-b-c pd-b-38 upload-avatar" @tap="bindUploadImg">
                <view class="my-info-title avatar-label">
                    <text>头像</text>
                </view>
                <img class="avatar" v-if="userInfo.avatarPath" :src="evn.APP_IMAGE_BASE_API + userInfo.avatarPath" />
                <img class="avatar" v-else src="@/static/image/user/default-avatar.png" />
            </view>
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>姓名</text>
                </view>
                <input class="my-info-form" v-model="userInfo.name" placeholder="请输入" placeholder-class="placeholder-style" />
            </view>
            <!-- 性别 -->
            <view class="my-info-list pd-b-38">
                <view class="my-info-title label">
                    <text>性别</text>
                </view>
                <view class="gender radios">
                    <wd-radio-group v-model="userInfo.sex" shape="dot" inline>
                        <wd-radio :value="1">男</wd-radio>
                        <wd-radio :value="2">女</wd-radio>
                    </wd-radio-group>
                </view>
            </view>
            <!-- 出生年月 -->
            <view class="my-info-list flex-between">
                <view class="my-info-title label">
                    <text>出生年月</text>
                </view>
                <wd-datetime-picker
                    v-model="userInfo.birthday"
                    :maxDate="new Date().getTime()"
                    :minDate="new Date('1950/01/01').getTime()"
                    type="date"
                    @confirm="confirmBirthdayData"
                    use-default-slot
                    style="flex: 1"
                >
                    <div style="flex: 1" class="flex-between">
                        <view :class="['my-info-form', !userInfo.birthday ? 'placeholder-style' : '']">
                            {{ userInfo.birthday ? dateformat(userInfo.birthday) : "选择出生年月" }}</view
                        >
                        <view class="arrow"></view>
                    </div>
                </wd-datetime-picker>
            </view>
            <!-- 身份 -->
            <view class="my-info-list pd-b-38">
                <view class="my-info-title label">
                    <text>身份</text>
                </view>
                <wd-checkbox-group v-model="userInfo.identityTypes" shape="dot" inline>
                    <wd-checkbox :modelValue="v.code" :key="v.code" v-for="v in identityTypeOpstion">{{ v.text }}</wd-checkbox>
                </wd-checkbox-group>
            </view>
            <!-- 户籍地* -->
            <view class="my-info-list flex-between">
                <view class="my-info-title label">
                    <text>户籍地</text>
                </view>
                <wd-col-picker
                    v-model="value"
                    :columns="area"
                    :column-change="columnChange"
                    @confirm="handleConfirm"
                    use-default-slot
                    style="flex: 1"
                >
                    <div style="flex: 1" class="flex-between">
                        <view :class="['my-info-form', !provinceCityDistrict ? 'placeholder-style' : '']">
                            {{ provinceCityDistrict ? provinceCityDistrict : "选择户籍地" }}</view
                        >
                        <view class="arrow"></view>
                    </div>
                </wd-col-picker>
            </view>
            <!-- 户籍详细地址 -->
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>户籍详细地址</text>
                </view>
                <input
                    class="my-info-form"
                    v-model="userInfo.residenceAddress"
                    placeholder="请输入户籍详细地址"
                    placeholder-class="placeholder-style"
                />
            </view>
            <!-- 常住地* -->
            <view class="my-info-list flex-between">
                <view class="my-info-title label">
                    <text>常住地</text>
                </view>
                <wd-col-picker
                    v-model="value2"
                    :columns="area"
                    :column-change="columnChange2"
                    @confirm="handleConfirm2"
                    use-default-slot
                    style="flex: 1"
                >
                    <div style="flex: 1" class="flex-between">
                        <view :class="['my-info-form', !provinceCityDistrict2 ? 'placeholder-style' : '']">
                            {{ provinceCityDistrict2 ? provinceCityDistrict2 : "选择常住地" }}</view
                        >
                        <view class="arrow"></view>
                    </div>
                </wd-col-picker>
            </view>
            <!-- 常住详细地址 -->
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>常住详细地址</text>
                </view>
                <input
                    class="my-info-form"
                    v-model="userInfo.birthAddress"
                    placeholder="请输入常住详细地址"
                    placeholder-class="placeholder-style"
                />
            </view>

            <!-- 学历 -->
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>学历</text>
                </view>
                <wd-picker
                    :columns="educationOpstion"
                    label-key="text"
                    value-key="code"
                    v-model="userInfo.education"
                    use-default-slot
                    @confirm="changeEducationLevel"
                    style="flex: 1"
                >
                    <view class="picker">
                        <view :class="['my-info-form', educationText ? '' : 'placeholder-style']">{{
                            educationText || "请选择"
                        }}</view>
                    </view>
                </wd-picker>

                <!-- <image class="my-info-icon" src="{{ossImgPrefix}}/my/right.png"></image> -->
                <view class="arrow"></view>
            </view>
            <!-- 专业 -->
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>专业(选填)</text>
                </view>
                <!-- <input
                    class="my-info-form"
                    v-model="userInfo.major"
                    placeholder="请输入专业名称"
                    placeholder-class="placeholder-style"
                /> -->
                <wd-col-picker
                    :columns="majorOpstion"
                    label-key="name"
                    value-key="name"
                    v-model="majorValue"
                    use-default-slot
                    :column-change="columnChangeMajor"
                    @confirm="handleConfirmMajor"
                    style="flex: 1"
                >
                    <view class="picker">
                        <view :class="['my-info-form', userInfo.major ? '' : 'placeholder-style']">{{
                            userInfo.major || "请选择专业"
                        }}</view>
                    </view>
                </wd-col-picker>

                <!-- <image class="my-info-icon" src="{{ossImgPrefix}}/my/right.png"></image> -->
                <view class="arrow"></view>
            </view>
            <!-- 专业技术职称 -->
            <view class="two-rows">
                <text class="title">专业技术职称(选填)</text>
                <view class="bottom-row">
                    <view class="bottom-one">
                        <input
                            class="my-info-form"
                            v-model="userInfo.positionalTitleOne"
                            placeholder="请填写专业技术职称"
                            placeholder-class="placeholder-style"
                        />
                        <img class="write-icon" src="@/static/image/user/write.png" />
                    </view>
                    <view class="bottom-one">
                        <wd-picker
                            :columns="levelOpstion"
                            label-key="text"
                            value-key="code"
                            v-model="userInfo.positionalTitleTwo"
                            use-default-slot
                            @confirm="changeEducationLevel2"
                            style="flex: 1"
                        >
                            <view class="picker">
                                <view :class="['my-info-form', userInfo.positionalTitleTwo ? '' : 'placeholder-style']">{{
                                    userInfo.positionalTitleTwo || "请选择技术职称等级"
                                }}</view>
                            </view>
                        </wd-picker>
                        <view class="arrow"></view>
                    </view>
                </view>
            </view>
            <!-- 职业资格/技能等级证书 -->
            <view class="two-rows">
                <text class="title">职业资格/技能等级证书(选填)</text>
                <view class="bottom-row">
                    <view class="bottom-one">
                        <input
                            class="my-info-form"
                            v-model="userInfo.professionalCertificatesOne"
                            placeholder="请填写职业资格"
                            placeholder-class="placeholder-style"
                        />
                        <img class="write-icon" src="@/static/image/user/write.png" />
                    </view>
                    <view class="bottom-one">
                        <wd-picker
                            :columns="levelOpstion"
                            label-key="text"
                            value-key="code"
                            v-model="userInfo.professionalCertificatesTwo"
                            use-default-slot
                            @confirm="changeEducationLevel3"
                            style="flex: 1"
                        >
                            <view class="picker">
                                <view
                                    :class="['my-info-form', userInfo.professionalCertificatesTwo ? '' : 'placeholder-style']"
                                    >{{ userInfo.professionalCertificatesTwo || "请选择职业资格等级" }}</view
                                >
                            </view>
                        </wd-picker>
                        <view class="arrow"></view>
                    </view>
                </view>
            </view>
            <!-- 特种作业证 -->
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>特种作业证</text>
                </view>
                <input
                    class="my-info-form"
                    v-model="userInfo.specialCertificates"
                    placeholder="请输入专业技术职称名称"
                    placeholder-class="placeholder-style"
                />
            </view>
            <!-- 工作年限 -->
            <view class="my-info-list flex-column" v-if="userInfo.identityCode != 0">
                <view class="my-info-title label">
                    <!-- <text>{{identityCode == 0 ?  '参加实习时间' : '参加工作时间'}}</text> -->
                    <text>工作年限</text>
                </view>
                <input
                    class="my-info-form"
                    v-model="userInfo.workAge"
                    placeholder="请输入工作年限"
                    placeholder-class="placeholder-style"
                    type="number"
                />
            </view>
            <view class="tips"> *注：以下用户证件信息及联系方式将进行严格保密。 </view>
            <!-- 身份证号 -->
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>身份证号</text>
                </view>
                <input
                    class="my-info-form"
                    v-model="userInfo.citizenId"
                    type="text"
                    placeholder="请输入身份证号码"
                    placeholder-class="placeholder-style"
                />
            </view>
            <!-- 手机 -->
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>手机</text>
                </view>
                <input
                    class="my-info-form"
                    v-model="userInfo.phone"
                    maxlength="11"
                    type="number"
                    placeholder="请填写手机号"
                    placeholder-class="placeholder-style"
                />
            </view>
            <!-- 邮箱 -->
            <view class="my-info-list flex-column">
                <view class="my-info-title label">
                    <text>邮箱</text>
                </view>
                <input
                    cursor-spacing="30"
                    class="my-info-form"
                    v-model="userInfo.email"
                    placeholder="请填写邮箱"
                    placeholder-class="placeholder-style"
                />
            </view>
        </view>
        <view class="my-form-submit" v-if="!cropperFlag">
            <button class="my-form-button" @tap="submit">保 存</button>
        </view>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { getLoginUserApi, saveUserInfoApi } from "@/api/user.js";
import { getEumData, navigateTo } from "@/utils/utils.js";
import { uploadFiles } from "@/utils/fileUpload.js";
import evn from "@/utils/config.js";
import dayjs from "dayjs";
import { useColPickerData } from "@/hooks/useColPickerData";
import { getMajorTreeApi } from "@/api/user";
const { colPickerData, findChildrenByCode } = useColPickerData();
const value = ref([]);
const area = ref([
    colPickerData.map(item => {
        return {
            value: item.value,
            label: item.text
        };
    })
]);
const value2 = ref([]);
let verified = ref(0);
const cropperFlag = 0;
const identityCode = 0;
const userInfo = ref({
    userId: "",
    username: "",
    avatarPath: "user/default-avatar.png",
    name: "",
    sex: 2,
    phone: "",
    email: "",
    birthday: "",
    identityTypes: [],
    education: 6,
    workAge: null,
    personalTags: null,
    verified: 1,
    loginTime: "",
    jobStatus: 1,
    completeResume: false,
    user: null,
    positionalTitleOne: null,
    positionalTitleTwo: null,
    professionalCertificatesOne: null,
    professionalCertificatesTwo: null,
    major:null
});
onMounted(() => {
    getEumDataFn();
    getData();
});

// 户籍地
const provinceCityDistrict = ref("");
const provinceCityDistrictArray = [];
const columnChange = ({ selectedItem, index, resolve, finish }) => {
    provinceCityDistrictArray.splice(index, 1, selectedItem.label);
    const areaData = findChildrenByCode(colPickerData, selectedItem.value);
    if (areaData && areaData.length) {
        resolve(
            areaData.map(item => {
                return {
                    value: item.value,
                    label: item.text
                };
            })
        );
    } else {
        finish();
        provinceCityDistrict.value = provinceCityDistrictArray.join("");
    }
};

// 常住地
const provinceCityDistrict2 = ref("");
const provinceCityDistrictArray2 = [];
const columnChange2 = ({ selectedItem, index, resolve, finish }) => {
    provinceCityDistrictArray2.splice(index, 1, selectedItem.label);
    const areaData = findChildrenByCode(colPickerData, selectedItem.value);
    if (areaData && areaData.length) {
        resolve(
            areaData.map(item => {
                return {
                    value: item.value,
                    label: item.text
                };
            })
        );
    } else {
        finish();
        provinceCityDistrict2.value = provinceCityDistrictArray2.join("");
    }
};

let residenceCodes = ref("");
function handleConfirm({ value }) {
    residenceCodes.value = value.join();
}

let birthCodes = ref("");
function handleConfirm2({ value }) {
    console.log(value);
    birthCodes.value = value.join();
}

// 页面跳转
const toIdcard = () => {
    uni.navigateTo({
        url: "/pages/user/resume/realNameAuthentication/index",
        success: function (res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit("pageEvent", userInfo.value);
        }
    });
};
/* 头像 */
const bindUploadImg = () => {
    uni.chooseFile({
        count: 1,
        type: "image",
        crop: {
            width: 200,
            height: 200,
            resize: false
        },
        success(res) {
            uploadFiles(res.tempFiles).then(imgs => {
                userInfo.value.avatarPath = imgs[0].key;
            });
            /* const files = res.tempFilePaths.map(v => ({
                fileType: "image",
                filePath: v
            }));
            uploaderMediaFile(files).then(img => {
                userInfo.value.avatarPath = img[0].key;
            }); */
        }
    });
};
/* 选中时间 */
const dateformat = date => dayjs(date).format("YYYY-MM-DD");
const confirmBirthdayData = e => {
    console.log(e);
};
/* 身份 */
const identityTypeOpstion = ref([]);
getEumData("EnumIdentityType").then(res => {
    res.forEach(v => {
        v.code = v.code * 1;
    });
    identityTypeOpstion.value = res;
    console.log("identityTypeOpstionidentityTypeOpstion", identityTypeOpstion.value);
});
/* 学历 */
const educationText = ref("");
const educationOpstion = ref([]);
const levelOpstion = ref([]);

/* 专业 */
const majorValue = ref([]);
const majorOpstion = ref([]);
const columnChangeMajor = ({ selectedItem, resolve, finish }) => {
    if (selectedItem.children) {
        resolve(selectedItem.children);
    } else {
        finish();
    }
};
const handleConfirmMajor = ({ value }) => {
    userInfo.value.major = value[0] + '-' + value[1]
};
getMajorTreeApi().then(res => {
    console.log(res);
    if (res.code === 200) {
        majorOpstion.value.push(
            Object.keys(res.data).map(key => ({
                name: key,
                children: res.data[key]
            }))
        );
    }
});

const getEumDataFn = () => {
    getEumData("EnumEducation").then(res => {
        res.forEach(v => {
            v.code = v.code * 1;
        });
        educationOpstion.value = res;
    });
    getEumData("EnumCertificatesLevel").then(res => {
        res.forEach(v => {
            v.code = v.code * 1;
        });
        levelOpstion.value = res;
    });
};

const changeEducationLevel = e => {
    educationText.value = e.selectedItems.text;
};
const changeEducationLevel2 = e => {
    userInfo.value.positionalTitleTwo = e.selectedItems.text;
};
const changeEducationLevel3 = e => {
    userInfo.value.professionalCertificatesTwo = e.selectedItems.text;
};

const getData = async () => {
    const { data, code } = await getLoginUserApi();
    console.log(data);
    if (code == 200) {
        if (!data) {
            verified.value = 1;
            return;
        }
        userInfo.value = data;
        const residence = data.residenceAddress.split("-");
        const birth = data.birthAddress.split("-");
        residenceCodes.value = data.residenceCodes;
        birthCodes.value = data.birthCodes;
        userInfo.value.identityTypes = data.identityTypes.split(",").map(item => item * 1);
        if (data.positionalTitle) {
            userInfo.value.positionalTitleOne = data.positionalTitle.split("-")[0];
            userInfo.value.positionalTitleTwo = data.positionalTitle.split("-")[1];
        }
        if (data.professionalCertificates) {
            userInfo.value.professionalCertificatesOne = data.professionalCertificates.split("-")[0];
            userInfo.value.professionalCertificatesTwo = data.professionalCertificates.split("-")[1]; 
        }
        provinceCityDistrict.value = residence[0];
        provinceCityDistrict2.value = birth[0];
        userInfo.value.residenceAddress = residence[1];
        userInfo.value.birthAddress = birth[1];
        educationText.value = educationOpstion.value[data.education - 1].text;
    }
};

/* 提交 */
const submit = () => {
    console.log(userInfo);
    const {
        citizenId,
        positionalTitleOne,
        positionalTitleTwo,
        professionalCertificatesOne,
        professionalCertificatesTwo,
        specialCertificates,
        major,
        birthAddress,
        residenceAddress,
        avatarPath,
        name,
        sex,
        phone,
        email,
        birthday,
        identityTypes,
        education,
        workAge,
        personalTags
    } = userInfo.value;
    const params = {
        residenceCodes: residenceCodes.value,
        birthCodes: birthCodes.value,
        residenceAddress: provinceCityDistrict.value + "-" + residenceAddress,
        birthAddress: provinceCityDistrict2.value + "-" + birthAddress,
        major,
        positionalTitle: positionalTitleOne + "-" + positionalTitleTwo,
        professionalCertificates: professionalCertificatesOne + "-" + professionalCertificatesTwo,
        citizenId,
        specialCertificates,
        avatarPath,
        name,
        sex,
        phone,
        email,
        birthday,
        identityTypes: identityTypes.join(),
        education,
        workAge,
        personalTags
    };
    if (!positionalTitleOne || !positionalTitleTwo) {
        params.positionalTitle = null;
    }
    if (!professionalCertificatesOne || !professionalCertificatesTwo) {
        params.professionalCertificates = null;
    }
    console.log("params", params);
    saveUserInfoApi(params).then(res => {
        if (res.code == 200) {
            uni.showToast({
                title: "保存成功",
                icon: "none"
            });
            uni.navigateBack();
        } else {
            uni.showToast({
                title: res.message,
                icon: "none"
            });
        }
    });
};
</script>
<style lang="scss" scoped>
.col-picker {
    border-bottom: 1rpx solid #e9e9e9;
    padding: 32rpx 0;
    ::v-deep .wd-col-picker__cell {
        padding: 0;
    }
    ::v-deep .wd-col-picker__label {
        color: #77818f;
        font-size: 24rpx;
        margin: 0;
        min-width: 200rpx !important;
        max-width: 200rpx !important;
    }
    ::v-deep .wd-col-picker__arrow {
        font-size: 32rpx;
        color: #000;
    }
    ::v-deep .wd-col-picker__value {
        font-weight: 600;
    }
}
</style>

<style lang="scss" scoped>
/* pages/my-resume/my-resume.wxss */
.essential-information {
    box-sizing: border-box;
    background: #ffffff;
    padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
}
.real-name-authentication {
    padding: 12rpx 20rpx;
    margin: 0 32rpx;
    background: rgb(31 134 255 / 10%);
    border-radius: 12rpx;
    img {
        width: 94rpx;
        height: 96rpx;
        margin-right: 30rpx;
    }
    .text1 {
        font-size: 28rpx;
        font-weight: 600;
        line-height: 36rpx;
        color: #1f86ff;
    }
    .text2 {
        font-size: 22rpx;
        font-weight: normal;
        line-height: 36rpx;
        color: #1f86ff;
    }
    .btn {
        width: 130rpx;
        height: 48rpx;
        font-size: 24rpx;
        line-height: 48rpx;
        color: #ffffff;
        text-align: center;
        background: #1f86ff;
        border-radius: 8rpx;
    }
}

/* 个人资料 */
.my-info .info-title {
    float: left;
    overflow: hidden;
    font-size: 36rpx;
    font-weight: 500;
    color: rgb(51 51 51 / 100%);
    background: #ffffff;
}
.my-info .info-title text {
    display: inline-block;
    color: #3a3a3c;
}

/* .my-info .info-title text::after {
    content: "";
    width: 100%;
    display: inline-block;
  } */
.my-info .info-title view {
    float: right;
    color: #ed877b;
}
.my-info .my-info-bottom {
    border: none;
    border-bottom: 24rpx solid #f5f5f5;
}
.my-info .border-none {
    border: none;
}
.my-info .my-info-title {
    margin-right: 60rpx;
}
.my-info .my-info-title view {
    float: right;
    color: #ed877b;
}
.my-info .my-info-img {
    float: left;
    width: 80rpx;
    height: 80rpx;
    margin-right: 24rpx;
    border-radius: 50%;
}
.my-info .my-info-form {
    width: 66%;
    padding: 20rpx 0 38rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #213452;
}
.my-info .post-detail-data {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.log-input-p {
    color: #808080;
}
.my-info .my-info-icon {
    position: absolute;
    top: 50%;
    right: 9rpx;
    width: 48rpx;
    height: 48rpx;
    transform: translate(0, -50%);
}
.my-info .my-info-len {
    float: right;
    margin-right: 32rpx;
    font-size: 28rpx;
    color: #808080;
}
.my-form-submit .my-form-button {
    width: 600rpx;
    height: 72rpx;
    padding: 0;
    margin: 12rpx auto 14rpx;
    margin-top: 60rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    background: #1892ff;
    border-radius: 8px;
}
.my-info .my-infoImg {
    color: #808080;
}

/* 图片裁剪 */
.body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.body .stage {
    flex-grow: 1;
}
.body .bar {
    display: flex;
    flex-direction: row;
    height: 80rpx;
    padding: 36rpx;
    background-color: black;
}
.body .btn {
    position: relative;
    flex-grow: 1;
    font-size: 32rpx;
    line-height: 80rpx;
    color: white;
    text-align: center;
}
.body .btn-cancel {
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
}
.body .btn-submit {
    border-top-right-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
}
.appExtension {
    padding: 28rpx 32rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: rgb(245 166 35 / 100%);
    text-align: center;
}
.appExtension .appBtn {
    margin-bottom: 12rpx;
}
.appExtension .appBtn .btn {
    display: inline-block;
    width: 140rpx;
    height: 52rpx;
    margin-right: 16rpx;
    line-height: 52rpx;
    vertical-align: middle;
    border: 2rpx solid rgb(245 166 35 / 100%);
    border-radius: 8rpx;
}

/** 新样式 **/
.label {
    font-size: 24rpx;
    color: #616c7a;
}
.avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}
.avatar-label {
    font-size: 28rpx;
    font-weight: 600;
    color: #213452;
}
.warning {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 20rpx;
}
.warning .icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 6rpx;
}
.warning .text {
    font-size: 24rpx;
    color: #fa4a00;
}
.flex-row-b-c {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.pd-b-38 {
    padding-bottom: 38rpx;
}
.mr-32 {
    margin-right: 32rpx;
}

/* radios */
.radios {
    display: flex;
    align-items: center;
}
.radios .icon {
    width: 108rpx;
    height: 48rpx;
}
.placeholder-style {
    font-size: 24rpx !important;
    color: #a0afc3 !important;
}
.footer-warning {
    margin: 0;
    margin-bottom: 48rpx;
}
.footer-warning .text {
    color: #8693a3;
}
.my-info {
    padding: 0 32rpx;
    .tips {
        font-size: 24rpx;
        color: #cccccc;
        margin-top: 24rpx;
    }
    .my-info-list {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 32rpx 0;
        padding-top: 48rpx;
        padding-right: 5rpx;

        /* height: 96rpx;
    line-height: 96rpx; */
        overflow: hidden;
        background: #ffffff;
        border-bottom: 1rpx solid #e9e9e9;

        /* picker {
      flex: 1;
    } */
        .label {
            flex: 0 0 200rpx;
            margin: 0;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 36rpx;
            color: #77818f;
        }
        .placeholder-style {
            font-size: 28rpx;
            font-weight: normal;
            line-height: 36rpx;
            color: #77818f;
        }
        .my-info-form {
            flex: 1;
            padding: 0;
        }
        .radios {
            font-size: 28rpx;
            line-height: 36rpx;
            color: #1b2026;
            .radios-item {
                display: flex;
                align-items: center;
                margin-right: 48rpx;
                .inner {
                    box-sizing: border-box;
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 16rpx;
                    border: 2rpx solid #77818f;
                    border-radius: 50%;
                }
                &.active {
                    .inner {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-color: #1f86ff;
                        &::after {
                            display: block;
                            width: 16rpx;
                            height: 16rpx;
                            content: "";
                            background-color: #1f86ff;
                            border-radius: 50%;
                        }
                    }
                }
            }
        }
    }
    .two-rows {
        display: flex;
        flex-direction: column;
        padding-top: 24rpx;
        .title {
            font-size: 24rpx;
            color: #77818f;
            font-family: 苹方-简;
        }
        .bottom-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .bottom-one {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 45%;
                border-bottom: 1rpx solid #e9e9e9;
                height: 100rpx;
                .write-icon {
                    width: 28rpx;
                    height: 28rpx;
                }
                .placeholder-style {
                    font-size: 28rpx;
                    font-weight: normal;
                    line-height: 36rpx;
                    color: #77818f;
                }
                .my-info-form {
                    flex: 1;
                    padding: 0;
                }
            }
        }
    }
    .upload-avatar {
        .avatar {
            width: 56rpx;
            height: 56rpx;
        }
    }
    .identity {
        flex-wrap: wrap;
        .radios-item:not(:last-child) {
            margin-bottom: 16rpx;
        }
    }
}
.my-form-submit {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    text-align: center;
    border-top: 1rpx solid #ebebeb;
    background-color: #ffffff;
}
</style>
