<template>
    <view class="main">
        <view class="logo">
            <image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
        </view>
        <view class="container">
            <view class="head">
                <view style="display:flex; align-items: center;">
                    <view class="title">注册手机号</view>
                    <!-- <view :style="{ fontSize: '18rpx' }">*实名认证失败</view> -->
                    <!-- <view>*实名认证成功</view> -->
                </view>
                <view style="color:#7FA770;font-size:24rpx;margin-left:36rpx">此实名仅用于注册该小程序</view>
            </view>
            <view class="info">
                <view class="item">
                    <view class="name">姓名</view>
                    <u--input placeholder="请输入姓名" border="none" v-model="name" @change="changeName"></u--input>
                </view>
                <view class="item">
                    <view class="name">身份证号</view>
                    <u--input placeholder="请输入身份证号" border="none" v-model="num" @change="changeNum" clearable
                        type="number"></u--input>
                </view>
            </view>
            <view class="card-box">
                <view class="color:#626262;font-size:28rpx">身份证照片</view>
                <view style="display: flex;justify-content:space-between;margin-top:20rpx">
                    <view class="card">
                        <view>
                            <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                                :maxCount="1" :width="'270rpx'" :height="'158rpx'" previewImage>
                                <image src="@/static/image/card.png" mode="scaleToFill"
                                    style="width: 270rpx;height: 158rpx;"></image>
                            </u-upload>
                        </view>
                        <view style="color:#4E964D;font-size:20rpx;margin-top:20rpx">上传身份证人像面</view>
                    </view>
                    <view class="card">
                        <view>
                            <u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="1" multiple
                                :maxCount="1" :width="'270rpx'" :height="'158rpx'">
                                <image src="@/static/image/card2.png" mode="scaleToFill"
                                    style="width: 270rpx;height: 158rpx;"></image>
                            </u-upload>
                        </view>
                        <view style="color:#4E964D;font-size:20rpx;margin-top:20rpx">上传身份证国徽面</view>
                    </view>
                </view>
            </view>
            <view class="face">
                <view class="faceTitle">人脸识别</view>
                <view class="recognition" @click="camera" v-if="!isfinish">
                    <view style="color: #fff;margin-right:10rpx">前往认证</view>
                    <u-icon name="arrow-right-double" color="#fff"></u-icon>
                </view>
                <view class="recognition" @click="camera" v-else>
                    <view style="color: #fff;margin-right:10rpx">认证成功</view>
                    <u-icon name="checkmark-circle" color="#fff"></u-icon>
                </view>
            </view>
            <view class="face">
                <view class="faceTitle">法大大认证</view>
                <view class="recognition" >
                    <view style="color: #fff;margin-right:10rpx">前往认证</view>
                    <u-icon name="arrow-right-double" color="#fff"></u-icon>
                </view>
                <!-- <view class="recognition">
                    <view style="color: #fff;margin-right:10rpx">认证成功</view>
                    <u-icon name="checkmark-circle" color="#fff"></u-icon>
                </view> -->
            </view>
            <view class="agreement">
                <u-checkbox-group v-model="checked" iconPlacement="left" placement="row" inactiveColor="#76C458">
                    <u-checkbox name="yes" shape="circle" activeColor="#76C458"></u-checkbox>
                    <view class="know">
                        已阅读并同意
                        <text @click="agreementHandle('service')">《用户协议》&《集保东西用户协议》</text>
                    </view>
                </u-checkbox-group>
            </view>
            <view style="width:284rpx;margin:20rpx auto">
                <u-button text="完成注册" shape="circle" @click="completeRegistration" color="#76C458"></u-button>
            </view>
        </view>
    </view>
</template>

<script>
import http from "@/http/api";
export default {
    data() {
        return {
            name: "",
            num: "",
            checked: [],
            fileList: [],
            fileList2: [],
            video: '',
            isfinish: false
        };
    },
    onLoad(options) {
        if(options.tempVideoPath){
            this.isfinish = JSON.parse(options.isfinish)||false
            this.video = options.tempVideoPath;
           this.uploadFilePromise(options.tempVideoPath,'video')
        }
        this.name =  uni.getStorageSync("info").name||''
        this.num = uni.getStorageSync("info").num||''
        this.fileList = uni.getStorageSync("info").fileList||[]
        this.fileList2 = uni.getStorageSync("info").fileList2||[]
        uni.removeStorageSync("info")
    },
    methods: {
        changeName(value) {
            this.name = value;
        },
        changeNum(value) {
            this.num = value;
        },
        camera() {
            const data = {
                num: this.num,
                name: this.name,
                fileList: this.fileList,
                fileList2: this.fileList2
            }
            uni.navigateTo({
                url: '/pages/cameraContext/cameraContext'
            });
            uni.setStorageSync("info", data)
        },
        async completeRegistration() {
            if (!this.checked.length) return this.$common.msgToast("请阅读并勾选协议");
            if (!this.checked.length) return this.$common.msgToast("请阅读并勾选协议");
            if (!this.name) return this.$common.msgToast("请输入姓名");
            if (!this.num) return this.$common.msgToast("请输入身份证号");
            if (!this.fileList.length) return this.$common.msgToast("请上传身份证人面像");
            if (!this.fileList2.length) return this.$common.msgToast("请上传身份国徽面");
            if (!this.video) return this.$common.msgToast("请上传人脸识别视频");
            console.log({
                telNum: uni.getStorageSync("telNum"),
                realNameIDName: this.num,
                realName: this.name,
                video: this.video,
                realIDImgA: this.fileList[0]?.url,
                realIDImgB: this.fileList2[0].url
            })
            const res = await this.$api.login.register({user:{
                telNum: uni.getStorageSync("telNum"),
                realNameIDName: this.num,
                realName: this.name,
                video: this.video,
                realIDImgA: this.fileList[0]?.url,
                realIDImgB: this.fileList2[0]?.url
            }})
            if (res.status === 0) {
                uni.switchTab({
                    url: '/pages/home/index'
                });
            }else{
                this.$common.msgToast(res.msg)
            }

        },
        // 删除图片
        deletePic(event) {
            this[`fileList`].splice(event.index, 1)
        },
        // 删除图片
        deletePic2(event) {
            this[`fileList2`].splice(event.index, 1)
        },
        // 新增图片
        async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this[`fileList`].length
            lists.map((item) => {
                this[`fileList`].push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                let item = this[`fileList`][fileListLen]
                this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result
                }))
                fileListLen++
            }
        },
        async afterRead2(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this[`fileList2`].length
            lists.map((item) => {
                this[`fileList2`].push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                let item = this[`fileList2`][fileListLen]
                this[`fileList2`].splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result
                }))
                fileListLen++
            }
        },
        uploadFilePromise(url,type=null) {
            console.log(url)
            return new Promise((resolve) => {
                uni.uploadFile({
                    url: http.baseUrl + "/api/wxuser/uploadpic",
                    filePath: url,
                    name: "file",
                    success: (res) => {
                        console.log(9999999999999999999,res)
                        res.data = JSON.parse(res.data);
                        resolve(res.data.data.path);
                        if(type ==='video'){
                            this.video = res.data.data.path
                        }
                    },
                });
            });
        },
    }
};
</script>

<style lang="scss" scoped>
/deep/.u-checkbox__icon-wrap--circle {
    width: 25upx !important;
    height: 25upx !important;
}

/deep/ .u-checkbox-label--left {
    margin-top: 20rpx;
}

.main {
    background: url("@/static/image/login-bg.png") no-repeat;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;

    .logo {
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .img {
            width: 124rpx;
            height: 72rpx;
        }
    }

    .container {
        display: flex;
        flex-direction: column;
        flex: 1;
        box-sizing: border-box;
        height: calc(100vh - 200upx);
        width: 100%;
        background: #fff;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
        padding: 62rpx 32rpx;

        .head {
            .title {
                color: #626262;
                font-size: 40rpx;
                margin-left: 36rpx;
                font-weight: 600;
            }
        }

        .info {
            margin-top: 24rpx;

            .item {
                box-sizing: border-box;
                background: #f8f8f8;
                border-radius: 20rpx;
                width: 100%;
                height: 92rpx;
                display: flex;
                align-items: center;
                padding-left: 24rpx;
                margin-bottom: 20rpx;

                .name {
                    width: 200rpx;
                    height: 72rpx;
                    line-height: 72rpx;
                    border-right: 1rpx solid #d1d1d1;
                }

                /deep/ .u-input {
                    margin-left: 40rpx;
                }
            }
        }

        .card-box {
            width: 100%;
            height: 322rpx;
            background: #f8f8f8;
            padding: 32rpx 24rpx;
            box-sizing: border-box;

            .card {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
        }

        .face {
            margin-top: 20rpx;
            box-sizing: border-box;
            background: #f8f8f8;
            border-radius: 20rpx;
            width: 100%;
            height: 92rpx;
            display: flex;
            align-items: center;

            .faceTitle {
                width: 202rpx;
                height: 100%;
                padding: 26rpx 0 26rpx 24rpx;
                box-sizing: border-box;
            }

            .recognition {
                height: 92rpx;
                width: calc(100% - 202rpx);
                background: #76C458;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 0 20rpx 20rpx 0;
            }
        }

        .agreement {
            font-size: 28rpx;
            margin: 46rpx auto;

            .know {
                margin-top: 20upx;
                font-size: 28upx;
                color: #a6a6a6;

                text {
                    color: #76C458;
                }
            }
        }
    }
}
</style>