<template>
    <div class="page">
        <NavBar
            backIcon="#ffffff"
            :showIcon="true"
            :showTitle="true"
            title="添加企业"
            backgroundBox="#1F86FF"
            textColor="#ffffff"
        ></NavBar>
        <view class="welcome flex-between">
            <view class="text">
                <view class="t1">Welcome</view>
                <view class="t2">进入乐业观山湖</view>
            </view>
            <image src="@/static/image/businessLicense/hi.png"></image>
        </view>
        <view class="content">
            <view v-if="step === 1">
                <view class="t1">个人信息</view>
                <div class="content1">
                    <div class="item flex-between">
                        <p class="label">头像</p>
                        <div class="flex-align-center" @click="chooseImage">
                            <image
                                v-if="params.avatarPath"
                                class="avatar"
                                :src="evn.APP_IMAGE_BASE_API + params.avatarPath"
                                mode=""
                            />
                            <image v-else class="avatar" src="@/static/image/user/default-avatar.png" mode="" />
                            <div class="arrow"></div>
                        </div>
                    </div>
                    <div class="item">
                        <p class="label">姓名<text class="red">*</text></p>

                        <input type="text" v-model="params.realName" placeholder="请输入姓名" />
                    </div>
                    <div class="item">
                        <p class="label">职位<text class="red">*</text></p>
                        <input type="text" v-model="params.position" placeholder="请输入职位" />
                    </div>
                    <div class="item">
                        <p class="label">电话<text class="red">*</text></p>
                        <input type="number" v-model="params.phone" placeholder="请输入电话" />
                    </div>
                </div>
            </view>
            <!-- <view class="name" v-if="step === 1">
                <view class="t1">企业信息</view>
                <input type="text" v-model="pinias.formData.name" placeholder="请输入企业名称" />
            </view> -->
            <!-- <view class="name" v-if="step === 2">
                <view class="t1">信用代码</view>
                <input type="text" v-model="pinias.formData.creditCode" placeholder="请输入信用代码" />
            </view> -->
            <view class="image-upload" v-if="step === 3">
                <view class="t1">营业执照照片</view>
                <view class="t2">注：执照信息清晰可见，照片内容真实有效，不做任何修改，大小不超过10M</view>
                <image v-if="pinias.formData.licensePath" :src="evn.APP_IMAGE_BASE_API + pinias.formData.licensePath" mode="" />
                <image v-else @click="showPopout = true" src="@/static/image/businessLicense/businessLicenseUpload.png" mode="" />
            </view>
        </view>
        <view class="btn-wrap flex-center">
            <button v-if="step < 3" class="bottom-btn" @tap="nextStep">下一步</button>
            <template v-if="step === 3 && !!pinias.formData.licensePath">
                <button class="reupload" @tap="showPopout = true">重新上传</button>
                <button class="next" @tap="nextStep">下一步</button>
            </template>
        </view>
        <!-- 选择营业执照 -->
        <wd-overlay :show="showPopout" @click="showPopout = false">
            <view class="popout-wrap" @click.stop>
                <view class="tips">
                    <view class="title">营业执照拍摄技巧</view>
                    <view class="flex-between">
                        <image src="@/static/image/businessLicense/template.png" mode="" />
                        <view class="text-wrap">
                            <view>1.确保页面<text class="orange">【文字区域】</text>拍摄清晰</view>
                            <view class="m16">2.如果光线足够可以关闭闪光灯<text class="orange">【避免反光】</text></view>
                            <view>3.文件边框不可缺</view>
                        </view>
                    </view>
                </view>
                <view class="select-list">
                    <view class="item" @tap="chooseImage('camera')">拍照</view>
                    <view class="item" @tap="chooseImage('album')">从手机相册选择</view>
                    <view class="item" @tap="showPopout = false">取消</view>
                </view>
            </view>
        </wd-overlay>
    </div>
</template>

<script setup>
import { ref } from "vue";
import evn from "@/utils/config";
import { uploadFiles } from "@/utils/fileUpload";
import { ocrLicense, getLoginUserApi } from "@/api/user.js";

import { useDefineStore } from "./store";
const pinias = useDefineStore();
const params = reactive({
    avatarPath: "",
    realName: "",
    phone: "",
    position: ""
});
onLoad(() => {
    console.log(uni);
});
const step = ref(0);
const name = ref("");
const showPopout = ref(true);

onShow(() => {
    step.value = 0;
    // getLoginUserApiFn();
});
function ocrLicenseFn(uri) {
    return ocrLicense({ uri }).then(res => {
        if (res.code == 200) {
            pinias.setFormDataKey("name", res.data.name);
            pinias.setFormDataKey("creditCode", res.data.regNum);
        }
    });
}
// function getLoginUserApiFn() {
//     getLoginUserApi().then(user => {
//         if (user.code == 200) {
//             const { avatarPath, realName, phone, position } = user.data;
//             params.avatarPath = avatarPath;
//             params.realName = realName;
//             params.phone = phone;
//             params.position = position;
//         }
//         console.log("user", user);
//     });
// }
const nextStep = () => {
    let flag = false;
    switch (step.value) {
        case 1:
            if (!pinias.formData.name) flag = true;
            break;
        case 2:
            if (!pinias.formData.creditCode) flag = true;
            break;
        case 3:
            wx.navigateTo({
                url: `/pages/user/businessLicense/submit`
            });
            break;
        default:
            break;
    }
    if (flag) {
        uni.showToast({
            title: "请先完成操作",
            icon: "none"
        });
        return;
    }
    step.value++;
};
/* 选择图片 */
const chooseImage = sourceType => {
    uni.chooseImage({
        sourceType: [sourceType],
        count: 1,
        success: async ({ tempFiles }) => {
            const res = await uploadFiles(tempFiles);
            pinias.setFormDataKey("licensePath", res[0].key);
            ocrLicenseFn(res[0].key);
            showPopout.value = false;
        }
    });
};
</script>

<style></style>
<style lang="scss" scoped>
:deep(.uni-page-head-hd) {
    display: none;
}
.page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;

    // padding-top: 54rpx;
    background-color: #1f86ff;
}
.welcome {
    padding: 54rpx 80rpx 0 66rpx;
    image {
        width: 164rpx;
        height: 164.46rpx;
    }
    .t1 {
        font-size: 48rpx;
        line-height: 40rpx;
        color: #ffffff;
    }
    .t2 {
        margin-top: 26rpx;
        font-size: 48rpx;
        line-height: 40rpx;
        color: #ffffff;
    }
}
.content {
    flex: 1;
    padding: 80rpx 32rpx 0;
    margin-top: 52rpx;
    background-color: #ffffff;
    border-top-left-radius: 80rpx;
    border-top-right-radius: 80rpx;
    .item {
        display: flex;
        align-items: center;

        // justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid #f3f4f8;
        .label {
            flex: 0 0 100px;
            font-size: 12px;
            font-weight: 500;
            line-height: 18px;
            color: #77818f;
            .red {
                color: red;
            }
        }
        input {
            font-size: 14px;
            font-weight: normal;
            line-height: 18px;
            color: #1b2026;
        }
        image {
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }
    }
    .t1 {
        font-size: 32rpx;
        line-height: 54rpx;
        color: #1b2026;
    }
    .t2 {
        font-size: 24rpx;
        line-height: 36rpx;
        color: #a3a7b3;
    }
    .name {
        input {
            padding: 32rpx 0 16rpx;
            margin-top: 16rpx;
            border-bottom: 2rpx solid #f3f4f8;
        }
    }
    .image-upload {
        .t2 {
            margin-top: 16rpx;
        }
        image {
            width: 686rpx;
            height: 386rpx;
            margin-top: 84rpx;
        }
    }
}
.popout-wrap {
    .tips {
        padding: 32rpx 0 94rpx;
        background-color: #ffffff;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        .title {
            margin: 0 0 70rpx;
            font-size: 36rpx;
            font-weight: 600;
            line-height: 54rpx;
            color: #1b2026;
            text-align: center;
        }
        image {
            width: 340rpx;
            height: 222rpx;
        }
        .flex-between {
            padding: 0 32rpx 0 16rpx;
            .text-wrap {
                margin-left: 10rpx;
            }
            .m16 {
                margin: 32rpx 0;
            }
            .orange {
                color: #ff561b;
            }
            view {
                font-size: 24rpx;
                line-height: 36rpx;
                color: #1b2026;
            }
        }
    }
    .select-list {
        margin-top: 14rpx;
        text-align: center;
        background-color: #ffffff;
        .item {
            height: 108rpx;
            line-height: 108rpx;
            &:not(:first-child) {
                border-top: 2rpx solid #f3f4f8;
            }
        }
    }
}
.btn-wrap {
    box-sizing: border-box;
    height: 112rpx;
    padding: 16rpx 0;
    background-color: #ffffff;
    border-top: 2rpx solid rgb(31 35 41 / 15%);
    .next,
    .reupload {
        width: 294rpx;
        height: 80rpx;
        margin: 0;
        font-size: 30rpx;
    }
    .next {
        margin-left: 64rpx;
        color: #ffffff;
        background-color: #1f86ff;
    }
    .reupload {
        color: #1f86ff;
        background: #1f86ff22;
    }
}
.wd-transition {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
</style>
