<template>
    <NavBar :showIcon="true" :showTitle="true" title="实名认证" backgroundBox="#ffffff"></NavBar>
    <div class="page">
        <view class="text1">请填写您的真实身份信息</view>
        <view class="text2">信息仅用于身份核实</view>
        <view class="input-form">
            <view class="item">
                <view class="label">姓名</view>
                <input type="text" v-model="data.realName" placeholder="请输入姓名" />
            </view>
            <view class="item">
                <view class="label">身份证号</view>
                <input type="text" v-model="data.citizenId" placeholder="请输入身份证号" />
            </view>
        </view>
        <!-- 身份证 -->
        <view class="idcard flex-between">
            <img
                :src="data.idCardFrontPath ? evn.APP_IMAGE_BASE_API + data.idCardFrontPath : idCardFrontPathDefle"
                @tap="uploadeImage(1)"
            />
            <img
                :src="data.idCardBackPath ? evn.APP_IMAGE_BASE_API + data.idCardBackPath : idCardBackPathDefle"
                @tap="uploadeImage(2)"
            />
        </view>

        <view class="btn-wrap">
            <button @tap="submit">保存</button>
        </view>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { uploadFiles } from "@/utils/fileUpload.js";
import evn from "@/utils/config.js";
import { saveIdCardApi } from "@/api/user.js";
const data = reactive({
    citizenId: "",
    idCardFrontPath: "",
    idCardBackPath: "",
    realName: ""
});
const idCardFrontPathDefle = new URL("@/static/image/user/idcardFront.png", import.meta.url);
const idCardBackPathDefle = new URL("@/static/image/user/idcardBack.png", import.meta.url);
onLoad(() => {
    const instance = getCurrentInstance().proxy;
    const eventChannel = instance.getOpenerEventChannel();
    eventChannel.on("pageEvent", function (datas) {
        data.realName = datas.realName;
        data.citizenId = datas.citizenId;
        data.idCardFrontPath = datas.idCardFrontPath;
        data.idCardBackPath = datas.idCardBackPath;
    });
});

const uploadeImage = type => {
    // 正面
    uni.chooseImage({
        count: 1,
        success: async e => {
            console.log(e);
            const fList = await uploadFiles(e.tempFiles);
            console.log(fList);
            if (type == 1) {
                data.idCardFrontPath = fList[0].key;
            } else {
                data.idCardBackPath = fList[0].key;
            }
        }
    });
};
const submit = () => {
    let release = true;
    console.log("打印", data);
    for (let i in data) {
        if (!data[i]) {
            release = false;
        }
    }
    if (!release) {
        uni.showToast({
            title: "请完善相关信息",
            icon: "none"
        });
        return;
    }
    saveIdCardApi(data).then(res => {
        if (res.code == 200) {
            uni.showToast({
                title: "提交成功",
                icon: "none"
            });
            setTimeout(() => {
                uni.navigateBack({
                    delta: 1
                });
            }, 1500);
        }
    });
};
</script>

<style lang="scss" scoped>
.page {
    box-sizing: border-box;
    padding: 32rpx;
}
.text1 {
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 36rpx;
    color: #1b2026;
}
.text2 {
    margin-bottom: 80rpx;
    font-size: 24rpx;
    font-weight: normal;
    line-height: 36rpx;
    color: #1b2026;
}
.label {
    font-size: 24rpx;
    font-weight: 500;
    color: #77818f;
}
.input-form {
    border-bottom: 2rpx solid #f3f4f8;
    .item {
        display: flex;
        align-items: center;
        .label {
            flex: 0 0 200rpx;
        }
        input {
            padding: 24rpx 0;
        }
    }
}
.idcard {
    padding-top: 32rpx;
    img {
        width: 328rpx;
        height: 184rpx;
    }
}
.btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 16rpx 64rpx;
    border-top: 2rpx solid rgb(31 35 41 / 15%);
    button {
        font-size: 30rpx;
        font-weight: 600;
        color: #ffffff;
        background: #1f86ff;
        border-radius: 12rpx;
    }
}
</style>
